/* ==========================================================================
   PrimeCore — Identidad "Brasa"  ·  SPEC §18
   Maquetas Fase 0. CSS de diseño, sin lógica de producto.
   3 modos: dia (Porcelana) · brasa (por defecto) · noche (Ascuas)
   ========================================================================== */

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root, [data-modo="brasa"] {
  --bg:#07090D;  --bg2:#0C1016;  --card:#12161D;  --card2:#0F131A;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  --text:#ECF1F6; --mute:#8C99A8;
  --brasa1:#FF6A3D; --brasa2:#FFB13D;
  --ok:#12E29A; --danger:#E5484D;
  --ok-ink:#12E29A; --danger-ink:#E5484D;

  --glow: .38;              /* intensidad de resplandores */
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.42);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --speed: 1;               /* multiplicador de duración de animaciones */
  --raices-presencia: 1;    /* Raíces a plena presencia */
  --scrim: rgba(4,6,9,.78);
}

[data-modo="dia"] {
  --bg:#F2F4F7;  --bg2:#E9EDF2;  --card:#FFFFFF;  --card2:#F7F9FC;
  --line:rgba(16,21,28,.08); --line2:rgba(16,21,28,.16);
  --text:#10151C; --mute:#5B6B7E;
  --brasa1:#FF6A3D; --brasa2:#FFB13D;
  --ok:#12E29A; --danger:#E5484D;
  /* Tokens --ok/--danger idénticos (SPEC §18.2). Para TEXTO sobre claro se usa
     una versión entintada: §18.1(b) — la legibilidad manda sobre la moda. */
  --ok-ink:#04895C; --danger-ink:#C62A2E;

  --glow: .16;
  --shadow: 0 1px 2px rgba(16,21,28,.06), 0 10px 28px rgba(16,21,28,.09);
  --shadow-sm: 0 1px 2px rgba(16,21,28,.07);
  --speed: 1;
  --raices-presencia: 1;
  --scrim: rgba(20,26,34,.55);
}

[data-modo="noche"] {
  --bg:#050608;  --bg2:#08090C;  --card:#0C0E10;  --card2:#0A0B0D;
  --line:rgba(232,226,216,.055); --line2:rgba(232,226,216,.10);
  --text:#E8E2D8; --mute:#7E786D;
  --brasa1:#D95B2F; --brasa2:#D99A33;
  --ok:#12E29A; --danger:#E5484D;
  --ok-ink:#3FB98A; --danger-ink:#C4534F;

  --glow: .18;              /* resplandor bajo: brillo general ~-20% */
  --shadow: 0 1px 2px rgba(0,0,0,.6);
  --shadow-sm: 0 1px 1px rgba(0,0,0,.55);
  --speed: 2.2;             /* animaciones reducidas: la flama arde lenta */
  --raices-presencia: .42;  /* Raíces descansa de noche (Módulo Raíces §9) */
  --scrim: rgba(2,3,4,.85);
}

/* Acentos de pilar — SPEC §2. Idénticos en los 3 modos. */
:root {
  --p-cuerpo:#FF6A3D;
  --p-espiritu:#9B8CFF;
  --p-pareja:#FF6FA5;
  --p-tribu:#FFC24B;
  --p-proposito:#3DA9FF;
  --p-identidad:#E8B84B;
  --raiz1:#8A5A2B;
  --raiz2:#4A3418;
}
/* Noche: "componentes azules minimizados" (§18.2). El tono se conserva,
   se baja luminancia y saturación. Único acento que cambia, y solo aquí. */
[data-modo="noche"] { --p-proposito:#4E7FA3; --p-espiritu:#7C71BF; }

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .4s ease, color .4s ease;
}

.num, .display {
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: 0 18px calc(112px + env(safe-area-inset-bottom));
  position: relative;
  overflow-x: hidden;
}

/* Fondo: brasa que respira detrás del contenido */
.app::before {
  content: "";
  position: fixed;
  inset: -20% -40% auto -40%;
  height: 62vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 0%, color-mix(in srgb, var(--brasa1) 30%, transparent) 0%, transparent 72%),
    radial-gradient(40% 34% at 78% 8%, color-mix(in srgb, var(--brasa2) 20%, transparent) 0%, transparent 70%);
  opacity: var(--glow);
  filter: blur(14px);
}
[data-modo="dia"] .app::before { height: 40vh; }

/* ==========================================================================
   3. CABECERA
   ========================================================================== */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) 0 6px;
}
.topbar .eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.topbar h1 {
  margin: 1px 0 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Selector de modo — afordancia de maqueta (en la app real vive en Config) */
.modos {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--card2);
  border: 1px solid var(--line);
}
.modos button {
  width: 34px; height: 30px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 14px;
  opacity: .5;
  transition: all .25s ease;
}
.modos button[aria-pressed="true"] {
  opacity: 1;
  background: color-mix(in srgb, var(--brasa1) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brasa1) 40%, transparent);
}

/* ==========================================================================
   4. ANILLO DE RACHA
   ========================================================================== */

.ring-wrap {
  position: relative;
  display: grid;
  place-items: center;
  margin: 6px auto 2px;
  width: 232px; height: 232px;
}
.ring { width: 232px; height: 232px; transform: rotate(-90deg); }
.ring .track {
  fill: none;
  stroke: var(--line2);
  stroke-width: 13;
}
.ring .prog {
  fill: none;
  stroke: url(#gradBrasa);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-dasharray: var(--C);
  stroke-dashoffset: var(--C);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--brasa1) 55%, transparent));
  transition: stroke-dashoffset .75s cubic-bezier(.22,1,.36,1);
}
[data-modo="dia"] .ring .prog { filter: none; }
.ring-wrap.go .prog { stroke-dashoffset: var(--off); }

.ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0;
  text-align: center;
}
.flama {
  font-size: 30px;
  line-height: 1;
  animation: arde calc(2.4s * var(--speed)) ease-in-out infinite;
  transform-origin: 50% 85%;
}
@keyframes arde {
  0%, 100% { transform: scale(1) translateY(0); filter: brightness(1); }
  50%      { transform: scale(1.09) translateY(-2px); filter: brightness(1.16); }
}
.racha-num {
  font-size: 62px;
  font-weight: 700;
  line-height: .96;
  margin-top: 2px;
  background: linear-gradient(160deg, var(--brasa2), var(--brasa1));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.racha-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 4px;
}
.ring-sub {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--mute);
}
.ring-sub b { color: var(--text); font-weight: 600; }

/* ==========================================================================
   5. COUNTDOWNS Y DOTS
   ========================================================================== */

.countdowns { display: flex; gap: 10px; margin: 14px 0 4px; }
.cd {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 11px 12px;
  box-shadow: var(--shadow-sm);
}
.cd.grande {
  border-color: color-mix(in srgb, var(--brasa1) 30%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--brasa1) 12%, var(--card)), var(--card));
}
.cd .n { font-size: 25px; font-weight: 700; line-height: 1; }
.cd.grande .n { color: var(--brasa1); }
.cd .t { font-size: 11.5px; color: var(--mute); margin-top: 3px; }

.dots { display: flex; justify-content: space-between; gap: 6px; margin: 16px 2px 0; }
.dot { flex: 1; display: grid; justify-items: center; gap: 6px; }
.dot i {
  width: 100%; max-width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-style: normal; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line);
  background: var(--card2);
  color: var(--mute);
}
.dot.cumplido i { background: color-mix(in srgb, var(--ok) 20%, var(--card)); border-color: color-mix(in srgb, var(--ok) 42%, transparent); color: var(--ok-ink); }
.dot.minimo i   { background: color-mix(in srgb, var(--brasa2) 20%, var(--card)); border-color: color-mix(in srgb, var(--brasa2) 45%, transparent); color: var(--brasa2); }
.dot.parcial i  { background: color-mix(in srgb, var(--brasa1) 14%, var(--card)); border-color: color-mix(in srgb, var(--brasa1) 32%, transparent); color: var(--brasa1); }
.dot.cero i     { background: color-mix(in srgb, var(--danger) 15%, var(--card)); border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger-ink); }
.dot.hoy i {
  border-color: var(--brasa1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brasa1) 18%, transparent);
  color: var(--text);
}
.dot s { font-size: 10px; color: var(--mute); text-decoration: none; }

/* ==========================================================================
   6. TARJETAS Y BLOQUES
   ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 15px 16px;
  box-shadow: var(--shadow-sm);
}
.seccion-tit {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 26px 2px 10px;
}
.seccion-tit h2 {
  margin: 0;
  font-size: 12px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--mute);
}
.seccion-tit .meta { font-size: 12px; color: var(--mute); }

/* Frase de fase */
.fase {
  margin-top: 18px;
  padding: 14px 15px 14px 17px;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brasa1) 11%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--brasa1) 22%, transparent);
  position: relative;
}
.fase::before {
  content: "";
  position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--brasa2), var(--brasa1));
}
.fase .k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--brasa1);
}
.fase p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }

/* ==========================================================================
   7. CHECKLIST POR FRANJAS   ·  SPEC §17.1 y §18.3
   Los checks cumplidos NO desaparecen: quedan visibles y tachados.
   ========================================================================== */

.franja { margin-top: 22px; }
.franja > header {
  display: flex; align-items: center; gap: 9px;
  margin: 0 2px 9px;
}
.franja > header .ic { font-size: 14px; }
.franja > header h3 {
  margin: 0; font-size: 12px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--mute);
}
.franja > header .cuenta {
  font-size: 11.5px; color: var(--mute);
  font-variant-numeric: tabular-nums;
}
/* Barrita y contador se agrupan a la derecha: la barra es el avance de esa
   franja, no un subrayado del título. */
.franja > header .barrita {
  margin-left: auto;
  height: 3px; width: 46px; border-radius: 3px;
  background: var(--line2); overflow: hidden;
}
.franja > header .barrita span {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--brasa2), var(--brasa1));
  transition: width .5s cubic-bezier(.22,1,.36,1);
}

.lista { display: flex; flex-direction: column; gap: 7px; }

.chk {
  --pc: var(--brasa1);
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px 10px 13px;
  text-align: left;
  border-radius: 15px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: background-color .3s ease, border-color .3s ease, transform .12s ease;
}
.chk::before {
  content: "";
  position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pc);
  opacity: .85;
  transition: opacity .3s ease;
}
.chk:active { transform: scale(.985); }

.chk .box {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 9px;
  border: 2px solid var(--line2);
  display: grid; place-items: center;
  transition: all .28s cubic-bezier(.22,1,.36,1);
}
.chk .box svg { width: 14px; height: 14px; stroke: #04140E; stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }

.chk .txt { flex: 1; min-width: 0; }
.chk .txt .n {
  font-size: 14.5px; font-weight: 500;
  display: block;
  transition: color .3s ease;
}
.chk .txt .s { font-size: 11.5px; color: var(--mute); margin-top: 1px; display: block; }
.chk .hora {
  flex: none; font-size: 11.5px; color: var(--mute);
  font-variant-numeric: tabular-nums;
}

/* --- Estado cumplido: visible, tachado, satisfactorio --- */
.chk.done { background: var(--card2); border-color: color-mix(in srgb, var(--ok) 20%, var(--line)); }
.chk.done::before { opacity: .3; }
.chk.done .box {
  background: var(--ok);
  border-color: var(--ok);
  transform: scale(1.04);
}
.chk.done .box svg { stroke-dashoffset: 0; transition: stroke-dashoffset .34s ease .06s; }
.chk.done .txt .n {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ok) 70%, transparent);
  text-decoration-thickness: 2px;
  color: var(--mute);
}
.chk.done .hora { color: var(--ok-ink); font-weight: 600; }

/* --- "La que falta": bucle abierto de Zeigarnik. Una vez, sin nag. --- */
.chk.falta {
  border-color: color-mix(in srgb, var(--brasa1) 40%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--brasa1) 10%, var(--card)), var(--card));
}
.chk.falta::after {
  content: "la que falta";
  position: absolute; right: 12px; top: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brasa1); opacity: .85;
}
.chk.falta.done::after { content: none; }
.chk.falta .hora { display: none; }

/* Colores de pilar aplicables a cualquier ítem */
.p-cuerpo    { --pc: var(--p-cuerpo); }
.p-espiritu  { --pc: var(--p-espiritu); }
.p-pareja    { --pc: var(--p-pareja); }
.p-tribu     { --pc: var(--p-tribu); }
.p-proposito { --pc: var(--p-proposito); }
.p-identidad { --pc: var(--p-identidad); }

/* ==========================================================================
   8. BOTONES
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border-radius: 14px;
  font-size: 14.5px; font-weight: 600;
  border: 1px solid var(--line2);
  background: var(--card);
  color: var(--text);
  transition: transform .12s ease, opacity .2s ease;
}
.btn:active { transform: scale(.98); }
.btn.full { width: 100%; }
.btn.primario {
  border-color: transparent;
  background: linear-gradient(135deg, var(--brasa2), var(--brasa1));
  color: #150802;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--brasa1) 32%, transparent);
}
[data-modo="noche"] .btn.primario { box-shadow: none; }
.btn.fantasma { background: transparent; }
.acciones { display: flex; gap: 9px; margin-top: 16px; }

/* ==========================================================================
   9. TABBAR + FAB
   ========================================================================== */

.tabbar {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 430px; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.tabbar a {
  display: grid; justify-items: center; gap: 3px;
  padding: 6px 2px; min-height: 46px;
  text-decoration: none; color: var(--mute);
  border-radius: 12px;
  transition: color .2s ease;
}
.tabbar a .ic { font-size: 17px; line-height: 1; }
.tabbar a .lb { font-size: 9.5px; font-weight: 600; letter-spacing: .03em; }
.tabbar a[aria-current="page"] { color: var(--brasa1); }

.fab {
  position: fixed; z-index: 41;
  right: max(18px, calc(50% - 215px + 18px));
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: 54px; height: 54px; border-radius: 18px;
  display: grid; place-items: center;
  font-size: 25px; font-weight: 400; line-height: 1;
  color: #150802;
  background: linear-gradient(135deg, var(--brasa2), var(--brasa1));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brasa1) 38%, transparent);
  transition: transform .16s cubic-bezier(.22,1,.36,1);
}
.fab:active { transform: scale(.93) rotate(45deg); }
[data-modo="noche"] .fab { box-shadow: 0 6px 16px rgba(0,0,0,.5); }

/* ==========================================================================
   10. CELEBRACIÓN DE CIERRE DE DÍA  ·  SPEC §18.3 (pico-final)
   ========================================================================== */

.celebra {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 22px;
  background: var(--scrim);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}
.celebra.on { opacity: 1; pointer-events: auto; }

.celebra .caja {
  width: 100%; max-width: 350px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--brasa1) 26%, var(--line));
  border-radius: 26px;
  padding: 30px 24px 22px;
  text-align: center;
  box-shadow: var(--shadow);
  transform: translateY(18px) scale(.95);
  opacity: 0;
  transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}
.celebra.on .caja { transform: none; opacity: 1; }

.celebra .sello {
  width: 86px; height: 86px; margin: 0 auto 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 38px;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--brasa2) 42%, transparent), transparent 68%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brasa1) 45%, transparent);
}
.celebra.on .sello { animation: sello calc(.9s * var(--speed)) cubic-bezier(.2,1.5,.4,1) .1s both; }
@keyframes sello {
  0%   { transform: scale(.4) rotate(-22deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.celebra h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.celebra .lead { margin: 8px 0 0; font-size: 13.5px; color: var(--mute); line-height: 1.5; }

.celebra .votos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin: 18px 0 4px;
}
.voto {
  font-size: 11.5px; font-weight: 600;
  padding: 6px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--vc, var(--brasa1)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--vc, var(--brasa1)) 34%, transparent);
  color: var(--vc, var(--brasa1));
  opacity: 0; transform: translateY(8px);
}
.celebra.on .voto { animation: subeVoto calc(.5s * var(--speed)) cubic-bezier(.2,1,.3,1) both; }
.celebra.on .voto:nth-child(1) { animation-delay: .34s; }
.celebra.on .voto:nth-child(2) { animation-delay: .42s; }
.celebra.on .voto:nth-child(3) { animation-delay: .50s; }
.celebra.on .voto:nth-child(4) { animation-delay: .58s; }
@keyframes subeVoto { to { opacity: 1; transform: none; } }

.celebra .mejor {
  margin-top: 16px; padding: 13px 14px;
  border-radius: 14px;
  background: var(--card2);
  border: 1px solid var(--line);
  text-align: left;
}
.celebra .mejor .k {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brasa1);
}
.celebra .mejor p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; }

/* Chispas: SOLO en cierres de día e hitos (§18.3, evitar habituación) */
.chispas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 26px; }
.chispa {
  position: absolute; top: 46%; left: 50%;
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--brasa2);
  opacity: 0;
}
.celebra.on .chispa { animation: vuela calc(1.5s * var(--speed)) cubic-bezier(.15,.7,.35,1) both; }
@keyframes vuela {
  0%   { opacity: 0; transform: translate(0,0) scale(.4) rotate(0); }
  16%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.85) rotate(260deg); }
}

/* ==========================================================================
   11. PILARES  ·  SPEC §17.3
   ========================================================================== */

.pilares-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pilar {
  --pc: var(--brasa1);
  display: block; text-align: left; text-decoration: none; color: inherit;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--pc) 13%, var(--card)), var(--card) 62%);
  border: 1px solid color-mix(in srgb, var(--pc) 24%, transparent);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transition: transform .14s ease;
}
.pilar:active { transform: scale(.98); }
.pilar .ic { font-size: 19px; }
.pilar .nom { display: block; margin-top: 7px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.pilar .estado {
  display: inline-block; margin-top: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  color: var(--pc);
  background: color-mix(in srgb, var(--pc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc) 30%, transparent);
}
.pilar .estado.mant { color: var(--mute); background: transparent; border-color: var(--line2); }
.pilar .mini { margin-top: 10px; font-size: 11.5px; color: var(--mute); }
.pilar .votos { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--pc); }
.pilar .barra { height: 4px; border-radius: 4px; background: var(--line2); margin-top: 9px; overflow: hidden; }
.pilar .barra span { display: block; height: 100%; border-radius: 4px; background: var(--pc); }

/* --- Franja RAÍCES: las raíces bajo los pilares (Módulo Raíces §9) --- */
.raices {
  margin-top: 14px;
  border-radius: 20px;
  padding: 16px 16px 15px;
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, var(--raiz1) -30%, var(--raiz2) 46%, color-mix(in srgb, var(--raiz2) 55%, var(--card)) 100%);
  border: 1px solid color-mix(in srgb, var(--raiz1) 42%, transparent);
  opacity: var(--raices-presencia);
  transition: opacity .5s ease;
}
.raices .vetas {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .5;
}
.raices header { display: flex; align-items: center; gap: 9px; position: relative; }
.raices header h2 {
  margin: 0; font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #F2DCC0;
}
.raices header .tag {
  margin-left: auto; font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  color: #F2DCC0;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(242,220,192,.2);
}
.raices .desc { position: relative; margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(242,220,192,.78); }
.raices .temas { position: relative; display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }
.tema {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 13px;
  background: rgba(10,7,4,.34);
  border: 1px solid rgba(242,220,192,.13);
}
.tema .pt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #C98A46; }
.tema.trabajando .pt { background: var(--brasa2); box-shadow: 0 0 8px color-mix(in srgb, var(--brasa2) 65%, transparent); }
.tema .nm { flex: 1; font-size: 13.5px; font-weight: 500; color: #F2DCC0; }
.tema .st { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,220,192,.55); }
.tema.trabajando .st { color: var(--brasa2); }
.raices .pie { position: relative; display: flex; gap: 8px; margin-top: 12px; }
.raices .pie .btn {
  flex: 1; min-height: 44px;
  background: rgba(10,7,4,.32);
  border-color: rgba(242,220,192,.18);
  color: #F2DCC0;
  font-size: 13px;
}
.raices .pie .btn.ep { background: rgba(242,220,192,.14); }
.raices .aviso {
  position: relative; margin-top: 11px;
  font-size: 11px; line-height: 1.45;
  color: rgba(242,220,192,.5);
}

/* ==========================================================================
   12. PROGRESO  ·  SPEC §17.4
   ========================================================================== */

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 13px 14px; box-shadow: var(--shadow-sm);
}
.stat .k { font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.stat .v { font-size: 26px; font-weight: 700; line-height: 1.1; margin-top: 5px; }
.stat .d { font-size: 11.5px; margin-top: 2px; color: var(--mute); }
/* El color lo decide si el dato es BUENO o MALO, nunca la dirección de la flecha:
   bajar de peso es una flecha abajo y una victoria. El rojo se reserva para cero,
   recaída y alarmas reales (§18.2) — su escasez es su poder. */
.stat .d.bien { color: var(--ok-ink); }
.stat .d.mal  { color: var(--danger-ink); }

/* Heatmap 90 días */
.heat { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; margin-top: 4px; }
.heat i {
  aspect-ratio: 1; border-radius: 4px;
  background: var(--line);
  transition: transform .15s ease;
}
.heat i.cumplido { background: var(--ok); }
.heat i.minimo   { background: var(--brasa2); }
.heat i.parcial  { background: color-mix(in srgb, var(--brasa1) 62%, transparent); }
.heat i.cero     { background: var(--danger); }
.heat i.futuro   { background: var(--line); opacity: .5; }
.heat i.hoy      { box-shadow: 0 0 0 2px var(--brasa1); }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 11px; color: var(--mute); }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* Gráfica de línea (peso) */
.linea { width: 100%; height: 132px; display: block; }
.linea .rejilla { stroke: var(--line); stroke-width: 1; }
.linea .serie { fill: none; stroke: url(#gradBrasa); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.linea .area { fill: url(#gradArea); }
.linea .punto { fill: var(--brasa1); }
.linea .proy { fill: none; stroke: var(--mute); stroke-width: 1.8; stroke-dasharray: 4 4; opacity: .65; }

/* Barras (adherencia semanal) */
.barras { display: flex; align-items: flex-end; gap: 8px; height: 108px; margin-top: 6px; }
.barras > div { flex: 1; display: grid; align-content: end; justify-items: center; gap: 6px; height: 100%; }
.barras .b {
  width: 100%; border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, var(--brasa2), var(--brasa1));
  min-height: 4px;
}
.barras .b.tenue { background: var(--line2); }
.barras small { font-size: 10px; color: var(--mute); }

/* Radar de vida */
.radar { width: 100%; max-width: 290px; margin: 0 auto; display: block; }
.radar .malla { fill: none; stroke: var(--line2); stroke-width: 1; }
.radar .eje { stroke: var(--line); stroke-width: 1; }
.radar .poli-mes { fill: color-mix(in srgb, var(--brasa1) 20%, transparent); stroke: var(--brasa1); stroke-width: 2; stroke-linejoin: round; }
.radar .poli-prev { fill: none; stroke: var(--mute); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .7; }
.radar text { font-size: 9px; fill: var(--mute); font-family: Inter, sans-serif; }

/* Barra de integridad / metas */
.progline { margin-top: 12px; }
.progline .top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.progline .top b { font-weight: 600; }
.progline .riel { height: 8px; border-radius: 8px; background: var(--line2); overflow: hidden; }
.progline .riel span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--brasa2), var(--brasa1)); }
.progline .riel span.ok { background: var(--ok); }

/* Recap de victorias */
.victoria { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.victoria:last-child { border-bottom: 0; }
.victoria .em { font-size: 17px; line-height: 1.3; }
.victoria .tx { flex: 1; font-size: 13.5px; line-height: 1.45; }
.victoria .tx small { display: block; color: var(--mute); font-size: 11.5px; margin-top: 2px; }

/* ==========================================================================
   13. ENTRENAR  ·  SPEC §17.2
   ========================================================================== */

.hero-entreno {
  border-radius: 22px; padding: 20px 18px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--brasa1) 22%, var(--card)), var(--card) 70%);
  border: 1px solid color-mix(in srgb, var(--brasa1) 30%, transparent);
  box-shadow: var(--shadow-sm);
}
.hero-entreno .k { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brasa1); }
.hero-entreno h2 { margin: 5px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.hero-entreno .sub { margin-top: 4px; font-size: 13px; color: var(--mute); }

.rondas { display: flex; gap: 8px; margin-top: 16px; }
.ronda {
  flex: 1; aspect-ratio: 1; max-height: 54px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 600;
  border: 1px solid var(--line2); background: var(--card2); color: var(--mute);
  transition: all .25s cubic-bezier(.22,1,.36,1);
}
.ronda.hecha {
  background: linear-gradient(140deg, var(--brasa2), var(--brasa1));
  border-color: transparent; color: #150802;
}
.ronda.activa { border-color: var(--brasa1); color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brasa1) 16%, transparent); }

.ejercicios { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.ej {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 13px;
  background: var(--card); border: 1px solid var(--line);
}
.ej .n { flex: 1; font-size: 14px; }
.ej .r { font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 600; color: var(--brasa1); }

.timer-card { text-align: center; }
.timer-num { font-size: 54px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.timer-lbl { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }

.hist { display: flex; flex-direction: column; gap: 7px; }
.hist .fila {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 13px;
  background: var(--card); border: 1px solid var(--line);
}
.hist .fila .d { font-size: 11.5px; color: var(--mute); width: 46px; flex: none; }
.hist .fila .t { flex: 1; font-size: 13.5px; font-weight: 500; }
.hist .fila .v { font-size: 12.5px; color: var(--ok-ink); font-weight: 600; }

/* ==========================================================================
   14. CONFIG  ·  SPEC §17.5
   ========================================================================== */

.filas { display: flex; flex-direction: column; }
.fila-cfg {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 0; min-height: 56px;
  border-bottom: 1px solid var(--line);
}
.fila-cfg:last-child { border-bottom: 0; }
.fila-cfg .em { font-size: 16px; width: 22px; text-align: center; flex: none; }
.fila-cfg .tx { flex: 1; }
.fila-cfg .tx b { display: block; font-size: 14px; font-weight: 500; }
.fila-cfg .tx small { display: block; font-size: 11.5px; color: var(--mute); margin-top: 1px; }
.fila-cfg .val { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }

.switch {
  width: 46px; height: 27px; border-radius: 999px; flex: none;
  background: var(--line2); position: relative;
  transition: background-color .28s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { transform: translateX(19px); }

.seg { display: flex; gap: 3px; padding: 3px; border-radius: 13px; background: var(--card2); border: 1px solid var(--line); }
.seg button {
  flex: 1; min-height: 38px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--mute);
  transition: all .22s ease;
}
.seg button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }

.nota-honestidad {
  margin-top: 12px; padding: 13px 14px;
  border-radius: 14px;
  background: var(--card2); border: 1px solid var(--line);
  font-size: 12px; line-height: 1.55; color: var(--mute);
}
.nota-honestidad b { color: var(--text); font-weight: 600; }

/* ==========================================================================
   15. UTILIDADES
   ========================================================================== */

.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}.mt18{margin-top:18px}
.mute { color: var(--mute); }
.mini { font-size: 11.5px; }
.centro { text-align: center; }

.aviso-maqueta {
  margin: 16px 0 0; padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--line2);
  font-size: 11px; line-height: 1.5; color: var(--mute);
}

/* ==========================================================================
   16. MOVIMIENTO — SPEC §18.3: motion con propósito
   ========================================================================== */

.entra { opacity: 0; transform: translateY(10px); animation: entra calc(.5s * var(--speed)) cubic-bezier(.16,1,.3,1) both; }
.entra:nth-child(1){animation-delay:.02s}.entra:nth-child(2){animation-delay:.06s}
.entra:nth-child(3){animation-delay:.10s}.entra:nth-child(4){animation-delay:.14s}
.entra:nth-child(5){animation-delay:.18s}.entra:nth-child(6){animation-delay:.22s}
@keyframes entra { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .entra { opacity: 1; transform: none; }
}