/* ============================================================
   Chief of Staff — UI v4: identidad tipográfica, profundidad, movimiento.
   Sin dependencias. Respeta prefers-reduced-motion.

   TIPOGRAFÍA (self-host, sin CDN: privacidad y latencia).
   Ambas familias son variables y SIL OFL (libres, uso comercial):
     · Space Grotesk — display: geometría con carácter, para titulares.
     · Inter — cuerpo: la mejor legibilidad en interfaz a tamaño pequeño.
   ============================================================ */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2-variations"),
       url("/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "InterVar";
  src: url("/fonts/inter-latin.woff2") format("woff2-variations"),
       url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
:root {
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "InterVar", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Base NEUTRAL casi-negra (grafito), no azul marino. El color lo pone
     el acento del panel, no el fondo entero — más sobrio y profesional. */
  --bg: #000000;
  --bg-2: #0a0a0c;
  --surface: rgba(18, 18, 22, 0.66);
  --surface-2: rgba(26, 26, 31, 0.88);
  --glass-brd: rgba(150, 158, 178, 0.16);
  --border: rgba(150, 158, 175, 0.12);
  --border-hi: rgba(168, 176, 196, 0.34);
  --text: #f1f3f7;
  --muted: #969ba7;
  --accent: #7c83ff;
  --accent-2: #22d3ee;
  --accent-3: #b45cff;
  /* Acento del panel activo (lo cambia el router por vista). Indigo por defecto. */
  --panel-rgb: 124, 131, 255;
  --panel-2-rgb: 34, 211, 238;
  --grad: linear-gradient(100deg, #818cf8 0%, #22d3ee 55%, #a78bfa 100%);
  --grad-warm: linear-gradient(100deg, #fbbf24, #fb7185);
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;
  --radius: 20px;
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 8px 24px -12px rgba(34, 211, 238, 0.15);
  font-size: var(--fs-base);

  /* Superficies hundidas y texto sobre acento. Antes iban cableadas como
     azules casi negros en 15 sitios, lo que hacía imposible un tema claro. */
  --chip-task: #a5b4fc; --chip-habit: #6ee7b7; --diag-text: #ffd29a; --title-bright: 1.25;
  --card-solid: rgba(16, 16, 21, 0.96); --bar-solid: rgba(8, 8, 12, 0.98);
  --glass-edge: rgba(10, 12, 22, .6);   /* el tramo oscuro de los degradados de cristal */
  --on-accent: #05070f;   /* texto sobre un botón de degradado */
  --sunk-50: rgba(5, 8, 18, 0.5);
  --sunk-60: rgba(5, 8, 18, 0.6);
  --sunk-75: rgba(5, 8, 18, 0.75);
  --sunk-86: rgba(5, 8, 18, 0.86);
  --scrim: rgba(3, 5, 12, .72);   /* velo detrás de las ventanas */
  --grain: .04;                   /* grano de película */
  --aurora-op: .34;
  --bg-deep: #000000;             /* base del fondo: negro real */
  --bg-mid: #08080a;

  /* ========================================================
     ESCALA TIPOGRÁFICA (v6) — antes había 10 tamaños sueltos
     (15, 14.5, 13.5, 12.5…) que no formaban ninguna escala: eso
     es deriva, y se nota como "amateur" aunque nadie sepa por qué.
     Ahora hay 7 pasos, y NADA fuera de ellos.
     ======================================================== */
  --fs-xs:   11.5px;  /* etiquetas, metadatos */
  --fs-sm:   13px;    /* texto de apoyo */
  --fs-base: 15px;    /* cuerpo */
  --fs-md:   17px;    /* destacado */
  --fs-lg:   21px;    /* títulos de sección */
  --fs-xl:   28px;    /* cifras y titulares */
  --fs-2xl:  40px;    /* el número protagonista */

  /* Interlineado por rol: los titulares apretados, el cuerpo cómodo. */
  --lh-tight: 1.18;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  /* ESPACIADO — escala de 4px. El ritmo vertical deja de ser al ojo. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* MOVIMIENTO — una sola familia de curvas para toda la app.
     `--ease-out` para lo que entra, `--ease-spring` para lo que responde
     al dedo. Mezclar curvas al azar es lo que hace que una UI se sienta
     descoordinada aunque cada animación por separado esté bien. */
  /* `--ease-exit` sale disparado y frena largo (quint). Es la curva que da
     la sensación de "caro": lo que se mueve llega rápido y se posa despacio,
     en vez de desacelerar de forma uniforme. Para lo que se despliega o
     entra; `--ease-spring` sigue siendo para lo que responde al dedo. */
  --ease-exit: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.22, .8, .28, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .5, 1);
  --dur-1: 120ms;  /* respuesta al toque */
  --dur-2: 220ms;  /* transición normal */
  --dur-3: 420ms;  /* entrada de contenido */

  /* ELEVACIÓN — antes TODO era la misma tarjeta de vidrio, así que
     nada parecía más importante que nada. Tres niveles reales. */
  --elev-1: 0 1px 2px rgba(0,0,0,.4);
  --elev-2: 0 8px 24px -12px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
  --elev-3: 0 30px 70px -24px rgba(0,0,0,.8), 0 10px 30px -16px rgba(var(--panel-rgb), .28);
  --tap: 44px; /* objetivo táctil mínimo (iOS/Android) */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Jerarquía tipográfica: los titulares llevan la voz de la marca
   (display, tracking cerrado); el cuerpo prioriza legibilidad. */
h1, h2, h3, .logo-mark, .wiz-card h2, .qt, .big, .lvl-title, .strat-head, .modal-title, #page-title {
  font-family: var(--font-display);
  letter-spacing: -0.021em;
  font-feature-settings: "ss01" 1;
}
h1, .wiz-card h2 { letter-spacing: -0.032em; }
/* Cifras alineadas: en tablas y stats las columnas no bailan. */
.big, .conf, .task-meta, .lvl-badge, .strat-step .sn, .bar + .conf, .stat, .metric {
  font-variant-numeric: tabular-nums;
}
/* ============================================================
   FONDO v5 — grafito profundo + aurora que respira + grano.
   Nada de "azul marino con estrellitas". El color emana del ACENTO
   del panel activo (--panel-rgb), sutil, contra una base casi negra.
   Todo GPU-barato (transform/opacity); el canvas viejo O(n²) se retiró.
   ============================================================ */
/* CONSTELACIÓN — se dibuja una vez (ver drawConstellation en app.js) y el
   movimiento lo hace el CSS: una deriva lentísima con `transform`, que va
   por GPU y no cuesta nada. El lienzo es mayor que la ventana para que al
   moverse no asome un borde sin estrellas. */
/* Tres capas a distinta velocidad y dirección. La clave del movimiento no
   es que el campo se desplace (eso, en bloque, no se percibe) sino que
   unas estrellas pasen POR DELANTE de otras — paralaje. La deriva anterior
   era de 3% en 90s: matemáticamente había movimiento, visualmente ninguno.

   Dos animaciones por capa a la vez: `drift` (posición) y `twinkle`
   (opacidad), con duraciones que no son múltiplos entre sí para que nunca
   se sincronicen y el cielo no "lata" a compás. Solo transform y opacity:
   ambas van por GPU y no repintan nada. */
.star-layer {
  position: fixed; top: -12%; left: -12%; z-index: -2;
  pointer-events: none; will-change: transform, opacity;
}
.star-layer.far {
  opacity: .55;
  animation: driftFar 150s linear infinite alternate, twinkleFar 11s ease-in-out infinite;
}
.star-layer.mid {
  opacity: .75;
  animation: driftMid 84s linear infinite alternate, twinkleMid 7.5s ease-in-out infinite;
}
.star-layer.near {
  opacity: .95;
  animation: driftNear 46s linear infinite alternate, twinkleNear 5.3s ease-in-out infinite;
}
/* La cercana se mueve ~5x más que la lejana: eso es lo que crea la
   sensación de profundidad y de que el cielo está vivo. */
@keyframes driftFar  { from { transform: translate3d(0,0,0) } to { transform: translate3d(1.5%, 1%, 0) } }
@keyframes driftMid  { from { transform: translate3d(0,0,0) } to { transform: translate3d(-4%, 2.5%, 0) } }
@keyframes driftNear { from { transform: translate3d(0,0,0) scale(1) } to { transform: translate3d(7%, -4%, 0) scale(1.04) } }
/* Titileo: rangos distintos por capa, y ninguno baja tanto como para que
   parezca que la capa desaparece. */
@keyframes twinkleFar  { 0%,100% { opacity: .40 } 50% { opacity: .62 } }
@keyframes twinkleMid  { 0%,100% { opacity: .62 } 50% { opacity: .88 } }
@keyframes twinkleNear { 0%,100% { opacity: .80 } 50% { opacity: 1 } }
.star-layer.static { animation: none !important; }
/* En el tema claro un cielo estrellado no tiene sentido: se oculta. */
:root[data-theme="light"] .star-layer { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .star-layer { display: none; }
}

/* Capa 1 — base: viñeta neutra + un halo tenue del acento del panel. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(var(--panel-rgb), 0.07), transparent 55%),
    radial-gradient(100% 80% at 100% 120%, rgba(var(--panel-2-rgb), 0.05), transparent 55%),
    radial-gradient(80% 60% at 50% 55%, var(--bg-mid), var(--bg-deep) 70%),
    var(--bg-deep);
  transition: background .7s ease;
}
/* Capa 2 — grano de película (SVG fractal, estático, prácticamente gratis).
   Es el detalle que hace que un fondo se sienta "diseñado", no plano. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  /* El grano estático se lee como una textura pegada al cristal. Moverlo
     unos píxeles lo convierte en grano de película: se percibe como aire,
     no como suciedad. Solo `transform` — no cuesta nada. */
  animation: grainDrift 8s steps(6) infinite;
  will-change: transform;
}
@keyframes grainDrift {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -3%, 0); }
  60%  { transform: translate3d(-2%, -2%, 0); }
  80%  { transform: translate3d(3%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
/* El grano cubre algo más que la pantalla para que al desplazarse no
   asome un borde sin textura. */
body::after { inset: -4%; }
/* Capa 3 — AURORA: 3 manchas suaves que van a la deriva, teñidas por el
   panel. blur pesado pero en UNA capa fija (no por-frame): barato. */
#aurora {
  position: fixed; inset: -25%; z-index: -2; pointer-events: none;
  filter: blur(70px) saturate(1.25); opacity: var(--aurora-op); overflow: hidden;
}
#aurora span {
  position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
  mix-blend-mode: screen; will-change: transform;
}
#aurora span:nth-child(1) { top: -8%; left: -6%; background: radial-gradient(circle, rgba(var(--panel-rgb), .55), transparent 62%); animation: auroraA 26s ease-in-out infinite alternate; }
#aurora span:nth-child(2) { bottom: -12%; right: -8%; background: radial-gradient(circle, rgba(var(--panel-2-rgb), .38), transparent 62%); animation: auroraB 32s ease-in-out infinite alternate; }
#aurora span:nth-child(3) { top: 30%; left: 40%; width: 34vmax; height: 34vmax; background: radial-gradient(circle, rgba(180, 92, 255, .28), transparent 62%); animation: auroraC 38s ease-in-out infinite alternate; }
@keyframes auroraA { to { transform: translate3d(12%, 14%, 0) scale(1.15); } }
@keyframes auroraB { to { transform: translate3d(-14%, -10%, 0) scale(1.1); } }
@keyframes auroraC { to { transform: translate3d(-10%, 12%, 0) scale(.9); } }
@media (prefers-reduced-motion: reduce) {
  #aurora span { animation: none !important; }
}
/* Cada panel, su propio acento — mismo concepto, color que varía. El
   router pone data-view en <html> y el fondo + los toques se re-tiñen. */
/* ============================================================
   TEMA CLARO — no es "invertir el oscuro". Un tema claro copiado a la
   inversa se ve lavado: el vidrio deja de leerse, las sombras negras
   ensucian y los acentos pensados para brillar sobre negro vibran sobre
   blanco. Aquí se re-piensa cada capa: superficies casi blancas con un
   punto de tinte hacia el acento, sombras suaves en vez de halos, y
   acentos un grado más oscuros para que el contraste aguante.

   Se aplica por preferencia del sistema Y por elección explícita: quien
   quiera claro con el sistema en oscuro (o al revés) manda sobre el SO.
   ============================================================ */
/* El desplegable nativo de un <select> lo pinta el SISTEMA, no el CSS
   de la pagina. Sin declarar el esquema, Windows lo pinta blanco con
   texto claro en modo oscuro: opciones invisibles. Con color-scheme el
   SO pinta el menu del color del tema. */
:root { color-scheme: dark; }
/* Las barras de scroll siguen al tema, no al SO: una barra clara sobre
   fondo oscuro (o al reves) es una franja que no pega con nada. */
:root { scrollbar-color: rgba(124, 131, 255, .35) transparent; }
:root[data-theme="light"] { scrollbar-color: rgba(80, 90, 200, .45) transparent; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { scrollbar-color: rgba(80, 90, 200, .45) transparent; }
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: light; }
}
/* Y los propios controles, con los colores del tema — el estilo por
   defecto del SO desentona en las dos direcciones. */
/* SOLIDO a proposito: el desplegable lo compone el SO sobre blanco, y
   un color con transparencia (o una variable inexistente, que fue el
   bug: --card no estaba definida) deja el menu blanco con texto claro.
   --bg-2 es solido en los dos temas. */
select option {
  background-color: var(--bg-2); color: var(--text);
}

:root[data-theme="light"] {
  --bg: #f4f5f8;
  --bg-2: #ffffff;
  --bg-deep: #eef0f5;
  --bg-mid: #f7f8fb;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-2: rgba(255, 255, 255, 0.95);
  --glass-brd: rgba(23, 28, 45, 0.10);
  --border: rgba(23, 28, 45, 0.10);
  --border-hi: rgba(23, 28, 45, 0.22);
  --text: #14161d;
  --muted: #5c6270;
  /* Acentos un punto más oscuros: los del tema oscuro están calibrados
     para brillar sobre negro y sobre blanco quedan por debajo de AA. */
  --accent: #4f46e5;
  --accent-2: #0e6d82;
  --accent-3: #9333ea;
  --grad: linear-gradient(100deg, #4338ca 0%, #0e6d82 55%, #6d28d9 100%);
  --grad-warm: linear-gradient(100deg, #d97706, #e11d48);
  --ok: #067a55;
  --warn: #b45309;
  --danger: #dc2626;
  --on-accent: #ffffff;            /* sobre el degradado ahora va texto blanco */
  /* Pastel del tema oscuro re-calibrado para fondo blanco (AA). */
  --chip-task: #4338ca; --chip-habit: #047857; --diag-text: #92400e; --title-bright: .62;
  --card-solid: #ffffff; --bar-solid: rgba(255, 255, 255, .98);
  --glass-edge: rgba(255, 255, 255, .92);
  --sunk-50: rgba(23, 28, 45, 0.04);
  --sunk-60: rgba(23, 28, 45, 0.05);
  --sunk-75: rgba(255, 255, 255, 0.9);
  --sunk-86: rgba(255, 255, 255, 0.92);
  --scrim: rgba(28, 32, 46, .38);
  --grain: 0;                      /* el grano sobre blanco se ve sucio */
  --aurora-op: .3;
  --shadow: 0 1px 2px rgba(20, 24, 40, .05), 0 12px 32px -14px rgba(20, 24, 40, .18);
  --elev-1: 0 1px 2px rgba(20,24,40,.06);
  --elev-2: 0 6px 20px -10px rgba(20,24,40,.18), 0 2px 5px rgba(20,24,40,.05);
  --elev-3: 0 24px 50px -22px rgba(20,24,40,.28), 0 8px 22px -14px rgba(var(--panel-rgb), .22);
}
/* Sin elección guardada, se sigue al sistema. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f5f8; --bg-2: #ffffff; --bg-deep: #eef0f5; --bg-mid: #f7f8fb;
    --surface: rgba(255,255,255,.82); --surface-2: rgba(255,255,255,.95);
    --glass-brd: rgba(23,28,45,.10); --border: rgba(23,28,45,.10); --border-hi: rgba(23,28,45,.22);
    --text: #14161d; --muted: #5c6270;
    --accent: #4f46e5; --accent-2: #0e6d82; --accent-3: #9333ea;
    --grad: linear-gradient(100deg, #4338ca 0%, #0e6d82 55%, #6d28d9 100%);
    --grad-warm: linear-gradient(100deg, #d97706, #e11d48);
    --ok: #067a55; --warn: #b45309; --danger: #dc2626;
    --on-accent: #ffffff;
    /* Pastel del tema oscuro re-calibrado para fondo blanco (AA). */
    --chip-task: #4338ca; --chip-habit: #047857; --diag-text: #92400e; --title-bright: .62;
    --card-solid: #ffffff; --bar-solid: rgba(255, 255, 255, .98);
    --glass-edge: rgba(255, 255, 255, .92);
    --sunk-50: rgba(23,28,45,.04); --sunk-60: rgba(23,28,45,.05);
    --sunk-75: rgba(255,255,255,.9); --sunk-86: rgba(255,255,255,.92);
    --scrim: rgba(28,32,46,.38); --grain: 0; --aurora-op: .3;
    --shadow: 0 1px 2px rgba(20,24,40,.05), 0 12px 32px -14px rgba(20,24,40,.18);
    --elev-1: 0 1px 2px rgba(20,24,40,.06);
    --elev-2: 0 6px 20px -10px rgba(20,24,40,.18), 0 2px 5px rgba(20,24,40,.05);
    --elev-3: 0 24px 50px -22px rgba(20,24,40,.28), 0 8px 22px -14px rgba(var(--panel-rgb), .22);
  }
}

:root[data-view="hoy"]     { --panel-rgb: 124, 131, 255; --panel-2-rgb: 34, 211, 238; }
:root[data-view="plan"]    { --panel-rgb: 34, 211, 238;  --panel-2-rgb: 96, 165, 250; }
:root[data-view="habits"]  { --panel-rgb: 52, 211, 153;  --panel-2-rgb: 34, 211, 238; }
:root[data-view="economy"] { --panel-rgb: 251, 191, 36;  --panel-2-rgb: 251, 113, 133; }
:root[data-view="me"]      { --panel-rgb: 180, 92, 255;  --panel-2-rgb: 124, 131, 255; }
/* El título de la página toma el acento del panel (detalle sutil de marca). */
#page-title { color: rgb(var(--panel-rgb)); transition: color .5s ease; filter: brightness(var(--title-bright)); }
.hidden { display: none !important; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }
i { font-style: normal; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.85); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }
@keyframes sheen { to { background-position: 220% 0; } }
@keyframes ringGlow { 0%,100% { filter: drop-shadow(0 0 6px rgba(124,131,255,.5)); } 50% { filter: drop-shadow(0 0 18px rgba(34,211,238,.75)); } }
@keyframes orbPulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes burst { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
.fade-up { animation: fadeUp var(--dur-3) var(--ease-exit) both; }

/* ============================================================
   ENTRADA ESCALONADA — el contenido no aparece de golpe: cae en
   cascada, de arriba abajo, como si alguien lo estuviera poniendo
   sobre la mesa. El desfase es corto (55ms) a propósito: lo
   suficiente para leerse como secuencia, no tanto como para que
   haya que ESPERAR a que la pantalla termine de montarse.
   ============================================================ */
#view > * { animation: fadeUp var(--dur-3) var(--ease-exit) both; }
#view > *:nth-child(1) { animation-delay: 0ms; }
#view > *:nth-child(2) { animation-delay: 55ms; }
#view > *:nth-child(3) { animation-delay: 110ms; }
#view > *:nth-child(4) { animation-delay: 165ms; }
#view > *:nth-child(5) { animation-delay: 220ms; }
#view > *:nth-child(6) { animation-delay: 275ms; }
#view > *:nth-child(n+7) { animation-delay: 310ms; } /* tope: nada espera más de ~0.3s */

/* Las fichas de hábito entran una tras otra dentro de su fila. */
.chips-row .hchip { animation: chipIn 380ms var(--ease-spring) both; }
.chips-row .hchip:nth-child(2) { animation-delay: 45ms; }
.chips-row .hchip:nth-child(3) { animation-delay: 90ms; }
.chips-row .hchip:nth-child(4) { animation-delay: 135ms; }
.chips-row .hchip:nth-child(n+5) { animation-delay: 170ms; }
@keyframes chipIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* Respuesta al dedo: todo lo pulsable se hunde un poco. Es el detalle
   que separa una web de algo que se siente como una app. */
.card, .quest, .rec, .item { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
a, button { -webkit-tap-highlight-color: transparent; }

/* Foco visible SIEMPRE (teclado): sin esto la app es inusable sin ratón. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--panel-rgb)); outline-offset: 3px; border-radius: 8px;
}

/* ---------- Glass helper con borde-gradiente ---------- */
.glass {
  position: relative;
  background: var(--surface); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--glass-brd); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(130,160,255,.5), rgba(34,211,238,.12) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .8;
}

/* ---------- Auth ---------- */
/* Fase 8: en ventanas bajas (teléfono en horizontal, media pantalla) el
   centrado de grid RECORTA la tarjeta por arriba y el botón de entrar
   queda inalcanzable. margin:auto en la tarjeta centra igual, pero deja
   hacer scroll cuando no cabe — el clásico fix del modal alto. */
.auth { position: fixed; inset: 0; display: flex; overflow-y: auto; z-index: 50; padding: 18px; }
/* El fondo es un OVERLAY, no un item del grid: sin esto ocupa una fila
   propia y la tarjeta (margin:auto) queda descentrada hacia abajo. */
.auth-bg { position: absolute; inset: 0; pointer-events: none; }
.auth-card {
  position: relative; margin: auto; width: min(430px, 100%); padding: 40px 32px; z-index: 1;
  background: var(--surface); backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-brd); border-radius: 26px; box-shadow: var(--shadow);
}
.auth-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(130,160,255,.6), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.logo-block { text-align: center; margin-bottom: 26px; }
.logo-mark {
  width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center;
  font-size: var(--fs-xl); color: var(--on-accent); border-radius: 20px; background: var(--grad);
  box-shadow: 0 0 44px rgba(124, 131, 255, 0.6); animation: floaty 5s ease-in-out infinite;
}
.logo-mark.sm { width: 34px; height: 34px; font-size: var(--fs-md); border-radius: 11px; margin: 0; box-shadow: 0 0 20px rgba(124,131,255,.5); animation: none; }
/* El logo de plata (dueño, 2026-10-03: «ese es el que debe tener todo»):
   la imagen real en vez del ◆ sobre el degradado; un brillo plateado suave. */
.logo-mark.logo-img { background: none; overflow: hidden; box-shadow: 0 0 34px rgba(199, 208, 224, .28); }
.logo-mark.sm.logo-img { box-shadow: 0 0 14px rgba(199, 208, 224, .22); }
.logo-mark.logo-img img { width: 100%; height: 100%; display: block; }
.logo-block h1 { font-size: var(--fs-xl); letter-spacing: -.6px; font-weight: 700; }
.tagline { color: var(--muted); margin-top: 7px; font-size: var(--fs-sm); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--sunk-60); padding: 5px; border-radius: 13px; margin-bottom: 20px; border: 1px solid var(--border); }
.auth-tabs button { padding: 11px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 650; font: inherit; transition: .2s; }
.auth-tabs button.active { background: var(--surface-2); color: var(--text); box-shadow: 0 2px 12px rgba(124,131,255,.2); }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 7px; letter-spacing: .7px; text-transform: uppercase; font-weight: 750; }
input, select, textarea {
  width: 100%; padding: 13px 15px; border-radius: 13px; color: var(--text);
  background: var(--sunk-75); border: 1px solid var(--border); outline: none; font: inherit; transition: .18s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 131, 255, 0.2), 0 0 24px rgba(124,131,255,.14); }
.error { color: var(--danger); font-size: var(--fs-sm); margin-bottom: 10px; }

/* ---- Contraseña: verla y saber si es fuerte ANTES de que falle ---- */
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 74px; }
.pass-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 34px; padding: 0 12px; border-radius: 9px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  font: inherit; font-size: var(--fs-xs); font-weight: 650; transition: color var(--dur-2), border-color var(--dur-2);
}
.pass-toggle:hover { color: var(--text); border-color: var(--border-hi); }
.pass-meter { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.pm-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(150,158,178,.16); overflow: hidden; }
.pm-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--danger); transition: width var(--dur-2) var(--ease-out), background var(--dur-2); }
.pm-bar i.weak { background: var(--danger); }
.pm-bar i.ok-low { background: var(--warn); }
.pm-bar i.ok { background: #a3e635; }
.pm-bar i.strong { background: var(--ok); }
#pm-label { font-size: var(--fs-xs); color: var(--muted); min-width: 132px; text-align: right; }
.auth-forgot { text-align: right; margin: -6px 0 12px; }
.auth-forgot a { color: var(--muted); font-size: var(--fs-sm); text-decoration: none; border-bottom: 1px dashed var(--border-hi); }
.auth-forgot a:hover { color: var(--accent-2); }
.auth-note { margin-top: 18px; font-size: var(--fs-sm); color: var(--muted); text-align: center; line-height: 1.5; }
.consent { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 14px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; cursor: pointer; }
.consent input { width: 17px; height: 17px; flex: none; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.consent a { color: var(--accent-2); text-decoration: none; }
.consent a:hover { text-decoration: underline; }

/* ---------- Botones ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 13px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; font-weight: 650;
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s;
}
.btn:hover { border-color: var(--border-hi); transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgba(124,131,255,.5); }
.btn:active { transform: scale(.96) translateY(0); }
.btn.primary { background: var(--grad); background-size: 180% 100%; color: var(--on-accent); border: 0; box-shadow: 0 8px 30px -8px rgba(124, 131, 255, 0.65); }
.btn.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); background-size: 220% 100%; background-position: -60% 0; }
.btn.primary:hover::after { animation: sheen 1s ease; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: rgba(251, 113, 133, 0.4); color: var(--danger); }
.btn.ok { border-color: rgba(52, 211, 153, 0.45); color: var(--ok); }
.btn.full { width: 100%; }
.btn.lg { min-height: 52px; font-size: var(--fs-md); border-radius: 15px; }
.btn.sm { min-height: 34px; padding: 6px 13px; font-size: var(--fs-sm); border-radius: 10px; }
/* Con el dedo, 34px se falla. En ratón se puede ser compacto; en táctil
   NO. Se decide por el tipo de puntero, no por el ancho de pantalla:
   una tablet ancha también se toca con el dedo.
   (Extender el área con un ::before no sirve aquí: .btn usa overflow
   hidden para el brillo y lo recortaría.) */
@media (pointer: coarse) {
  .btn.sm, .icon-btn { min-height: var(--tap); }
  .btn.sm { padding: 8px 15px; }
}
.btn:disabled { opacity: .55; cursor: wait; transform: none; }
.icon-btn { position: relative; width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: var(--fs-base); transition: .18s; }
.icon-btn:hover { border-color: var(--border-hi); transform: translateY(-1px); }

/* ---------- Wizard ---------- */
/* Mismo fix que .auth: el wizard puede crecer (hábitos sugeridos) y en
   pantallas bajas debe poder desplazarse, no recortarse. */
.wizard { position: fixed; inset: 0; z-index: 55; display: flex; overflow-y: auto; padding: 22px; }
.wiz-card { margin: auto; width: min(560px, 100%); text-align: center; animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) both; }
.wiz-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 30px; }
.wiz-dots span { width: 36px; height: 5px; border-radius: 99px; background: rgba(99,130,180,.2); transition: background .4s; }
.wiz-dots span.on { background: var(--grad); box-shadow: 0 0 12px rgba(124,131,255,.6); }
.wiz-emoji { font-size: 50px; margin-bottom: 16px; animation: pop .6s ease both, floaty 4s ease-in-out 0.6s infinite; }
.wiz-card h2 { font-size: clamp(23px, 5.5vw, 32px); font-weight: 700; letter-spacing: -.7px; margin-bottom: 12px; line-height: 1.25; }
.wiz-why { color: var(--muted); font-size: var(--fs-base); line-height: 1.6; margin-bottom: 28px; }
.wiz-input { max-width: 430px; margin: 0 auto 18px; }
.wiz-input input, .wiz-input select { text-align: center; font-size: var(--fs-md); padding: 16px; border-radius: 16px; }
.wiz-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.wiz-skip { margin-top: 20px; }
.wiz-skip a { color: var(--muted); font-size: var(--fs-sm); text-decoration: none; border-bottom: 1px dashed var(--border-hi); }
.wiz-loading { width: 90px; height: 90px; margin: 24px auto; position: relative; }
.wiz-loading::before, .wiz-loading::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.wiz-loading::before { border-top-color: var(--accent-2); border-right-color: var(--accent); animation: spin 1s linear infinite; }
.wiz-loading::after { inset: 12px; border-bottom-color: var(--accent-3); animation: spinRev 1.4s linear infinite; }
.wiz-plan-preview { text-align: left; margin: 18px auto; max-width: 460px; padding: 20px; position: relative; }
.wiz-plan-preview .t { font-weight: 750; font-size: var(--fs-base); margin-bottom: 8px; }
.wiz-habit { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; padding: 14px 16px; margin: 9px auto; max-width: 460px; }
.wiz-habit .n { font-weight: 650; font-size: var(--fs-base); }
.wiz-habit .w { color: var(--muted); font-size: var(--fs-sm); margin-top: 3px; line-height: 1.45; }
.wiz-habit.added { border-color: rgba(52,211,153,.5); }
/* ---- Onboarding v6: progreso, una pregunta a la vez, espera con pasos ---- */
.wiz-av { margin: 0 auto var(--sp-4); }
.wiz-sub-q { font-size: clamp(var(--fs-md), 4.5vw, var(--fs-lg)) !important; margin-top: var(--sp-2); }
.wiz-note { font-size: var(--fs-sm); opacity: .8; margin-top: var(--sp-3); }

/* Una pregunta a la vez: cuenta + barra, para que se vea el final cerca. */
.wiz-qcount { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 750; margin-bottom: var(--sp-2); }
.wiz-qbar { height: 4px; border-radius: 99px; background: rgba(99,130,180,.18); overflow: hidden; max-width: 300px; margin: 0 auto var(--sp-5); }
.wiz-qbar div { height: 100%; background: var(--grad); border-radius: 99px; transition: width var(--dur-3) var(--ease-out); }
.wiz-qtitle { font-size: clamp(var(--fs-lg), 5vw, var(--fs-xl)) !important; }

/* La espera muestra EN QUÉ va: un spinner mudo se siente colgado. */
.wiz-steps { list-style: none; max-width: 340px; margin: var(--sp-4) auto 0; text-align: left; display: flex; flex-direction: column; gap: var(--sp-3); }
.wiz-steps li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); opacity: .45; transition: opacity var(--dur-2), color var(--dur-2); }
.wiz-steps li i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; flex: none; position: relative; }
.wiz-steps li.on { opacity: 1; color: var(--text); }
.wiz-steps li.on i { border-color: rgb(var(--panel-rgb)); animation: riskPulse 1.4s var(--ease-out) infinite; }
.wiz-steps li.done { opacity: .85; color: var(--ok); }
.wiz-steps li.done i { border-color: var(--ok); background: var(--ok); }
.wiz-steps li.done i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: var(--on-accent); font-weight: 900; }

.wiz-interview { max-width: 460px; margin: 18px auto 6px; text-align: left; }
.wiz-q { padding: 14px 16px; margin: 10px 0; }
.wiz-q label { display: block; font-weight: 650; font-size: var(--fs-base); margin-bottom: 4px; }
.wiz-q .w { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; margin-bottom: 9px; }
.wiz-q input { width: 100%; padding: 12px 14px; border-radius: 12px; font-size: var(--fs-base); }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.sidebar {
  display: flex; flex-direction: column; gap: 20px; padding: 24px 14px;
  background: var(--sunk-50); border-right: 1px solid var(--border); backdrop-filter: blur(14px);
  position: sticky; top: 0; height: 100vh;
}
.side-logo { display: flex; align-items: center; gap: 11px; font-size: var(--fs-md); font-weight: 700; padding: 0 8px; letter-spacing: -.2px; }
.sidebar .nav { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 13px;
  color: var(--muted); text-decoration: none; font-weight: 650; font-size: var(--fs-base); border: 1px solid transparent;
  transition: .18s; position: relative;
}
.nav a i { width: 22px; text-align: center; opacity: .9; font-size: var(--fs-base); }
.nav a:hover { color: var(--text); background: rgba(124, 131, 255, 0.09); }
.nav a.active { color: var(--text); background: rgba(124, 131, 255, 0.16); border-color: var(--border-hi); box-shadow: inset 3px 0 0 var(--accent-2), 0 6px 20px -12px rgba(124,131,255,.6); }
.main { padding: 26px 34px 96px; max-width: 1080px; width: 100%; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.topbar h2 { font-size: var(--fs-lg); letter-spacing: -.45px; font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.user-chip { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: var(--grad-warm); color: var(--on-accent); font-size: var(--fs-xs); font-weight: 800; box-shadow: 0 0 12px rgba(251,113,133,.5); }
.bottomnav { display: none; }

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 16px 14px 100px; }
  .bottomnav {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 9px 8px calc(10px + env(safe-area-inset-bottom));
    background: var(--sunk-86); border-top: 1px solid var(--border-hi); backdrop-filter: blur(22px) saturate(1.4);
  }
  .bottomnav a { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: var(--fs-xs); border-radius: 13px; text-align: center; }
  .bottomnav a i { font-size: var(--fs-md); width: auto; }
  .bottomnav a.active { box-shadow: none; background: rgba(124,131,255,.16); }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr !important; }
  .quest-actions { flex-direction: column; }
  .quest-actions .btn { width: 100%; }
  .main { perspective: none; }
  .tilt { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .star-layer { animation: none !important; }
}
/* Con la pestaña en segundo plano no hay nadie mirando: las animaciones
   decorativas se pausan en vez de seguir gastando batería. Son ~15 bucles
   infinitos (aurora, avatar, halos); dejarlos corriendo en background es
   justo el tipo de detalle que hace que una app "caliente" el teléfono. */
html.is-away .star-layer,
html.is-away body::after,
html.is-away #aurora span,
html.is-away .logo-mark,
html.is-away .av-3d *,
html.is-away .hchip.at-risk::after,
html.is-away .orb * { animation-play-state: paused !important; }

/* ---------- Cards / grids con profundidad 3D ---------- */
.grid { display: grid; gap: 15px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.main { perspective: 1400px; }
.card {
  position: relative; padding: 20px; border-radius: var(--radius);
  background: var(--surface); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-brd); box-shadow: var(--shadow);
  transform-style: preserve-3d; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  will-change: transform;
}
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(130,160,255,.42), rgba(34,211,238,.08) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .85; }
.card.tilt:hover { box-shadow: 0 34px 70px -24px rgba(0,0,0,.75), 0 12px 40px -18px rgba(34,211,238,.28); }
/* Los encabezados de tarjeta ya NO van todos en mayúsculas: cuando todo
   grita, nada se oye, y la pantalla se siente ruidosa sin saber por qué.
   Ahora son títulos legibles; la mayúscula queda para etiquetas cortas
   (.eyebrow), que es donde de verdad ayuda a clasificar. */
.card h3 {
  font-size: var(--fs-md); letter-spacing: -.015em; color: var(--text);
  margin-bottom: var(--sp-3); font-weight: 650; line-height: var(--lh-snug);
}
.card h3 .h3-note { font-weight: 450; color: var(--muted); font-size: var(--fs-sm); }
/* Tracking amplio de verdad en las etiquetas. A .12em apenas se notaba;
   a .22em la etiqueta deja de competir con el texto y pasa a leerse como
   lo que es: una señal de sección, no una frase. */
.eyebrow {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .22em;
  color: var(--muted); font-weight: 750; display: block; margin-bottom: var(--sp-2);
}

/* ============================================================
   CAPÍTULO PLEGABLE — para pantallas largas (Yo, detalle de meta) que
   hoy son un muro de tarjetas. Animar `height` obliga a conocer el alto;
   `grid-template-rows: 0fr → 1fr` lo anima sin medir nada y sin saltos.
   ============================================================ */
/* Iniciar nivel: es la acción principal de la tarjeta, así que se separa
   del resto con aire y una línea, no compite con el plan que va arriba. */
.lvl-start { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.lvl-start .conf { margin-top: var(--sp-2); text-align: center; }

/* Espera del plan de nivel: una línea que respira, no un spinner mudo. */
.ls-loading {
  font-size: var(--fs-sm); color: var(--muted); padding: var(--sp-4) 0;
  animation: lsPulse 1.6s var(--ease-out) infinite;
}
@keyframes lsPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
/* El "algo no funciona" es secundario: no compite con el plan. */
.ls-refine { margin-top: var(--sp-4); }
.ls-refine .chapter-title { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }

.chapter { border-top: 1px solid var(--border); }
.chapter:first-of-type { border-top: 0; }
.chapter > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: var(--sp-3); padding: var(--sp-4) 0; min-height: var(--tap);
  transition: color var(--dur-2) var(--ease-out);
}
.chapter > summary::-webkit-details-marker { display: none; }
.chapter > summary:hover { color: rgb(var(--panel-rgb)); }
.chapter-title { font-size: var(--fs-md); font-weight: 650; letter-spacing: -.015em; flex: 1; }
.chapter-count { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
/* La flecha gira: dice si está abierto sin leer nada. */
.chapter-caret {
  width: 22px; height: 22px; display: grid; place-content: center; flex: none;
  color: var(--muted); transition: transform var(--dur-2) var(--ease-exit);
}
.chapter[open] > summary .chapter-caret { transform: rotate(90deg); }
.chapter-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-exit); }
.chapter[open] .chapter-body { grid-template-rows: 1fr; }
.chapter-body > div { overflow: hidden; min-height: 0; }
.chapter-body .card { margin-bottom: var(--sp-3); }
@media (prefers-reduced-motion: reduce) { .chapter-body { transition: none; } }

/* ============================================================
   LA CIFRA COMO GRÁFICO
   Nuestra app está llena de números que importan — el % de avance, el
   nivel, la probabilidad, lo que te queda — y los pintábamos al tamaño
   del texto que los acompaña. Un número que resume todo merece ser el
   objeto visual de la tarjeta, no una palabra más dentro de una frase.
   Se apoya en la tipografía display con tracking muy cerrado y cifras
   tabulares, para que no “baile” al actualizarse.
   ============================================================ */
.figure {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-weight: 700; letter-spacing: -.04em; line-height: .92;
  display: block;
}
.figure-xl { font-size: clamp(44px, 13vw, 76px); }
.figure-lg { font-size: clamp(32px, 9vw, 52px); }
/* La unidad (%, /mes) se subordina: es contexto, no la cifra. */
.figure .u {
  font-size: .38em; font-weight: 650; letter-spacing: 0; color: var(--muted);
  margin-left: .12em; vertical-align: baseline;
}
/* Un número de orden como marca de sección (nivel 03, fase 02). */
.rank {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs); font-weight: 750; letter-spacing: .18em;
  color: rgb(var(--panel-rgb)); display: block; margin-bottom: var(--sp-1);
}
.card .big { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.9px; }
.section-gap { margin-top: 15px; }

/* ---------- Coach / Hoy ---------- */
.coach {
  position: relative; overflow: hidden; border-radius: 24px; padding: 24px;
  background:
    radial-gradient(600px 200px at 80% 0%, rgba(124,131,255,.28), transparent 70%),
    linear-gradient(135deg, rgba(124, 131, 255, 0.16), rgba(34, 211, 238, 0.07));
  border: 1px solid var(--border-hi);
  box-shadow: var(--shadow);
}
.coach::after { content: ""; position: absolute; top: -60%; right: -20%; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.22), transparent 68%); filter: blur(12px); animation: floaty 8s ease-in-out infinite; pointer-events: none; }
.coach-inner { position: relative; z-index: 1; }
/* El saludo baja de jerarquía a propósito: quien tiene que gritar es la
   ACCIÓN de hoy, no "buenos días". Antes el saludo era el texto más
   grande de la pantalla y la misión quedaba debajo, más pequeña. */
.coach .hi { font-size: clamp(var(--fs-md), 3.4vw, var(--fs-lg)); font-weight: 650; letter-spacing: -.02em; }
.coach .say { color: var(--text); opacity: .95; margin-top: 10px; font-size: var(--fs-base); line-height: 1.6; }
.coach .sub { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-3); line-height: var(--lh-snug); }
.sub-link {
  color: var(--accent-2); text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2); display: inline-block;
}
.sub-link:hover { border-bottom-color: currentColor; }
/* Con el dedo, un enlace de una línea (17px) se falla. Se le da alto de
   toque real sin cambiar cómo se ve, compensando con un margen negativo. */
@media (pointer: coarse) {
  .sub-link { padding: 13px 2px; margin: -13px 0; }
}
.dayband { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.dayband .bar { flex: 1; margin: 0; height: 10px; }
.dayband .pctxt { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; font-weight: 650; }

.quest {
  position: relative; overflow: hidden; margin-top: 15px; border-radius: 22px; padding: 22px;
  background: var(--surface-2); border: 1px solid var(--border-hi); box-shadow: var(--shadow);
}
.quest::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); box-shadow: 0 0 16px rgba(124,131,255,.7); }
.quest .tag { font-size: var(--fs-xs); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 850; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* La misión de hoy ES el protagonista de la pantalla: ahora es el texto
   más grande, que es lo que la jerarquía debería haber dicho siempre. */
.quest .qt { font-size: clamp(var(--fs-lg), 4.6vw, var(--fs-xl)); font-weight: 700; margin: var(--sp-3) 0 var(--sp-2); line-height: var(--lh-tight); letter-spacing: -.02em; }
.quest .qw { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.quest-actions { display: flex; gap: 10px; margin-top: 16px; }
.quest.donefx { animation: pop .55s ease both; border-color: rgba(52,211,153,.6); }
.quest .doneline { color: var(--ok); font-weight: 800; font-size: var(--fs-md); display: flex; align-items: center; gap: 8px; }

/* ---------- Detecciones proactivas (#7: la IA inicia) ---------- */
.detections { border-color: rgba(124, 131, 255, 0.34); }
.det-lead { font-size: var(--fs-base); color: var(--muted); margin-bottom: var(--sp-3); }
.det { display: flex; gap: 13px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--border); }
.det:first-of-type { border-top: 0; }
.det-rank {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 800; color: var(--muted);
  border: 1px solid var(--border-hi); background: var(--sunk-50);
}
.det.top .det-rank { background: var(--grad); color: var(--on-accent); border: 0; box-shadow: 0 0 18px rgba(124,131,255,.6); }
.det.top .t { font-weight: 750; font-size: var(--fs-base); }
.det .t { font-weight: 650; font-size: var(--fs-base); line-height: 1.45; }
.det .why { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; line-height: 1.5; }

/* ---------- Recuerdo con el tiempo (#11: memoria profunda) ---------- */
.recall {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(180, 92, 255, 0.13), rgba(34, 211, 238, 0.06));
  border-color: rgba(180, 92, 255, 0.32);
}
.recall-mark {
  position: absolute; top: -14px; left: 14px; font-size: 74px; line-height: 1;
  color: rgba(180, 92, 255, 0.22); pointer-events: none; font-family: Georgia, serif;
}
.recall-line {
  position: relative; z-index: 1; padding-left: 46px;
  font-size: var(--fs-base); line-height: 1.65; font-style: italic; color: var(--text);
}

/* ---------- La relación (#13: el activo no-copiable) ---------- */
.relationship-card {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(124, 131, 255, 0.09));
  border-color: rgba(52, 211, 153, 0.3);
}
.rel-level { font-size: clamp(18px, 4.2vw, 22px); font-weight: 700; letter-spacing: -.4px; margin-bottom: 4px; }

/* chips de hábito */
.chips-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.hchip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px;
  min-height: var(--tap); /* se falla con el pulgar por debajo de 44px */
  border: 1px solid var(--border-hi); background: var(--surface-2); color: var(--text);
  font-size: var(--fs-sm); font-weight: 650; cursor: pointer; font-family: inherit;
  transition: transform var(--dur-1) var(--ease-spring), border-color var(--dur-2), box-shadow var(--dur-2);
}
.hchip:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 20px -12px rgba(124,131,255,.6); }
.hchip:active { transform: scale(.95); }
.hchip.done { border-color: rgba(52,211,153,.5); color: var(--ok); cursor: default; }
/* Riesgo marcado EN la ficha (no como una tarjeta repetida aparte).
   Late despacio: llama la atención sin convertirse en una alarma. */
.hchip.at-risk { border-color: rgba(251,191,36,.55); box-shadow: 0 0 0 1px rgba(251,191,36,.18), 0 6px 20px -14px rgba(251,191,36,.7); }
.hchip.at-risk::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); animation: riskPulse 2.4s var(--ease-out) infinite; }
@keyframes riskPulse { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

/* ============================================================
   TERMÓMETRO DE META — el anillo de avance + la probabilidad honesta.
   ============================================================ */
.thermo-body { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.ring-wrap { position: relative; width: 132px; height: 132px; flex: none; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ring-bg { fill: none; stroke: rgba(150,158,178,.14); stroke-width: 9; }
.ring-fg {
  fill: none; stroke: rgb(var(--panel-rgb)); stroke-width: 9; stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(var(--panel-rgb), .5));
  animation: ringDraw 1.1s var(--ease-out) both;
}
@keyframes ringDraw { from { stroke-dasharray: 0 999; } }
.ring-val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-val b { font-family: var(--font-display); font-size: clamp(30px, 8vw, 40px); font-weight: 700; letter-spacing: -.04em; line-height: .92; display: block; font-variant-numeric: tabular-nums; }
.ring-val b i { font-size: .4em; font-style: normal; font-weight: 650; color: var(--muted); margin-left: .1em; letter-spacing: 0; }
.ring-val span { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.thermo-txt { flex: 1 1 260px; display: flex; flex-direction: column; gap: var(--sp-3); }
.thermo-levels { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); flex-wrap: wrap; }
.lvl-dots { display: inline-flex; gap: 4px; }
.lvl-dots i { width: 16px; height: 5px; border-radius: 99px; background: rgba(150,158,178,.22); transition: background var(--dur-2); }
.lvl-dots i.on { background: rgb(var(--panel-rgb)); box-shadow: 0 0 8px rgba(var(--panel-rgb), .6); }
.prob { display: flex; align-items: center; gap: var(--sp-3); }
.prob-num { font-family: var(--font-display); font-size: clamp(38px, 11vw, 56px); font-weight: 700; letter-spacing: -.04em; line-height: .92; font-variant-numeric: tabular-nums; }
.prob-num.ok { color: var(--ok); } .prob-num.warn { color: var(--warn); } .prob-num.danger { color: var(--danger); }
.prob-lbl { font-size: var(--fs-sm); line-height: var(--lh-snug); }
.prob-none { font-size: var(--fs-sm); line-height: var(--lh-body); }
.thermo-next { font-size: var(--fs-sm); font-weight: 650; }
.thermo-lever {
  font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-snug);
  padding-left: var(--sp-3); border-left: 2px solid rgba(var(--panel-rgb), .5);
}
@media (max-width: 560px) { .thermo-body { gap: var(--sp-4); } .ring-wrap { width: 108px; height: 108px; } }

/* ============================================================
   DINERO CLARO — antes: tres cifras iguales sin moneda y jerga de
   contador ("presupuesto", "límite", "tasa de ahorro"). Ahora la
   pantalla responde primero la pregunta real: cuánto me queda.
   ============================================================ */
/* --- El plan de dinero: veredicto grande y la voz del companero --- */
.plan-veredicto {
  font-size: var(--fs-lg); font-weight: 700; margin: 6px 0 2px;
}
.plan-veredicto.ok { color: var(--ok); }
.plan-veredicto.warn { color: var(--warn); }
.plan-veredicto.danger { color: var(--danger); }
/* La explicacion se distingue de los datos: es el companero hablando,
   con el mismo filo de luz que firma sus mensajes en el chat. */
/* La PRUEBA del nivel se distingue: es el recurso que cierra el ciclo
   — sin forma de comprobarse, un nivel es una lista de intenciones. */
.item.mat-prueba {
  border-left: 2px solid var(--accent);
  padding-left: 12px;
  background: linear-gradient(90deg, rgba(124,131,255,.07), transparent 60%);
}

/* El reparto por papel y los 4 pasos del sistema */
.rep-fila { margin: 8px 0 10px; }
.rep-fila .bar { margin: 4px 0 2px; }
.rep-sistema { margin-top: 10px; }
.rep-sistema summary {
  cursor: pointer; color: var(--accent); font-size: var(--fs-sm);
  padding: 6px 0; user-select: none;
}
.rep-paso { margin: 10px 0; padding-left: 12px; border-left: 2px solid var(--border); }
.rol-sel {
  background: var(--sunk-75); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size: var(--fs-xs); flex: none;
  /* la regla global input,select estira al 100%: aqui es una pastilla */
  width: auto; max-width: 170px;
}

.plan-habla {
  position: relative; padding: 12px 14px 12px 17px; line-height: 1.55;
  font-size: var(--fs-sm); color: var(--text);
  background: linear-gradient(100deg, rgba(124,131,255,.10), var(--glass-edge) 42%);
  border: 1px solid var(--border); border-radius: 4px 14px 14px 14px;
}
.plan-habla::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #22d3ee, var(--accent) 60%, transparent);
  box-shadow: 0 0 10px rgba(34,211,238,.55);
}

.money-hero { text-align: left; }
.money-big {
  font-family: var(--font-display); font-size: clamp(40px, 12vw, 68px);
  font-weight: 700; letter-spacing: -.04em; line-height: .92; margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.money-big.ok { color: var(--ok); }
.money-big.danger { color: var(--danger); }
.money-sub { color: var(--muted); font-size: var(--fs-base); line-height: var(--lh-body); max-width: 46ch; }
.money-flow { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.mf { display: flex; flex-direction: column; gap: 2px; }
.mf-l { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 750; }
.mf b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.mf b.ok { color: var(--ok); } .mf b.danger { color: var(--danger); }
/* Una barra que se lee de un vistazo: cuánto de lo que entró ya salió. */
.mf-bar { flex: 1 1 120px; height: 8px; border-radius: 99px; background: rgba(52,211,153,.28); overflow: hidden; min-width: 90px; }
.mf-in { height: 100%; background: linear-gradient(90deg, var(--warn), var(--danger)); border-radius: 99px; animation: growW .9s var(--ease-out) both; }
@keyframes growW { from { width: 0 !important; } }
.money-goal { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.money-goal b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; display: block; }
.money-arrow { color: var(--muted); font-size: var(--fs-lg); }

/* Tarjeta de meta: pulsable de verdad — se levanta al pasar por encima
   y se hunde al tocarla, para que se lea como un objeto, no como texto. */
.goal-card { text-decoration: none; color: inherit; display: block; }
.goal-card:hover { transform: translateY(-3px); box-shadow: var(--elev-3); border-color: var(--border-hi); }
.goal-card:active { transform: translateY(-1px) scale(.995); }
.goal-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.goal-top .t { font-weight: 650; font-size: var(--fs-md); line-height: var(--lh-snug); }
.goal-top .star { color: var(--warn); }
.hchip .fire { color: var(--warn); }

/* items */
.item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border); }
.item:first-of-type { border-top: 0; }
.item .t { font-weight: 650; font-size: var(--fs-base); line-height: 1.4; }
.item .why { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; line-height: 1.5; }
.chip { display: inline-block; padding: 4px 11px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 750; letter-spacing: .4px; border: 1px solid var(--border-hi); color: var(--muted); white-space: nowrap; }
.chip.task { color: var(--chip-task); border-color: rgba(129, 140, 248, 0.4); }
.chip.habit { color: var(--chip-habit); border-color: rgba(52, 211, 153, 0.4); }
.chip.warn { color: var(--warn); border-color: rgba(251, 191, 36, 0.4); }
.chip.ok { color: var(--ok); border-color: rgba(52, 211, 153, 0.4); }

/* barras / anillos */
.bar { height: 8px; border-radius: 99px; background: rgba(99, 130, 180, 0.14); overflow: hidden; margin-top: 8px; }
.bar > div { height: 100%; border-radius: 99px; background: var(--grad); box-shadow: 0 0 12px rgba(124,131,255,.5); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.bar.warn > div { background: var(--grad-warm); box-shadow: 0 0 12px rgba(251,113,133,.5); }
.bar.ok > div { background: linear-gradient(90deg, #34d399, #22d3ee); }
.conf { font-size: var(--fs-sm); color: var(--muted); }
.conf b { color: var(--accent-2); }
.ring { transform: rotate(-90deg); animation: ringGlow 4s ease-in-out infinite; }
.ring .track { stroke: rgba(99, 130, 180, 0.14); }
.ring .val { stroke: url(#gradRing); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
.ring-wrap { display: flex; gap: 22px; align-items: center; }
.ring-holder { position: relative; }
.ring-holder .ring-core { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-xl); font-weight: 800; }

/* recomendaciones ejecutables */
.rec { position: relative; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--surface); margin-top: 11px; transition: .2s; }
.rec:hover { border-color: var(--border-hi); }
.rec .msg { font-size: var(--fs-base); line-height: 1.5; font-weight: 600; }
.rec .risk { color: var(--muted); font-size: var(--fs-sm); margin-top: 6px; line-height: 1.45; }
.rec .reasons { color: var(--muted); font-size: var(--fs-sm); margin-top: 6px; line-height: 1.5; }
.rec-actions { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.rec.gone { opacity: .35; pointer-events: none; }

/* formularios */
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.inline-form .field { margin: 0; flex: 1; min-width: 120px; }
.list-empty { color: var(--muted); font-size: var(--fs-base); padding: 12px 0; line-height: 1.55; }

/* ---------- Estados vacíos con alma (#14) ---------- */
.empty { text-align: center; padding: 30px 18px; }
.empty .emoji { font-size: var(--fs-2xl); margin-bottom: 12px; opacity: .9; animation: floaty 5s ease-in-out infinite; }
.empty .title { font-size: var(--fs-md); font-weight: 700; margin-bottom: 6px; }
.empty .sub { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; max-width: 320px; margin: 0 auto; }
.empty .btn { margin-top: 16px; }

/* ---------- Skeletons de carga (calidad percibida) ---------- */
.sk { border-radius: 12px; background: linear-gradient(100deg, rgba(130,160,210,.06) 30%, rgba(130,160,210,.14) 50%, rgba(130,160,210,.06) 70%); background-size: 220% 100%; animation: skshimmer 1.3s ease-in-out infinite; }
@keyframes skshimmer { to { background-position: -220% 0; } }
.sk-line { height: 13px; margin: 10px 0; }
.sk-line.lg { height: 22px; width: 55%; }
.sk-line.sm { width: 40%; }
.sk-card { height: 96px; margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ---------- Estado de error, en voz de compañero ---------- */
.errstate { text-align: center; padding: 30px 18px; }
.errstate .emoji { font-size: var(--fs-2xl); margin-bottom: 10px; }
.errstate .msg { color: var(--muted); font-size: var(--fs-base); line-height: 1.55; margin-bottom: 16px; max-width: 320px; margin-left: auto; margin-right: auto; }

/* ---------- Splash de arranque (sin parpadeos) ---------- */
#splash { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--bg); transition: opacity .4s ease; }
#splash.gone { opacity: 0; pointer-events: none; }
#splash .s-mark { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 20px; box-shadow: 0 0 50px rgba(124,131,255,.45); animation: pop .5s ease both, floaty 3s ease-in-out .5s infinite; }
#splash .s-dots { display: flex; gap: 6px; margin-top: 22px; }
#splash .s-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); animation: sdot 1.2s ease-in-out infinite; }
#splash .s-dots span:nth-child(2) { animation-delay: .15s; }
#splash .s-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes sdot { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }

/* ---------- Foco accesible (teclado) ---------- */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }
.btn:focus-visible, .hchip:focus-visible, .nav a:focus-visible { outline-offset: 3px; }

/* drawer */
.drawer { position: fixed; top: 0; right: 0; width: min(400px, 100vw); height: 100vh; z-index: 60; background: var(--bg-2); border-left: 1px solid var(--border-hi); box-shadow: -18px 0 60px rgba(0,0,0,.6); display: flex; flex-direction: column; animation: fadeUp .3s ease; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.drawer-head > div { display: flex; gap: 8px; align-items: center; }
.drawer-body { padding: 12px 20px; overflow-y: auto; flex: 1; }
.notif { padding: 14px 0; border-bottom: 1px solid var(--border); }
.notif .t { font-weight: 650; font-size: var(--fs-base); }
.notif .b { color: var(--muted); font-size: var(--fs-sm); margin: 5px 0 8px; line-height: 1.5; }
.notif.read { opacity: .5; }

/* toast */
.toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 80; background: var(--surface-2); border: 1px solid var(--border-hi); color: var(--text); padding: 13px 22px; border-radius: 15px; box-shadow: var(--shadow); font-size: var(--fs-base); max-width: 92vw; backdrop-filter: blur(14px); animation: fadeUp .3s ease both; }
@media (min-width: 901px) { .toast { bottom: 28px; } }
/* «Actualizando YINN, un momento…»: arriba, mientras el servidor reinicia. */
.aviso-actualizando { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%); z-index: 90; background: var(--surface-2); border: 1px solid var(--border-hi); color: var(--text); padding: 9px 16px; border-radius: 999px; box-shadow: var(--shadow); font-size: var(--fs-sm); max-width: 92vw; backdrop-filter: blur(14px); animation: fadeUp .3s ease both; }

/* plan / tareas */
.task-row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0; border-top: 1px solid var(--border); }
.task-row:first-child { border-top: 0; }
.task-row .task-dot { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--border-hi); color: var(--muted); font-size: var(--fs-sm); font-weight: 800; margin-top: 1px; }
.task-row.done .task-dot { border-color: var(--ok); color: var(--ok); }
.task-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.task-row .tt { font-size: var(--fs-base); line-height: 1.4; }
.task-row.done .tt { color: var(--muted); }
.task-meta { color: var(--muted); font-size: var(--fs-xs); }
.task-ev { font-size: var(--fs-sm); color: var(--text); background: rgba(52,211,153,.10); border-left: 2px solid var(--ok); padding: 5px 9px; border-radius: 7px; margin-top: 3px; line-height: 1.4; }
/* El criterio de "hecho", antes de hacerlo. Va apagado a propósito: es
   una referencia para cuando dudes, no otra cosa que leer. Al cerrarla
   lo sustituye la prueba (.task-ev), que sí es lo que pasó de verdad. */
.task-done-when { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; line-height: 1.4; }
.task-row .btn.sm { flex: none; align-self: center; }

/* ---------- El plano de evidencia (modal) ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: var(--scrim); backdrop-filter: blur(6px); animation: fadeUp .2s ease both; }
.modal-card { width: min(480px, 100%); max-height: 90vh; overflow-y: auto; background: var(--bg-2); border: 1px solid var(--border-hi); border-radius: 18px; padding: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.modal-kicker { font-size: var(--fs-xs); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 850; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.modal-title { font-size: var(--fs-md); font-weight: 700; margin: 8px 0 6px; line-height: 1.35; }
/* El permiso para la IA avanzada: qué sale, qué no, y a quién. */
.permiso-ia-lista { margin: 10px 0 12px; padding-left: 18px; }
.permiso-ia-lista li { margin: 6px 0; line-height: 1.45; }
.modal-prompt { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: 16px; }

/* ============================================================
   RESULTADO DE MISIÓN — cierre de nivel. Superar una fase se celebra;
   fallar se explica y se muestra qué cambió, sin regañar.
   ============================================================ */
.oc { text-align: center; }
.oc-badge {
  width: 76px; height: 76px; margin: 0 auto var(--sp-4); display: grid; place-items: center;
  font-size: 34px; border-radius: 24px; color: var(--on-accent); background: var(--grad);
  box-shadow: 0 0 46px rgba(var(--panel-rgb), .55);
  animation: badgeIn 620ms var(--ease-spring) both;
}
.oc-badge.warn { background: var(--grad-warm); box-shadow: 0 0 46px rgba(251,191,36,.45); }
.oc-badge.danger { background: linear-gradient(100deg, #fb7185, #f472b6); box-shadow: 0 0 46px rgba(251,113,133,.45); }
.oc-badge.muted { background: var(--surface-2); color: var(--text); box-shadow: none; }
@keyframes badgeIn { from { opacity: 0; transform: scale(.4) rotate(-18deg); } }

/* Barra de progreso de campaña: cuántas fases llevas del total. */
.oc-xp { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); font-size: var(--fs-xs); color: var(--muted); }
.oc-xp-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(150,158,178,.16); overflow: hidden; }
.oc-xp-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); animation: growW 900ms var(--ease-out) both; }

.oc-next, .oc-did {
  text-align: left; background: rgba(var(--panel-rgb), .07); border: 1px solid rgba(var(--panel-rgb), .22);
  border-radius: 14px; padding: var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-snug);
}
.oc-did-title { font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--sp-2); font-family: var(--font-display); letter-spacing: -.015em; }
.oc-did ul { margin: 0 0 var(--sp-3); padding-left: 18px; color: var(--muted); }
.oc-did li { margin: 3px 0; }
.oc-did li::marker { color: rgb(var(--panel-rgb)); }
.oc-detail { color: var(--text); font-size: var(--fs-sm); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.oc-why { font-size: var(--fs-sm); font-style: italic; opacity: .9; }
.oc .modal-title { font-size: var(--fs-lg); }
.mf { margin-bottom: 12px; }
.mf label { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px; letter-spacing: .6px; text-transform: uppercase; font-weight: 750; }
.mf input, .mf select, .mf textarea { width: 100%; padding: 12px 14px; border-radius: 12px; font-size: var(--fs-base); background: var(--sunk-60); border: 1px solid var(--border); color: var(--text); font: inherit; }
.mf textarea { resize: vertical; line-height: 1.5; }
.modal-hint { font-size: var(--fs-sm); color: var(--muted); margin: 4px 0 14px; }
.modal-err { color: var(--danger); font-size: var(--fs-sm); margin-bottom: 12px; font-weight: 600; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 520px) { .modal-actions { flex-direction: column-reverse; } .modal-actions .btn { width: 100%; } }

/* ---------- Transición entre vistas (View Transitions API) ----------
   Nativa donde existe; donde no, el cambio es directo (sin regresión).
   Se anima solo el contenido: el chrome (nav, barra) queda fijo, que es
   lo que hace que se sienta app nativa y no recarga de página. */
#view { view-transition-name: cos-view; }
::view-transition-old(cos-view) { animation: vtOut .18s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(cos-view) { animation: vtIn .30s cubic-bezier(.16,.84,.28,1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px) scale(.995); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px) scale(.995); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(cos-view), ::view-transition-new(cos-view) { animation: none; }
}

/* ============================================================
   EL COMPAÑERO EN 3D — capas a distinta profundidad dentro de una
   escena con perspectiva. El paralaje entre capas (no un tilt plano)
   es lo que da sensación de volumen real. Sin librerías.
   ============================================================ */
.av-stage {
  width: var(--av-size, 160px); height: var(--av-size, 160px);
  perspective: 620px; perspective-origin: 50% 45%;
  flex: none; position: relative; user-select: none; -webkit-user-select: none;
}
.av-3d {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform;
}
.av-layer {
  position: absolute; inset: 0; transform: translateZ(var(--z, 0));
  transform-style: preserve-3d; display: grid; place-items: center;
}
.av-layer svg { width: 100%; height: 100%; overflow: visible; }
.av-glow {
  background: radial-gradient(circle at 50% 45%, rgba(124,131,255,.55), rgba(34,211,238,.18) 45%, transparent 70%);
  filter: blur(14px); border-radius: 50%;
}
/* --- movimientos base (todos suaves y baratos: solo transform/opacity) --- */
@keyframes avFloat { 0%,100% { transform: translateZ(var(--z)) translateY(0); } 50% { transform: translateZ(var(--z)) translateY(-7px); } }
@keyframes avSpin { to { transform: translateZ(var(--z)) rotate(360deg); } }
@keyframes avSpinRev { to { transform: translateZ(var(--z)) rotate(-360deg); } }
@keyframes avBreathe { 0%,100% { transform: translateZ(var(--z)) scale(1); } 50% { transform: translateZ(var(--z)) scale(1.055); } }
@keyframes avSway { 0%,100% { transform: translateZ(var(--z)) rotate(-2.5deg); } 50% { transform: translateZ(var(--z)) rotate(2.5deg); } }
@keyframes avOrbitSpin { to { transform: translateZ(var(--z)) rotate(360deg); } }
@keyframes avBlink { 0%,92%,100% { transform: scaleY(1); } 95%,97% { transform: scaleY(.08); } }
@keyframes avCrystal { 0%,100% { transform: translateZ(var(--z)) rotateY(-16deg); } 50% { transform: translateZ(var(--z)) rotateY(16deg); } }
@keyframes avSparkle { 0%,100% { opacity: 0; transform: translateZ(var(--z)) scale(.6); } 50% { opacity: 1; transform: translateZ(var(--z)) scale(1); } }

.av-spin-slow { animation: avSpin 26s linear infinite; }
.av-spin-rev { animation: avSpinRev 34s linear infinite; }
.av-breathe { animation: avBreathe 4.2s ease-in-out infinite; }
.av-halo { animation: avFloat 6s ease-in-out infinite; }
.av-sway { animation: avSway 5.5s ease-in-out infinite; }
.av-sway-fast { animation: avSway 3.4s ease-in-out infinite; }
.av-head { animation: avFloat 5s ease-in-out infinite; }
.av-crystal { animation: avCrystal 7s ease-in-out infinite; }
.av-orbit { animation: avOrbitSpin 12s linear infinite; }
.av-sparks { animation: avSparkle 3.6s ease-in-out infinite; }
/* Parpadeo: el detalle que hace que "esté viva". */
.av-eyes { transform-box: fill-box; transform-origin: center; animation: avBlink 6.5s ease-in-out infinite; }

.av-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 12px rgba(34,211,238,.9);
}
.av-dot.d1 { top: 6%; left: 50%; }
.av-dot.d2 { bottom: 12%; left: 18%; width: 6px; height: 6px; }
.av-dot.d3 { top: 44%; right: 4%; width: 7px; height: 7px; }
.av-spark { position: absolute; font-size: var(--fs-base); color: #e9d5ff; text-shadow: 0 0 10px rgba(167,139,250,.9); }
.av-spark.s1 { top: 14%; right: 16%; }
.av-spark.s2 { bottom: 22%; left: 12%; font-size: var(--fs-xs); }

/* --- reacciones: el compañero responde a lo que pasa --- */
@keyframes avCelebrate { 0% { transform: scale(1) rotateY(0); } 30% { transform: scale(1.12) rotateY(180deg); } 60% { transform: scale(1.05) rotateY(360deg); } 100% { transform: scale(1) rotateY(360deg); } }
@keyframes avThink { 0%,100% { transform: rotateZ(0) rotateY(0); } 25% { transform: rotateZ(-5deg) rotateY(-14deg); } 75% { transform: rotateZ(5deg) rotateY(14deg); } }
.av-3d.av-celebrate { animation: avCelebrate 1.2s cubic-bezier(.2,.8,.25,1) both; }
.av-3d.av-think { animation: avThink 1.3s ease-in-out both; }

/* --- selector de estilo (3 figuras) --- */
.av-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.av-opt {
  background: var(--sunk-50); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px 8px 12px; cursor: pointer; text-align: center; transition: .22s;
  display: flex; flex-direction: column; align-items: center; gap: 8px; color: inherit; font: inherit;
}
.av-opt:hover { border-color: var(--border-hi); transform: translateY(-3px); }
.av-opt.on { border-color: var(--accent); background: rgba(124,131,255,.12); box-shadow: 0 8px 30px -12px rgba(124,131,255,.7); }
.av-opt .n { font-weight: 700; font-size: var(--fs-sm); font-family: var(--font-display); letter-spacing: -.2px; }
.av-opt .t { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
@media (max-width: 520px) { .av-picker { grid-template-columns: 1fr; } .av-opt { flex-direction: row; text-align: left; } }

/* El compañero en la vista Hoy, junto al saludo */
.coach-with-av { display: flex; align-items: center; gap: 18px; }
.coach-with-av .coach-text { flex: 1; min-width: 0; }
@media (max-width: 560px) { .coach-with-av { flex-direction: column; text-align: center; gap: 6px; } }

/* Profundidad real en la Escalera: los niveles viven en 3D */
.ladder { perspective: 900px; }
.lvl { transform-style: preserve-3d; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .2s, background .2s; }
.lvl.current { transform: translateZ(26px); }
.lvl:hover { transform: translateZ(34px) rotateX(2deg); }
.lvl.done:hover { transform: translateZ(14px); }

/* Miniaturas "lite": sin blur (lo más caro) ni giros perpetuos. Mantienen
   respiración/parpadeo para que sigan vivas, pero baratas en gama media. */
.av-3d.av-lite .av-glow { filter: none; opacity: .35; }
.av-3d.av-lite .av-spin-slow,
.av-3d.av-lite .av-spin-rev,
.av-3d.av-lite .av-orbit,
.av-3d.av-lite .av-sparks,
.av-3d.av-lite .av-halo { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .av-layer, .av-3d, .lvl { animation: none !important; transition: none !important; }
  .lvl.current, .lvl:hover { transform: none; }
}

/* ---------- Escalera de niveles (Tu camino) ---------- */
.ladder-card h3 { margin-bottom: 4px; }
.ladder { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 16px; }
.lvl { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--sunk-50); transition: .2s; }
.lvl.current { border-color: var(--accent); background: rgba(124,131,255,.10); box-shadow: 0 0 0 1px rgba(124,131,255,.25), 0 6px 24px rgba(124,131,255,.12); }
.lvl.done { opacity: .72; }
.lvl.locked { opacity: .5; }
.lvl-badge { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 850; font-size: var(--fs-base); background: var(--surface-2); border: 1px solid var(--border-hi); }
.lvl.done .lvl-badge { background: rgba(52,211,153,.18); color: var(--ok); border-color: rgba(52,211,153,.5); }
.lvl.current .lvl-badge { background: var(--grad); color: var(--on-accent); border: 0; }
.lvl-body { min-width: 0; }
.lvl-title { font-weight: 700; font-size: var(--fs-base); line-height: 1.3; }
.lvl-theme { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; line-height: 1.4; }
.lvl-targets { margin: 8px 0 0; padding-left: 18px; }
.lvl-targets li { font-size: var(--fs-sm); line-height: 1.55; }
.ladder-set label { font-size: var(--fs-sm); color: var(--muted); display: block; margin-bottom: 6px; }
.ladder-set-row { display: flex; gap: 8px; }
.ladder-set-row input { flex: 1; padding: 10px 12px; border-radius: 10px; background: var(--sunk-60); border: 1px solid var(--border); color: var(--text); font: inherit; }
.level-strategy { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.level-strategy label { font-size: var(--fs-sm); color: var(--muted); display: block; margin-bottom: 6px; }
.level-strategy textarea { width: 100%; padding: 11px 13px; border-radius: 12px; background: var(--sunk-60); border: 1px solid var(--border); color: var(--text); font: inherit; resize: vertical; line-height: 1.5; margin-bottom: 10px; }
.level-strategy #ls-go { width: 100%; }
.strat-card { margin-top: 14px; padding: 16px; border-radius: 14px; background: rgba(124,131,255,.07); border: 1px solid rgba(124,131,255,.28); }
.strat-head { font-weight: 750; font-size: var(--fs-base); display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.strat-diag { background: rgba(34,211,238,.10); border-left: 3px solid var(--accent-2); padding: 10px 12px; border-radius: 8px; font-size: var(--fs-sm); line-height: 1.55; margin-bottom: 12px; }
.strat-focus { font-size: var(--fs-base); margin-bottom: 10px; }
.strat-focus .why, .strat-step .why { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; margin-top: 3px; }
.strat-line { font-size: var(--fs-sm); line-height: 1.5; margin: 8px 0; }
.strat-line.avoid { color: var(--warn); }
.strat-steps { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.strat-step { display: flex; gap: 10px; }
.strat-step .sn { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm); background: var(--grad); color: var(--on-accent); }
.strat-step .t { font-size: var(--fs-sm); line-height: 1.45; font-weight: 600; }
.subgoal-block { margin-bottom: 17px; }
.subgoal-head { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: var(--fs-base); margin-bottom: 5px; }
.back-link { color: var(--muted); text-decoration: none; font-size: var(--fs-sm); }
.back-link:hover { color: var(--text); }
.rationale { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; background: var(--sunk-50); border: 1px solid var(--border); border-radius: 13px; padding: 14px 16px; }

/* switch */
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; z-index: 2; }
.switch .sl { position: absolute; inset: 0; border-radius: 99px; background: rgba(99, 130, 180, 0.2); border: 1px solid var(--border); transition: .25s; }
.switch .sl::after { content: ""; position: absolute; top: 2px; left: 3px; width: 19px; height: 19px; border-radius: 99px; background: var(--muted); transition: .25s; }
.switch input:checked + .sl { background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 0 16px rgba(124,131,255,.5); }
.switch input:checked + .sl::after { left: 22px; background: #fff; }

/* ============================================================
   VOZ — botón flotante + modo hablado con orbe
   ============================================================ */
/* El botón flotante ES tu compañero (figura 3D), no un emoji. Flota. */
/* TU COMPAÑERO EN LA ESQUINA. Mismo sitio y mismo trato para las cuatro
   figuras: antes era un círculo morado de 66 px con la figura ENCERRADA
   dentro, y eso se lee como un botón con un icono, no como alguien
   acompañándote. Sin círculo, sin borde y disolviéndose por abajo, es
   una presencia. */
.voice-fab {
  position: fixed; z-index: 45; right: 4px; bottom: 78px;
  width: 260px; height: 260px; border-radius: 0; border: 0; cursor: pointer;
  background: transparent; padding: 0; transition: transform .2s var(--ease);
  display: grid; place-items: center; animation: floaty 6s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.5));
  -webkit-mask-image:
    linear-gradient(to bottom, #000 74%, transparent 99%),
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, #000 74%, transparent 99%),
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.voice-fab .fab-av { pointer-events: none; }
.voice-fab:hover { transform: translateY(-4px) scale(1.04); }
.voice-fab:active { transform: scale(.96); }
@media (max-width: 900px) { .voice-fab { width: 132px; height: 132px; bottom: 74px; right: 0; } }

/* Misión de campaña: la app prioriza una acción viva, no una pared de tareas. */
.mission-card { position:relative; overflow:hidden; border-color:color-mix(in srgb, var(--accent) 42%, transparent); background:linear-gradient(128deg, color-mix(in srgb, var(--accent) 17%, #101216), #101216 65%); }
.mission-card::after { content:''; position:absolute; width:240px; height:240px; right:-110px; top:-130px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent-2) 35%, transparent), transparent 70%); pointer-events:none; }
.mission-kicker { color:var(--accent-2); font-size: var(--fs-xs); letter-spacing:1.5px; font-weight:800; margin-bottom:8px; }
.mission-card h2 { margin:0 0 8px; font-size: var(--fs-lg); position:relative; z-index:1; }
.mission-objective { margin:0 0 12px; color:var(--muted); position:relative; z-index:1; }
.mission-metrics { display:grid; gap:7px; margin:12px 0 16px; position:relative; z-index:1; }
.mission-metrics span { color:var(--text); font-size: var(--fs-sm); }
.mission-diag { padding:10px 12px; margin:0 0 14px; border-radius:12px; background:rgba(255,181,71,.1); color:var(--diag-text); font-size: var(--fs-sm); line-height:1.45; position:relative; z-index:1; }
.mission-card .btn { position:relative; z-index:1; }
.mission-adjust { border-color:rgba(255,181,71,.5); }
@media (min-width: 901px) { .voice-fab { bottom: 26px; right: 26px; } }

/* Modo voz: la figura GRANDE ocupa el centro; los anillos son su aura. */
.voice-av { position: absolute; inset: 0; display: grid; place-items: center; }
.orb:has(.av-3d) .core { display: none; } /* la figura reemplaza a la bolita */
@keyframes avTalk { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.035); } }
.av-3d.av-talking { animation: avTalk .46s ease-in-out infinite; }

.voice-overlay {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  /* Alto REAL, no el ideal, y respetando la muesca del iPhone: con el
     alto ideal el contenido se centraba dentro de una caja más grande
     que la pantalla y se recortaba por los dos extremos. */
  height: 100dvh;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: radial-gradient(700px 500px at 50% 40%, rgba(124,131,255,.16), transparent 60%), rgba(5, 7, 15, 0.9);
  backdrop-filter: blur(18px); padding: 24px; animation: fadeUp .3s ease;
}
.voice-close { position: absolute; top: 20px; right: 20px; }
.orb { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.orb .core {
  width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a5b4fc, #7c83ff 45%, #4338ca 100%);
  box-shadow: 0 0 70px rgba(124,131,255,.7), inset 0 0 40px rgba(255,255,255,.25);
  animation: orbPulse 3s ease-in-out infinite;
}
.orb .r1, .orb .r2, .orb .r3 { position: absolute; border-radius: 50%; border: 2px solid transparent; }
.orb .r1 { inset: 8px; border-top-color: rgba(34,211,238,.7); border-right-color: rgba(124,131,255,.4); animation: spin 3.4s linear infinite; }
.orb .r2 { inset: 26px; border-bottom-color: rgba(180,92,255,.6); animation: spinRev 4.6s linear infinite; }
.orb .r3 { inset: -14px; border-left-color: rgba(34,211,238,.35); animation: spin 7s linear infinite; }
.orb.listening .core { animation: orbPulse 1.1s ease-in-out infinite; box-shadow: 0 0 90px rgba(34,211,238,.8), inset 0 0 40px rgba(255,255,255,.3); }
.orb.speaking .core { background: radial-gradient(circle at 35% 30%, #6ee7b7, #22d3ee 50%, #0891b2 100%); }
.orb.thinking .core { filter: saturate(.6) brightness(.9); }
.voice-state { font-size: var(--fs-base); color: var(--accent-2); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.voice-transcript { font-size: clamp(18px, 4.5vw, 24px); font-weight: 650; text-align: center; max-width: 560px; line-height: 1.4; min-height: 34px; }
.voice-reply { font-size: var(--fs-base); color: var(--muted); text-align: center; max-width: 560px; line-height: 1.55; }
.voice-controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
/* Los ejemplos de voz van como fichas: se leen de un vistazo y enseñan
   lo que la app YA sabe hacer (registrar dinero hablando, declarar avance).
   Antes era una frase corrida con ejemplos viejos que se quedaron atrás. */
.voice-hint { font-size: var(--fs-sm); color: var(--muted); text-align: center; max-width: 460px; line-height: var(--lh-body); }
.voice-hint .vh {
  display: inline-block; margin: 5px 4px 0; padding: 5px 11px; border-radius: 99px;
  background: rgba(var(--panel-rgb), .1); border: 1px solid rgba(var(--panel-rgb), .26);
  color: var(--text); font-size: var(--fs-xs); white-space: nowrap;
}
.voice-textfallback { display: flex; gap: 10px; width: min(440px, 92vw); }
.handsfree { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }

/* Cuando la figura 3D (three.js) está montada, las capas CSS del avatar
   se ocultan: sirvieron de respaldo mientras cargaba el módulo. El
   contenedor conserva su tamaño, así que no hay salto de layout. */
.av-3d.av-con-orbe > .av-layer { opacity: 0; transition: opacity .35s ease; }
.av-3d.av-con-orbe > canvas { position: absolute; inset: 0; }

/* --- Las 3 voces del compañero (misma familia visual que las figuras,
   pero más bajas: aquí lo que importa es oír, no mirar) --- */
.voz-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.voz-opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: transform .18s var(--ease), border-color .18s, background .18s;
}
.voz-opt:hover { border-color: var(--border-hi); transform: translateY(-2px); }
.voz-opt.on { border-color: var(--accent); background: rgba(124,131,255,.12); }
.voz-opt .vt { display: flex; flex-direction: column; min-width: 0; }
.voz-opt .n { font-weight: 700; font-size: var(--fs-sm); font-family: var(--font-display); letter-spacing: -.2px; }
.voz-opt .t { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
/* La onda es la única pista de que esto SUENA. Quieta hasta que hablas. */
.onda { display: flex; align-items: center; gap: 2px; height: 22px; flex: none; }
.onda i { width: 3px; height: 6px; border-radius: 2px; background: var(--muted); transition: height .2s var(--ease), background .2s; }
.voz-opt.on .onda i { background: var(--accent); }
.voz-opt.sonando .onda i { animation: onda-lat .9s ease-in-out infinite; }
.voz-opt.sonando .onda i:nth-child(2) { animation-delay: .12s }
.voz-opt.sonando .onda i:nth-child(3) { animation-delay: .24s }
.voz-opt.sonando .onda i:nth-child(4) { animation-delay: .36s }
.voz-opt.sonando .onda i:nth-child(5) { animation-delay: .48s }
@keyframes onda-lat { 0%,100% { height: 6px } 50% { height: 20px } }
@media (prefers-reduced-motion: reduce) { .voz-opt.sonando .onda i { animation: none; height: 14px } }
@media (max-width: 520px) { .voz-picker { grid-template-columns: 1fr; } }

/* Cambiar de figura era un PEGOTE: el lienzo viejo desaparecia y el
   nuevo aparecia de golpe, a veces con un frame del anterior. Todo
   lienzo de figura nace en fundido y el cambio se ve intencional. */
@keyframes avNace { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.voice-fab canvas, .comp-esquina canvas, .av-stage canvas {
  animation: avNace .35s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .voice-fab canvas, .comp-esquina canvas, .av-stage canvas { animation: none; }
}

/* --- El personaje 3D de pago dentro del modo voz --- */
.comp3d { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.comp3d canvas { width: 100%; height: 100%; display: block; }
/* Con personaje, los anillos y la figura procedural sobran: competirían
   por la atención con una cara. Se apagan, no se borran — si el modelo
   no carga, siguen ahí debajo. */
.orb.con-personaje .r1, .orb.con-personaje .r2, .orb.con-personaje .r3,
.orb.con-personaje .core, .orb.con-personaje .voice-av { opacity: 0; pointer-events: none; }
/* Retrato, no cuadrado: encuadrada en cuadro la ropa blanca llega al
   borde de golpe y se lee como una foto recortada. Alto + desvanecido
   abajo y el personaje EMERGE del fondo en vez de estar pegado encima. */
/* En el centro va de cuerpo entero, así que manda el ALTO disponible:
   con una medida fija en píxeles, en una ventana baja sale diminuta y
   con la cabeza cortada. */
.orb.con-personaje {
  height: min(68vh, 104vw); width: auto; aspect-ratio: 46 / 68;
  /* LA CABEZA CORTADA EN EL CELULAR: `vh` mide la ventana SIN la barra
     de direcciones — la pantalla ideal, no la que hay. Con la barra a la
     vista, 68vh es más alto que el hueco real; el overlay centra lo que
     contiene, el sobrante se reparte arriba y abajo, y por arriba lo que
     sobresale es la cabeza.
     `dvh` mide el hueco VISIBLE ahora mismo y se reajusta cuando la
     barra aparece o se esconde. La línea en vh se deja delante como
     respaldo: un navegador que no entienda dvh se queda con ella. */
  height: min(62dvh, 100vw);
  /* Sin los ejemplos de voz queda sitio (dueño, 2026-10-02: "extiéndelo"):
     la figura toma ese alto. Si no cabe, el flex-shrink de abajo cede. */
  height: min(72vh, 140vw);
  height: min(72dvh, 140vw);
  border-radius: 0; background: none; box-shadow: none;
  /* CEDE, no empuja: en un movil bajo (640 de alto y menos) la figura a
     tamano preferido + los controles suman mas que la pantalla, y como
     el overlay se centra sin scroll, lo que sobra se recorta POR ARRIBA:
     la cabeza. Con shrink, la figura absorbe el exceso y todo cabe;
     aspect-ratio reduce el ancho a juego. El minimo evita que en un
     caso extremo (teclado abierto) quede en una miniatura absurda. */
  flex: 0 1 auto;
  min-height: 150px;
}
/* Desvanece abajo Y a los lados. La sudadera oversize es ancha y toca
   el borde del lienzo; sin esto se ve el corte recto y delata que hay
   una caja. Con el degradado, la figura se disuelve en el fondo. */
/* De cuerpo entero el degradado tiene que empezar MUY abajo: el de la
   esquina (58%) le comería las piernas. */
.orb.con-personaje .comp3d {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 6%, #000 90%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 6%, #000 90%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* --- La compañera en la esquina, como un VTuber en un directo ---
   Está ahí mientras usas la app; tocarla abre el modo voz. No lleva
   caja ni borde a propósito: una silueta recortada sobre la interfaz
   se lee como una persona asomada, un rectángulo se lee como un vídeo. */
.comp-esquina {
  position: fixed; right: 4px; bottom: 10px; z-index: 60;
  width: 260px; height: 349px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease), filter .25s var(--ease);
  /* Se disuelve por abajo y por los lados en vez de cortarse en seco.
     El corte de abajo estaba en 68 % y se comia justo donde caen las
     manos al gesticular: parecia que no movia los brazos. */
  /* Arriba también se disuelve (dueño, 2026-10-02): el sol de Celeste
     llegaba al borde superior y se veía el corte recto de la caja. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
}
/* Una figura de LUZ no proyecta sombra. Y su resplandor cubre casi toda
   la caja con un poco de luz: la sombra de ese resplandor oscurecía la
   caja entera y se veía un rectángulo negro. */
.comp-esquina.luz { filter: none; }
.comp-esquina:hover { transform: translateY(-4px) scale(1.03); }
.comp-esquina canvas { width: 100%; height: 100%; display: block; }
/* Con personaje real, el botón del micrófono sobra: tocarla a ella ES
   el botón, y dos accesos a lo mismo confunden. */
body.con-personaje3d .voice-fab { display: none; }
/* En móvil sube por encima de la barra inferior: si no, se le come los
   pies y encima compite con los botones de navegación. */
@media (max-width: 900px) {
  .comp-esquina { width: 132px; height: 178px; bottom: 78px; right: 2px; }
}
/* En pantalla GRANDE el companero es un copiloto de verdad, no un pin.
   El contenido vive en la columna izquierda y a la derecha sobran
   ~800px: ahi cabe una figura de medio metro de pantalla. Solo aqui —
   en pantallas medianas se queda en 320 y en movil en 132. */
/* Talla unica de escritorio. El 520 tapaba tarjetas enteras en las
   pantallas donde el contenido llega hasta la derecha ("Yo"): el
   companero acompana, no se sienta encima de los botones. */
/* Solo acompaña dentro de la app. Durante el registro o el onboarding
   guiado tapa justo lo que hay que leer, y el primer uso es donde se
   decide si alguien se queda. */
#app.hidden ~ .comp-esquina,
#wizard:not(.hidden) ~ .comp-esquina,
#auth:not(.hidden) ~ .comp-esquina { display: none; }

/* --- Vega en la galería: es una foto del personaje, no una figura
   procedural. Se enseña junto a las gratis para que se vea qué
   desbloquea pagar, no escondida detrás de un candado sin cara. --- */
.av-foto { width: var(--av-size, 74px); height: calc(var(--av-size, 74px) * 1.33); display: grid; place-items: center; }
.av-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.av-foto.grande { --av-size: 128px; }
.etiqueta-premium {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px;
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  background: linear-gradient(90deg, #7c83ff, #22d3ee); color: #050710; vertical-align: 1px;
}
/* Bloqueada: se ve entera pero apagada. Taparla con un candado opaco
   esconde justo lo que estás vendiendo. */
.av-opt.bloqueada .av-foto img { filter: grayscale(.55) brightness(.7); }
.av-opt.bloqueada { opacity: .82; }
.av-opt.bloqueada:hover { opacity: 1; }

/* Enlace como prueba, junto a la foto */
.ev-link-row { display: flex; gap: 8px; margin-top: 10px; }
.ev-link-row input { flex: 1; min-width: 0; }
.ev-foto .conf { margin-top: 6px; line-height: 1.45; }

/* ============================================================
   VOZ o CHAT — nunca los dos.
   En un móvil no caben: el personaje a cuerpo entero ya ocupa media
   pantalla y el teclado se come la otra media. En escritorio caben,
   pero dos formas de decir lo mismo a la vez solo reparten la atención.
   ============================================================ */
.modo-switch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 4px; border-radius: 99px; z-index: 3;
  background: var(--sunk-60); border: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.modo-switch button {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: var(--fs-sm); padding: 7px 16px; border-radius: 99px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.modo-switch button.on { background: var(--accent); color: #050710; font-weight: 700; }

/* --- EL CHAT ---
   No son globos de mensajería: es una consola de a bordo. Cristal
   oscuro, un filo de luz a la izquierda en lo que dice el compañero, y
   tus mensajes con un rastro de la energía de la figura. Sin sombras
   blandas ni esquinas de burbuja — la marca es plata y luz sobre negro,
   no una app de mensajes más. */
.chat-panel { display: flex; flex-direction: column; width: min(560px, 94vw); flex: 1; min-height: 0; gap: 12px; }

.chat-hilo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px; padding: 10px 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(124,131,255,.05), transparent 22%),
    rgba(5, 7, 15, .38);
  border: 1px solid var(--border);
  /* La primera línea se difumina al salir: el hilo se pierde hacia
     arriba en vez de cortarse contra un borde duro. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
  scrollbar-width: thin; scrollbar-color: rgba(124,131,255,.35) transparent;
}
.chat-hilo::-webkit-scrollbar { width: 6px; }
.chat-hilo::-webkit-scrollbar-thumb { background: rgba(124,131,255,.32); border-radius: 99px; }

.chat-msg {
  max-width: 82%; padding: 11px 15px; line-height: 1.55; font-size: var(--fs-sm);
  position: relative; animation: chatIn .26s var(--ease) both;
  /* Luna explica en párrafos cortos: el salto de línea se respeta. */
  white-space: pre-line; overflow-wrap: anywhere;
}
@keyframes chatIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* TÚ: el color de la energía, esquina inferior derecha en ángulo — como
   si saliera de tu lado de la pantalla. */
.chat-msg.yo {
  align-self: flex-end; color: #f2f4ff;
  background: linear-gradient(135deg, rgba(124,131,255,.30), rgba(34,211,238,.16));
  border: 1px solid rgba(124,131,255,.42);
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 6px 22px -12px rgba(124,131,255,.85);
}
/* ÉL: cristal oscuro con un filo de luz vertical a la izquierda. Ese
   filo es la firma visual: hace que su voz se lea como "sistema vivo". */
.chat-msg.el {
  align-self: flex-start; color: var(--text);
  background: linear-gradient(100deg, rgba(124,131,255,.10), rgba(10,12,22,.72) 42%);
  border: 1px solid var(--border);
  border-radius: 4px 16px 16px 16px;
  padding-left: 17px;
}
.chat-msg.el::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #22d3ee, var(--accent) 60%, transparent);
  box-shadow: 0 0 10px rgba(34,211,238,.55);
}

/* Pensando: tres puntos que respiran, no un texto en cursiva. */
.chat-msg.pensando { color: var(--muted); }
.chat-msg.pensando::after {
  content: ""; display: inline-block; width: 22px; vertical-align: middle;
}
.chat-puntos { display: inline-flex; gap: 5px; align-items: center; height: 12px; }
.chat-puntos i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: chatPunto 1.1s ease-in-out infinite;
}
.chat-puntos i:nth-child(2) { animation-delay: .16s }
.chat-puntos i:nth-child(3) { animation-delay: .32s }
@keyframes chatPunto { 0%,100% { opacity:.28; transform: translateY(0) } 50% { opacity:1; transform: translateY(-3px) } }

.chat-vacio {
  margin: auto; text-align: center; color: var(--muted);
  font-size: var(--fs-sm); line-height: 1.7; max-width: 32ch;
}
.chat-vacio b { color: var(--text); font-family: var(--font-display); font-weight: 600; display: block; margin-bottom: 6px; }

/* La barra de escribir: una consola. El filo se enciende al escribir. */
.chat-form {
  display: flex; gap: 10px; align-items: flex-end; padding: 8px;
  border-radius: 16px; border: 1px solid var(--border);
  background: rgba(5,7,15,.5);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.chat-form:focus-within {
  border-color: rgba(124,131,255,.55);
  box-shadow: 0 0 0 1px rgba(124,131,255,.22), 0 10px 34px -18px rgba(124,131,255,.9);
}
.chat-form textarea {
  flex: 1; resize: none; max-height: 130px; min-height: 42px;
  background: none; border: 0; padding: 10px 8px; color: var(--text);
  font: inherit; font-size: var(--fs-sm); line-height: 1.5;
}
.chat-form textarea:focus { outline: none; box-shadow: none; }
.chat-form .btn { flex: none; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .chat-msg { animation: none }
  .chat-puntos i { animation: none; opacity: .6 }
}

/* --- En chat, el personaje se aparta y encoge: sigue estando, pero el
       protagonista pasa a ser lo que se escribe. --- */
.voice-overlay.modo-chat { justify-content: flex-start; padding-top: 62px; gap: 8px; }
.voice-overlay.modo-chat .orb { align-self: center; }
.voice-overlay.modo-chat .voice-state,
.voice-overlay.modo-chat .voice-transcript,
.voice-overlay.modo-chat .voice-reply,
.voice-overlay.modo-chat .voice-controls,
.voice-overlay.modo-chat .handsfree,
.voice-overlay.modo-chat .voice-hint { display: none; }
/* En chat la figura se aparta Y encoge: aquí el protagonista es lo que
   se escribe. Vale para las cuatro, no solo para el personaje 3D.
   OJO: la figura lleva su tamaño puesto desde JavaScript, así que
   encoger solo la caja la dejaba desbordándose ENCIMA del primer
   mensaje. Hay que encoger también lo de dentro. */
.voice-overlay.modo-chat .orb { width: min(30vw, 19vh); height: min(30vw, 19vh); flex: none; }
.voice-overlay.modo-chat .orb .voice-av { --av-size: min(30vw, 19vh) !important; }
.voice-overlay.modo-chat .orb .core { width: 62%; height: 62%; }
.voice-overlay.modo-chat .orb .r1, .voice-overlay.modo-chat .orb .r2,
.voice-overlay.modo-chat .orb .r3 { inset: 4px; }
.voice-overlay.modo-chat .orb.con-personaje { height: min(30vh, 46vw); width: auto; aspect-ratio: 46 / 68; }

/* En pantalla ancha sí caben lado a lado: el personaje a la izquierda,
   el hilo a la derecha. Es la disposición de un directo. */
@media (min-width: 900px) {
  .voice-overlay.modo-chat { flex-direction: row; align-items: stretch; justify-content: center; gap: 28px; padding: 74px 32px 32px; }
  .voice-overlay.modo-chat .orb { align-self: center; flex: none; }
  .voice-overlay.modo-chat .orb { width: min(22vw, 28vh); height: min(22vw, 28vh); }
  .voice-overlay.modo-chat .orb .voice-av { --av-size: min(22vw, 28vh) !important; }
  /* Manda el ALTO y el ancho lo deduce aspect-ratio. Antes salian de
     dos min() distintos: cada forma de ventana daba una proporcion
     distinta, y en una pantalla de PC la caja se quedaba en poco mas
     de la mitad del alto disponible — o sea, diminuta. */
  .voice-overlay.modo-chat .orb.con-personaje {
    height: min(76vh, 44vw); width: auto; aspect-ratio: 46 / 68;
  }
  /* flex:none aqui a proposito. En movil la fila es una COLUMNA y el
     flex:1 de .chat-panel sirve para llenar el alto que sobra; en fila
     ese mismo flex:1 actua sobre el ANCHO y se comia la pantalla: el
     panel se iba a 1273px, las lineas de texto a ~130 caracteres (se
     leen fatal) y el personaje quedaba empequeñecido al lado. El alto
     lo sigue llenando por el align-items:stretch de la fila. */
  .voice-overlay.modo-chat .chat-panel { flex: none; width: min(620px, 52vw); }
}


/* ============================================================
   AVISO DE INSTALAR EN EL CELULAR
   Abajo del todo, y por ENCIMA del área segura: en un iPhone con muesca
   un botón pegado al borde queda debajo de la barra del sistema y no se
   puede pulsar.
   ============================================================ */
.yinn-instalar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  z-index: 9000;
  width: min(420px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border-hi);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  color: var(--text);
  font-family: var(--font-body);
  animation: yinn-instalar-entra 0.28s ease-out;
}
@keyframes yinn-instalar-entra {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .yinn-instalar { animation: none; }
}
.yinn-instalar p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
}
.yinn-instalar-botones {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.yinn-instalar button {
  font: inherit;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  /* Ancho de dedo, no de ratón: por debajo de 44 px se falla el toque. */
  min-height: 44px;
}
.yinn-instalar-si {
  background: var(--grad);
  color: var(--on-accent);
  font-weight: 600;
}
.yinn-instalar-no {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.yinn-instalar button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* ============================================================
   ENCONTRAR UNA META — para quien no llega con una.
   Botones grandes y con aire: aquí la persona está indecisa, y una
   rejilla apretada de opciones diminutas se siente a examen.
   ============================================================ */
.wiz-escape {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
}
.wiz-escape a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wiz-escape a:hover { color: var(--text); }

.wiz-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 18px 0 6px;
}
.wiz-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  min-height: 92px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: .16s;
}
.wiz-area:hover, .wiz-area:focus-visible {
  border-color: var(--border-hi);
  transform: translateY(-2px);
}
.wiz-area .wa-ic { font-size: 22px; color: var(--accent-2); }
.wiz-area .wa-t { font-weight: 650; font-size: 15px; }

.wiz-semillas {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 18px 0 6px;
}
.wiz-semilla {
  text-align: left;
  padding: 14px 16px;
  min-height: 44px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: .16s;
}
.wiz-semilla:hover, .wiz-semilla:focus-visible {
  border-color: var(--border-hi);
  background: var(--surface-2);
}
.wiz-semilla .ws-t { display: block; font-weight: 650; font-size: 15px; }
.wiz-semilla .ws-p { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }

.wiz-espejo {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.wiz-espejo b { color: var(--text); font-weight: 650; }

/* ============================================================
   EL CAMINO — el ascenso hacia la meta, de un vistazo.
   ============================================================ */
.camino-wrap { margin: 6px 0 4px; }
.camino {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  height: auto;
  overflow: visible;
}

/* La senda entera, tenue: es lo que FALTA. Se ve, pero no compite. */
.camino .senda {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
}
/* Y encima, lo YA recorrido: continuo y con el color de la marca. La
   diferencia entre línea partida y línea entera cuenta la historia sin
   una sola palabra. */
.camino .senda-hecha {
  fill: none;
  stroke: url(#gradCamino), var(--accent);
  stroke: var(--accent-2);
  stroke-width: 4;
  stroke-linecap: round;
}

.camino .hito circle { transition: r var(--dur-2, .18s) ease; }
.camino .hecho circle { fill: var(--accent-2); stroke: none; }
.camino .actual circle { fill: var(--accent); stroke: var(--bg); stroke-width: 3; }
.camino .cerrado circle {
  fill: var(--bg-2);
  stroke: var(--border);
  stroke-width: 2;
}
/* El nivel actual respira. Es el único que se mueve: si todo se moviera,
   la mirada no sabría dónde posarse. */
.camino .pulso {
  fill: var(--accent);
  opacity: .18;
  animation: caminoPulso 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes caminoPulso {
  0%, 100% { opacity: .10; }
  50% { opacity: .26; }
}
@media (prefers-reduced-motion: reduce) {
  .camino .pulso { animation: none; }
}

.camino .dentro {
  fill: var(--on-accent, #05070f);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
}
.camino .rotulo {
  fill: var(--muted);
  font-family: var(--font-body);
  font-size: 11.5px;
}
.camino .hecho .rotulo { fill: var(--text); }
.camino .actual .rotulo { fill: var(--text); font-weight: 650; }
.camino .cima-t {
  fill: var(--accent-3);
  font-size: 18px;
  opacity: .85;
}

.camino-pie {
  margin-top: 10px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
.camino-pie b { color: var(--text); }


/* ============================================================
   DENTRO DE LA APP INSTALADA (iOS / Android)
   Sin barra de navegador, el contenido sube hasta el borde y se mete
   DEBAJO de la muesca y de la barra inferior del iPhone: el titulo queda
   tapado por el reloj y la navegacion, bajo la barra de gestos.
   ============================================================ */
.app-nativa .topbar {
  padding-top: max(12px, env(safe-area-inset-top));
}
.app-nativa .bottomnav {
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  height: auto;
}
.app-nativa .main {
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
.app-nativa .voice-overlay {
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.app-nativa .voice-fab {
  bottom: calc(74px + env(safe-area-inset-bottom));
}
.app-nativa .yinn-instalar { display: none; }  /* ya esta instalada */

/* En la app instalada, seleccionar texto por accidente al desplazarse
   se siente a web. Los textos de verdad si se pueden copiar. */
.app-nativa {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.app-nativa input, .app-nativa textarea,
.app-nativa .chat-msg, .app-nativa .conf, .app-nativa p {
  -webkit-user-select: text;
  user-select: text;
}

/* ============================================================
   RENDIMIENTO EN MÓVIL — quitar lo que hace que la página "se pegue".

   El desfase al desplazarse en el teléfono venía de tres sitios, todos
   decorativos:

   1. `backdrop-filter: blur(...)` — el cristal esmerilado. En escritorio
      es gratis; en un móvil obliga a re-desenfocar TODO lo que hay
      detrás en cada frame del scroll. Diez paneles con blur = scroll a
      tirones. Se sustituye por el mismo color, un poco más opaco: se ve
      casi igual y cuesta cero.

   2. Las tres capas de estrellas a pantalla completa moviéndose sin
      parar. Componer tres lienzos gigantes en cada frame se nota en un
      teléfono modesto. Se dejan las estrellas QUIETAS (el cielo sigue
      ahí) y se apagan las capas extra.

   3. Las animaciones infinitas decorativas (auras, pulsos). Cada una
      obliga a repintar aunque nadie la mire. En móvil, quietas.

   Nada de esto toca la FUNCIÓN: solo el adorno que costaba más de lo
   que aportaba justo donde menos potencia hay.
   ============================================================ */
@media (max-width: 900px) {
  /* 1. Sin cristal esmerilado: mismo tono, más opaco, coste cero. */
  .card, .sidebar, .topbar, .glass, .bottomnav, .modal, .voice-overlay,
  .yinn-instalar, .wiz-card, .auth-card, .chat-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .card, .glass, .wiz-card, .auth-card, .modal {
    background: var(--card-solid) !important;
  }
  .bottomnav, .topbar {
    background: var(--bar-solid) !important;
  }

  /* 2. El cielo, quieto: las estrellas se ven, pero no se componen tres
     lienzos a pantalla completa en cada frame. */
  .star-layer { animation: none !important; }
  #stars-near, #stars-mid { display: none; }

  /* 3. Adornos que laten: quietos en el teléfono. El pulso del camino y
     las auras son un lujo de escritorio. */
  .camino .pulso { animation: none; opacity: .16; }
  .orb .r1, .orb .r2, .orb .r3 { animation-duration: 12s; }
}

/* Y en CUALQUIER pantalla: cuando la pestaña no se ve, el navegador ya
   pausa los rAF, pero las animaciones CSS siguen. Esta clase la pone el
   JS al ocultarse la pestaña: batería que no se gasta en un fondo que
   nadie está mirando. */
.pestana-oculta * {
  animation-play-state: paused !important;
}

/* El plan antes de empezar: un resumen, no veinte pasos. Abruma justo en
   el momento de decidir, y deja sin sentido el botón de iniciar el nivel. */
.plan-preview { border: 1px dashed rgba(var(--panel-rgb), .35); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.plan-preview p { margin: 0; line-height: var(--lh-body); }
.plan-preview p + p { margin-top: 4px; }

/* ============================================================
   ORBE DE ESPERA — mientras la IA arma el plan.
   Armar un plan con el modelo tarda entre uno y dos minutos. Antes eso
   era un boton gris que decia "Armando..." y nada mas: quien esperaba no
   sabia si la app trabajaba o se habia colgado, y cerrarla a los treinta
   segundos era lo razonable. Esto no acelera nada — hace que la espera
   se pueda aguantar, que es lo unico que se puede hacer con ella.
   Sin dependencias, sin imagenes: puro CSS.
   ============================================================ */
.orbe-espera {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 34px 16px; text-align: center;
}
.orbe-espera .orbe {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(165,180,252,.95), rgba(99,102,241,.55) 45%, rgba(30,27,75,.9) 72%, rgba(10,10,25,1));
  box-shadow: 0 0 42px rgba(99,102,241,.45), inset 0 0 34px rgba(34,211,238,.28);
  animation: orbe-latido 3.4s ease-in-out infinite;
}
/* El anillo que gira: da sensacion de trabajo en curso, no de espera muerta. */
.orbe-espera .orbe::before {
  content: ''; position: absolute; inset: -13px; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(34,211,238,.85); border-right-color: rgba(167,139,250,.6);
  animation: orbe-giro 1.5s linear infinite;
}
/* El halo que respira, medio segundo desfasado del latido: dos ritmos
   distintos se leen como algo vivo; uno solo se lee como un GIF. */
.orbe-espera .orbe::after {
  content: ''; position: absolute; inset: -26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.22), transparent 65%);
  animation: orbe-latido 3.4s ease-in-out .5s infinite;
}
.orbe-espera .chispas { position: absolute; inset: -30px; pointer-events: none; }
.orbe-espera .chispa {
  position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(34,211,238,.95); box-shadow: 0 0 8px rgba(34,211,238,.9);
  animation: chispa-cae 2.8s ease-in infinite;
}
.orbe-espera .texto { font-weight: 600; font-size: 15px; }
.orbe-espera .paso { font-size: 13px; opacity: .72; min-height: 19px; }

@keyframes orbe-giro { to { transform: rotate(360deg); } }
@keyframes orbe-latido {
  0%, 100% { transform: scale(1); opacity: .92; }
  50% { transform: scale(1.06); opacity: 1; }
}
/* Cada chispa nace lejos y cae al centro: se ve como el orbe
   ALIMENTANDOSE, que es literalmente lo que esta pasando por dentro. */
@keyframes chispa-cae {
  0% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 0; }
}

/* Quien pidio menos movimiento recibe menos movimiento: el orbe se queda
   quieto y respirando, y las chispas no salen. */
@media (prefers-reduced-motion: reduce) {
  .orbe-espera .orbe::before { animation: none; }
  .orbe-espera .chispa { display: none; }
  .orbe-espera .orbe { animation-duration: 6s; }
}

/* ---- Meta completada ---- */
.goal-done-stats { display: flex; gap: 10px; margin: 14px 0; }
.goal-done-stats > div { flex: 1; text-align: center; padding: 10px 6px; border-radius: 12px; background: var(--sunk-50); }
.goal-done-stats b { display: block; font-size: 22px; color: var(--text); }
.goal-done-stats span { font-size: 12px; color: var(--muted); }
.goal-done-list { list-style: none; padding: 0; margin: 0 0 12px; max-height: 160px; overflow: auto; color: var(--text); }
.goal-done-list li { padding: 4px 0; font-size: 14px; }
.goal-done-proof { font-style: italic; color: var(--text); margin-top: 6px; font-size: 13px; }
.goal-ready { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: rgba(52, 211, 153, .12); color: var(--text); font-weight: 600; }

:root[data-theme="light"] .mission-card { background: linear-gradient(128deg, color-mix(in srgb, var(--accent) 9%, #ffffff), #ffffff 65%); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .mission-card { background: linear-gradient(128deg, color-mix(in srgb, var(--accent) 9%, #ffffff), #ffffff 65%); } }
/* ============================================================
   CHAT — diseño de producto, no de demo. Pantalla completa, lectura
   cómoda (columna de 720px), las respuestas de YINN como texto limpio
   y tus mensajes en una burbuja discreta. Todo con tokens del tema:
   se ve igual de bien en claro y en oscuro.
   ============================================================ */
.voice-overlay.modo-chat {
  background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0; gap: 0; justify-content: flex-start;
}
.voice-overlay.modo-chat .orb { display: none; }
.voice-overlay.modo-chat .modo-switch {
  top: 12px; background: var(--bg-2); border: 1px solid var(--border);
  backdrop-filter: none; box-shadow: var(--elev-1);
}
.voice-overlay.modo-chat .modo-switch button { color: var(--muted); }
.voice-overlay.modo-chat .modo-switch button.on { background: var(--text); color: var(--bg-2); }
.voice-overlay.modo-chat .voice-close { top: 12px; right: 14px; }

.voice-overlay.modo-chat .chat-panel {
  width: 100%; max-width: none; height: 100%; flex: 1; gap: 0;
  padding: 64px 0 0; display: flex; flex-direction: column; min-height: 0;
}
.chat-top {
  display: flex; align-items: center; gap: 10px;
  width: min(720px, 100%); margin: 0 auto; padding: 6px 20px 12px;
}
.chat-top-av {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--grad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.chat-top b { display: block; font-family: var(--font-display); font-size: var(--fs-base); color: var(--text); line-height: 1.2; }
.chat-top small { color: var(--muted); font-size: var(--fs-xs); }
.chat-top small::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px; }
/* Las conversaciones (☰ y +) y su lista. */
.chat-top-txt { flex: 1; min-width: 0; }
.chat-top-txt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-top-acc { display: flex; gap: 6px; flex: none; }
.chat-top-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.chat-top-btn:hover { border-color: var(--border-hi); }
/* LAS CONVERSACIONES, AL LADO (dueño, 2026-10-03: «como contigo»).
   Compu: columna fija a la izquierda; el ☰ la esconde (convs-cerrado).
   Celular: cajón que sale desde la izquierda sobre el chat (convs-abierto). */
.chat-convs {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 3;
  width: 280px; display: flex; flex-direction: column; gap: 4px;
  padding: 14px 10px max(14px, env(safe-area-inset-bottom));
  padding-top: max(14px, env(safe-area-inset-top));
  background: var(--bg-2); border-right: 1px solid var(--border);
  transition: transform .25s var(--ease), visibility .25s;
}
.voice-overlay:not(.modo-chat) .chat-convs, .voice-overlay:not(.modo-chat) .chat-convs-fondo { display: none; }
.chat-convs-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 8px; }
.chat-convs-cab b { font-family: var(--font-display); font-size: var(--fs-base); }
.chat-convs-cerrar { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.chat-convs-cerrar:hover { background: var(--surface-2); color: var(--text); }
.chat-convs-nueva {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-bottom: 8px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 650; text-align: left; cursor: pointer;
}
.chat-convs-nueva span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #0b0b12; font-size: 14px; }
.chat-convs-nueva:hover { border-color: var(--border-hi); }
.chat-convs-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--border-hi) transparent; }
.chat-convs-nota { padding: 6px 10px; font-size: var(--fs-sm); }
.chat-conv { position: relative; display: flex; align-items: stretch; border-radius: 10px; }
.chat-conv:hover { background: var(--surface-2); }
.chat-conv-abrir { flex: 1; min-width: 0; display: grid; gap: 1px; text-align: left; padding: 9px 36px 9px 10px; border-radius: 10px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.chat-conv-abrir b { font-weight: 550; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-abrir small { color: var(--muted); font-size: var(--fs-xs); }
.chat-conv.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.chat-conv.on .chat-conv-abrir b { font-weight: 700; }
/* El borrar aparece al pasar el ratón (en el celular, siempre a la vista). */
.chat-conv-borrar { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; opacity: 0; }
.chat-conv:hover .chat-conv-borrar, .chat-conv-borrar:focus-visible { opacity: 1; }
.chat-conv-borrar:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
@media (hover: none) { .chat-conv-borrar { opacity: .7; } }
.chat-convs-fondo { display: none; }

@media (min-width: 900px) {
  /* El chat se corre a la derecha de la columna; el ✕ de la lista sobra
     (el ☰ hace lo mismo) pero se deja: es lo que la gente busca. */
  .voice-overlay.modo-chat:not(.convs-cerrado) .chat-panel { padding-left: 280px; }
  .voice-overlay.modo-chat.convs-cerrado .chat-convs { transform: translateX(-100%); visibility: hidden; }
}
@media (max-width: 899px) {
  .chat-convs { width: min(320px, 86vw); transform: translateX(-100%); visibility: hidden; box-shadow: var(--elev-2); z-index: 5; }
  .voice-overlay.modo-chat.convs-abierto .chat-convs { transform: none; visibility: visible; }
  .voice-overlay.modo-chat.convs-abierto .chat-convs-fondo {
    display: block; position: fixed; inset: 0; z-index: 4; background: rgba(0, 0, 0, .45);
  }
}

.voice-overlay.modo-chat .chat-hilo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0;
  -webkit-mask-image: none; mask-image: none;
  padding: 24px max(20px, calc((100% - 720px) / 2 + 20px)) 32px;
  gap: 22px; scrollbar-color: var(--border-hi) transparent;
}
.voice-overlay.modo-chat .chat-msg {
  max-width: 100%; font-size: var(--fs-base); line-height: 1.65; color: var(--text);
  animation: chatIn .2s var(--ease) both; box-shadow: none;
}
/* YINN: sin burbuja, como un documento que se escribe para ti. */
.voice-overlay.modo-chat .chat-msg.el {
  align-self: stretch; background: none; border: 0; border-radius: 0;
  padding: 0 0 0 40px; position: relative;
}
.voice-overlay.modo-chat .chat-msg.el::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: auto; width: 26px; height: 26px;
  border-radius: 50%; background: var(--grad); box-shadow: none;
}
/* Tú: burbuja discreta a la derecha. */
.voice-overlay.modo-chat .chat-msg.yo {
  align-self: flex-end; max-width: 78%; color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 18px 18px 6px 18px; padding: 10px 16px;
}
.voice-overlay.modo-chat .chat-msg.pensando { color: var(--muted); }
.voice-overlay.modo-chat .chat-vacio { color: var(--muted); font-size: var(--fs-base); max-width: 36ch; }
.voice-overlay.modo-chat .chat-vacio b { font-size: var(--fs-lg); margin-bottom: 8px; }

/* La caja de escribir: una píldora con el botón dentro. */
.voice-overlay.modo-chat .chat-form {
  width: min(720px, calc(100% - 24px)); margin: 0 auto 14px;
  margin-bottom: max(14px, env(safe-area-inset-bottom));
  padding: 6px 6px 6px 18px; align-items: flex-end; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--border-hi); border-radius: 26px;
  box-shadow: var(--elev-2);
}
.voice-overlay.modo-chat .chat-form:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), var(--elev-2);
}
.voice-overlay.modo-chat .chat-form textarea {
  color: var(--text); font-size: var(--fs-base); padding: 10px 0; min-height: 44px;
}
.voice-overlay.modo-chat .chat-form textarea::placeholder { color: var(--muted); opacity: 1; }
.chat-send-btn {
  flex: none; width: 40px; height: 40px; margin-bottom: 2px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--text); color: var(--bg-2);
  transition: transform .15s var(--ease), opacity .15s var(--ease);
}
.chat-send-btn:hover { transform: scale(1.06); }
.chat-send-btn:active { transform: scale(.94); }
.chat-send-btn:disabled { opacity: .35; cursor: default; transform: none; }
.chat-send-btn svg { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .voice-overlay.modo-chat .chat-hilo { padding: 18px 16px 24px; }
  .chat-top { padding: 4px 16px 10px; }
}

/* ============================================================
   YINN MONEY — solo tokens del tema: claro y oscuro legibles.
   ============================================================ */
/* min-width:0 + max-width:100%: las pestañas hacen scroll DENTRO de su
   barra; sin esto empujaban al contenedor y en móvil el lienzo crecía a 610px. */
#view:has(.money-tabs) { min-width: 0; }
/* El grid de #app dimensiona su columna por el ancho MÍNIMO de main; sin
   esto cualquier fila larga (como una barra con scroll) ensancha la página. */
#app > main.main { min-width: 0; }
.money-tabs { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; display: flex; gap: 4px; overflow-x: auto; padding: 4px; margin-bottom: var(--sp-4);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; scrollbar-width: none; }
.money-tabs::-webkit-scrollbar { display: none; }
.money-tabs button { flex: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm);
  font-weight: 600; padding: 9px 14px; border-radius: 10px; cursor: pointer; min-height: 38px; }
.money-tabs button.on { background: var(--text); color: var(--bg-2); }
#money-body > .card, #money-body > section, #money-body > .money-kpis { margin-bottom: var(--sp-4); }
#money-body h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); color: var(--text); }
.money-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-5); align-items: center; }
.money-big { display: block; font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.1; color: var(--text); margin: 4px 0; }
.money-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; color: var(--text); }
.money-row + .money-row { border-top: 1px solid var(--border); }
.money-row .num { text-align: right; white-space: nowrap; }
.money-row.pos b { color: var(--ok); } .money-row.neg b, .neg { color: var(--danger); }
.money-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.money-kpis .kpi b { display: block; font-size: var(--fs-xl); font-family: var(--font-display); color: var(--text); margin: 4px 0; }
.money-kpis .kpi .muted { font-size: var(--fs-xs); }
.money-kpis-inline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.money-kpis-inline b { display: block; font-size: var(--fs-lg); color: var(--text); }
.money-bar { height: 8px; border-radius: 99px; background: var(--sunk-60); overflow: hidden; margin: 8px 0; }
.money-bar.lg { height: 12px; }
.money-bar i { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
.money-alerts p { margin: 6px 0; padding: 10px 12px; border-radius: 10px; background: var(--sunk-50); color: var(--text); border-left: 3px solid var(--warn); }
.money-alerts p.alert-alto { border-left-color: var(--danger); }
.money-note { padding: 10px 12px; border-radius: 10px; background: var(--sunk-50); color: var(--text); margin: 8px 0; }
.money-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sunk-60); border: 1px solid var(--border); }
.money-seg button { border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 9px; cursor: pointer; }
.money-seg button.on { background: var(--bg-2); color: var(--text); box-shadow: var(--elev-1); }
.money-esc-det { margin: 10px 0 14px; }
.money-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text); }
.money-flow > b { font-size: var(--fs-lg); }
.money-flow .arrow, .arrow { color: var(--muted); }
.flow-step { display: inline-flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: var(--sunk-50); border: 1px solid var(--border); }
.flow-step small { color: var(--muted); font-size: var(--fs-xs); }
.money-steps { list-style: none; padding: 0; margin: 0; counter-reset: paso; }
.money-steps li { counter-increment: paso; padding-left: 34px; position: relative; }
.money-steps li::before { content: counter(paso); position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; background: var(--sunk-60); color: var(--text); }
.money-steps li.dim { opacity: .55; }
.mg-card .money-row h3 { margin: 0; }
.money-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
.cmp { padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--sunk-50); color: var(--text); }
.cmp.best { border-color: color-mix(in srgb, var(--ok) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent); }
.cmp-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.money-inline, .money-ask-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.money-inline label { flex: 1; min-width: 160px; }
.money-form, .money-sim { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
.money-form label, .money-sim label, .money-inline label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.money-form input, .money-form select, .money-sim input, .money-inline input, .money-ask-form input, .mf input, .mf select {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-hi); background: var(--bg-2); color: var(--text); font: inherit; min-height: 42px; }
.money-form .money-check, .money-sim .money-check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.money-form button, .money-sim button, .money-form-err { grid-column: 1 / -1; }
.money-form-err { color: var(--danger); min-height: 1em; font-size: var(--fs-sm); }
.money-data details summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-top: 8px; }
.money-data details[open] summary { margin-bottom: 10px; }
.money-ask-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.money-ask-chips .chip { cursor: pointer; border: 1px solid var(--border-hi); background: var(--bg-2); color: var(--text); }
.money-ask-form input { flex: 1; min-width: 200px; }
.money-ask-out { margin-top: 10px; color: var(--text); }
.money-ask-out p { margin: 0 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--sunk-50); line-height: 1.5; }
.money-row.sim .num b { font-size: var(--fs-base); }
.money-empty { border: 1px dashed var(--border-hi); }
.icon-btn.sm { width: 28px; height: 28px; min-height: 0; font-size: 12px; }
@media (max-width: 720px) {
  .money-hero { grid-template-columns: 1fr; gap: var(--sp-3); }
  .money-kpis { grid-template-columns: repeat(2, 1fr); }
  .money-kpis-inline { grid-template-columns: 1fr; }
  .money-compare, .money-form, .money-sim { grid-template-columns: 1fr; }
  .money-kpis .kpi b { font-size: var(--fs-lg); }
}

/* ---- Money: puerta de entrada, semana, cierre y configuración ---- */
.money-door { text-align: left; padding: var(--sp-6) var(--sp-5); }
.money-door h2 { font-family: var(--font-display); font-size: var(--fs-xl); margin: 6px 0 10px; color: var(--text); }
.money-door p { color: var(--muted); max-width: 46ch; margin: 0 0 var(--sp-4); line-height: var(--lh-body); }
.money-door .btn + .btn { margin-left: 8px; }
.money-close-cta { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.money-close-cta h3 { margin: 4px 0 !important; }
.money-close-cta p { margin: 0; }
.money-week h3 small { font-weight: 400; font-size: var(--fs-xs); margin-left: 6px; }
.pos-txt { color: var(--ok); }
.chip.warn { color: var(--warn); }
.money-list { margin: 0 0 12px; padding-left: 20px; color: var(--text); }
.money-list li { margin: 4px 0; }
.money-setup .su-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.money-setup .su-dots i { flex: 1; height: 4px; border-radius: 99px; background: var(--sunk-60); }
.money-setup .su-dots i.on { background: var(--grad); }
.money-setup .money-check { display: flex; gap: 8px; align-items: center; color: var(--text); margin: 8px 0 12px; }
.su-mini { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--sunk-50); border: 1px solid var(--border); }
@media (max-width: 720px) { .money-door .btn + .btn { margin: 8px 0 0; } .money-door .btn { width: 100%; } }

/* ---- Money: aprender en contexto (el "?"), editar y movimientos ---- */
.q-help { display: inline-grid; place-items: center; width: 20px; height: 20px; min-height: 0; padding: 0; margin-left: 4px;
  border-radius: 50%; border: 1px solid var(--border-hi); background: var(--bg-2); color: var(--accent); cursor: pointer;
  font: 700 12px/1 var(--font-body); vertical-align: middle; letter-spacing: 0; text-transform: none; }
.q-help:hover, .q-help:focus-visible { background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); outline: none; }
.q-demo { cursor: default; }
.money-help { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; font-weight: 400; }
.money-learn { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.money-learn h3 { margin-bottom: 4px !important; }
.money-learn p { margin: 0; max-width: 52ch; }
.money-intro p { margin: 0 0 8px; color: var(--text); line-height: var(--lh-body); }
.money-intro p.muted { color: var(--muted); }
.mg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ok-note { border-left: 3px solid var(--ok); }
.ok-note .btn { margin-top: 8px; }
.glos p { color: var(--text); line-height: var(--lh-body); }
.glos p.muted { color: var(--muted); }
.glos-item { border-bottom: 1px solid var(--border); padding: 8px 0; }
.glos-item summary { cursor: pointer; font-weight: 650; color: var(--text); }
.glos-item[open] summary { margin-bottom: 6px; }
.tx-list { margin-top: 10px; border-top: 1px solid var(--border); }
.money-row.tx .num { display: inline-flex; align-items: center; gap: 8px; }
.tope { margin: 6px 0 10px; }
.money-data .num { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* "Q4000 · quincenal · se suma solo (el 15 de octubre)" no cabe en una
   línea de celular: el texto baja de renglón y los botones no se salen. */
.money-data .money-row .num { white-space: normal; min-width: 0; }
.money-data .money-row > span:first-child { overflow-wrap: break-word; }

/* ============================================================
   YINN APRENDER — misma familia visual que Dinero.
   ============================================================ */
.lrn-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); min-width: 0; }
.lrn-head select { max-width: 100%; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-hi); background: var(--bg-2); color: var(--text); font: inherit; }
.lrn-title { margin: 0; overflow-wrap: anywhere; }
.lrn-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; margin-left: 4px; }
.lrn-blocks { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.lrn-blocks li { line-height: 1.45; }
.lrn-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lrn-alert { border-left: 3px solid var(--warn); }
.lrn-alert.alta { border-left-color: var(--danger); }
.lrn-door h3 { margin-top: 4px; }
.lrn-door-list { margin: 12px 0 16px; padding-left: 20px; display: grid; gap: 8px; }
.lrn-can { display: grid; gap: 10px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.lrn-can fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px 10px; margin: 0; min-width: 0; }
.lrn-can legend { padding: 0 6px; font-weight: 750; color: var(--text); }
.lrn-check { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; color: var(--text); line-height: 1.4; cursor: pointer; }
.lrn-check input { margin-top: 3px; flex: none; }
.lrn-setup input:not([type]), .lrn-setup #ls-name { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-hi); background: var(--bg-2); color: var(--text); font: inherit; }
.lrn-setup .chip.on, .money-ask-chips .chip.on { background: var(--text); color: var(--bg-2); border-color: var(--text); }
.lrn-review-top { display: flex; justify-content: flex-end; }
.lrn-flash { min-height: 140px; display: grid; place-items: center; gap: 12px; text-align: center; padding: 20px 12px; margin: 8px 0; border-radius: 14px; background: var(--sunk-50); overflow-wrap: anywhere; }
.lrn-front { font-size: var(--fs-lg, 1.25rem); font-weight: 750; color: var(--text); }
.lrn-back { font-size: var(--fs-md, 1.05rem); color: var(--accent); border-top: 1px dashed var(--border-hi); padding-top: 12px; width: 100%; }
.lrn-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.lrn-grades .btn { min-width: 0; padding-left: 4px; padding-right: 4px; }
@media (max-width: 480px) { .lrn-grades { grid-template-columns: repeat(2, 1fr); } }
/* La regla global de inputs (width:100%, padding) estira las casillas. */
.lrn-check input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 2px 0 0; border-radius: 4px; flex: 0 0 18px; accent-color: var(--accent); box-shadow: none; }
/* El menú inferior tenía 5 columnas fijas: con Aprender (6 secciones)
   la sexta caía en una segunda fila, encima del contenido. Ahora hay
   tantas columnas como secciones visibles (las escondidas no ocupan). */
@media (max-width: 900px) {
  .bottomnav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-left: 6px; padding-right: 6px; }
  .bottomnav a { min-width: 0; }
  .bottomnav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* 7 secciones en el menú de abajo (aprende y entrena a la vez). */
@media (max-width: 900px) {
  .bottomnav[data-n="7"] { gap: 0; padding-left: 2px; padding-right: 2px; }
  .bottomnav[data-n="7"] a { padding-left: 0; padding-right: 0; }
  .bottomnav[data-n="7"] a span { font-size: 10.5px; letter-spacing: -0.2px; }
}
/* ============================================================
   EL PASO DE TU PLAN, arriba de Entrenar y Aprender (la sección y el
   plan son el mismo camino), y el punto de "nuevo" en el menú: la
   sección que tu plan acaba de abrir, hasta que la visitas. Al dueño
   le costó encontrar Entrenar aunque se lo habían dicho.
   ============================================================ */
.plan-paso { position: relative; margin: 0 0 var(--sp-3); padding: 12px 14px 12px 18px; border-radius: 14px; border: 1px solid var(--border-hi); background: var(--sunk-50); overflow: hidden; }
.plan-paso::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); }
.plan-paso-k { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.plan-paso-t { margin-top: 4px; font-weight: 700; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.plan-paso-m { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }
.plan-paso .btn { margin-top: 10px; }
.quest .q-seccion { margin-top: 6px; }
.nav a.nuevo { position: relative; }
.nav a.nuevo::after { content: ""; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 2px var(--bg-2), 0 0 10px var(--accent-2); animation: nuevoPulso 1.6s ease-in-out infinite; }
@keyframes nuevoPulso { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .nav a.nuevo::after { animation: none; } }
/* En los pasos de armar Entrenar/Aprender, el botón no va pegado al último campo. */
.lrn-setup .modal-actions { margin-top: 16px; }
/* La casilla de "Sentí dolor" (y las de Dinero): la regla global de inputs la estiraba a un cuadro enorme. */
.money-check input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 0; border-radius: 4px; flex: 0 0 18px; accent-color: var(--accent); box-shadow: none; }
/* El botón del chat que lleva a donde te explicó (o a la meta que te abrió). */
.chat-ir { align-self: flex-start; margin: 2px 0 10px; }
/* ============================================================
   TABLERO DEL DUEÑO (#/dueno) — se lee en el teléfono de un vistazo:
   tres cifras, el camino con la mayor caída en rojo, y lo que falta.
   ============================================================ */
.dueno-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.dueno-kpi { min-width: 0; padding: 12px 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--sunk-50); }
.dueno-kpi .n { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 750; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.dueno-kpi .l { margin-top: 4px; font-size: var(--fs-sm); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.dueno-kpi .s { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.dueno-lectura { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; line-height: var(--lh-snug); }
.dueno-embudo .paso { margin-top: var(--sp-3); }
.dueno-embudo .fila, .dueno-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dueno-embudo .nom { min-width: 0; overflow-wrap: anywhere; }
.dueno-embudo .paso.caida .nom { color: var(--danger); font-weight: 700; }
.dueno-fila { padding: 9px 0; border-bottom: 1px solid var(--border); }
.dueno-fila:last-of-type { border-bottom: 0; }
.dueno-embudo .cuenta, .dueno-fila .cuenta { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dueno-alerta { border-left: 3px solid var(--danger); padding-left: 10px; }
.dueno-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.dueno-check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.dueno-check > b { flex: 0 0 14px; text-align: center; }
.dueno-check .mal { color: var(--danger); }
.dueno-check .ojo { color: var(--warn); }
.dueno-check .bien { color: var(--ok); }
.dueno-bien summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.dueno-opinion { padding: 10px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; line-height: var(--lh-snug); }
.dueno-opinion:last-child { border-bottom: 0; }
.dueno-opinion .conf { margin-bottom: 2px; }
.dueno-enlace { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-4); color: var(--text); text-decoration: none; border-color: var(--border-hi); }
.dueno-enlace > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dueno-enlace .flecha { flex: none; font-size: var(--fs-lg); color: var(--accent); }
@media (max-width: 360px) { .dueno-kpi .n { font-size: var(--fs-lg); } }
/* Es una pantalla de cifras: el compañero flotante no se sienta encima de ellas. */
:root[data-view="dueno"] .voice-fab, :root[data-view="dueno"] .comp-esquina { display: none; }
/* Lo que dijo Luna en la prueba de la IA del tablero. */
.dueno-cita { border-left: 3px solid var(--accent); padding-left: 10px; font-style: italic; overflow-wrap: anywhere; }

/* ============================================================
   PREMIUM — la píldora de arriba y la pantalla de planes.
   ============================================================ */
/* Siempre a la vista, en la esquina. Para quien no paga invita (degradado);
   para quien paga es su plan (sobria, con el ✦ en degradado). */
.premium-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 15px;
  border-radius: 99px; font-weight: 750; font-size: var(--fs-sm); letter-spacing: .02em;
  color: var(--on-accent); background: var(--grad); background-size: 180% 100%;
  box-shadow: 0 8px 24px -10px rgba(124, 131, 255, .7);
  text-decoration: none; white-space: nowrap; flex: none;
  transition: transform .18s, box-shadow .18s, background-position .6s;
}
.premium-pill:hover { background-position: 100% 0; transform: translateY(-1px); }
.premium-pill:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.premium-pill .pp-ico { font-size: 1.05em; line-height: 1; }
.premium-pill.pagando {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-hi);
  box-shadow: none;
}
.premium-pill.pagando .pp-ico { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.premium-pill.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-2); }
/* En el teléfono la esquina es estrecha: el chip del nombre cede su sitio
   (el nombre ya está en Yo) y en pantallas mínimas queda solo el ✦. */
@media (max-width: 520px) { .user-chip { display: none; } .premium-pill { padding: 0 13px; } }
@media (max-width: 350px) {
  .premium-pill .pp-txt { display: none; }
  .premium-pill { width: 42px; padding: 0; justify-content: center; }
}

.premium-page { max-width: 1080px; margin: 0 auto; }
.premium-hero { text-align: center; padding: 4px 4px 22px; }
.premium-kicker {
  display: inline-block; padding: 5px 13px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2);
  border: 1px solid var(--border-hi); background: var(--surface-2);
}
.premium-title {
  font-size: clamp(1.7rem, 5.6vw, 2.7rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 800;
  margin: 14px auto 10px; max-width: 19ch;
}
.premium-sub { color: var(--muted); max-width: 46ch; margin: 0 auto; line-height: 1.55; font-size: var(--fs-base); }
.premium-aviso {
  margin: 16px auto 0; max-width: 560px; padding: 12px 16px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border-hi);
  display: flex; gap: 10px; align-items: center; justify-content: center; line-height: 1.45;
}
.premium-spin {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid var(--border-hi); border-top-color: var(--accent-2); animation: spin 1s linear infinite;
}
.premium-estado {
  margin: 18px auto 0; max-width: 560px; padding: 14px 18px; border-radius: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border-hi); text-align: left;
}
.premium-estado-plan { font-weight: 800; font-size: var(--fs-md); margin: 2px 0; }
.premium-estado .btn { margin: 0; }

.planes-app {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch;
  margin-top: 14px; padding-top: 12px; /* sitio para la etiqueta que asoma arriba */
}
.plan-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 28px 20px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border-hi);
  backdrop-filter: blur(18px) saturate(1.2); box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
}
.plan-card:hover { transform: translateY(-3px); }
/* La destacada: borde en degradado (relleno sólido por dentro para que el
   degradado no se trasluzca) y un halo suave. */
.plan-card.destacada {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--card-solid), var(--card-solid)) padding-box, var(--grad) border-box;
  box-shadow: 0 26px 64px -30px rgba(124, 131, 255, .75), var(--shadow);
}
.plan-card.elegida { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-2), var(--shadow); }
.plan-card.tu-plan { border-color: var(--ok); }
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 99px; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  background: var(--grad); color: var(--on-accent); box-shadow: 0 6px 18px -8px rgba(124, 131, 255, .8);
}
.plan-badge.tuyo { background: var(--ok); color: var(--on-accent); }
.plan-nombre { font-size: var(--fs-md); font-weight: 750; margin: 0; letter-spacing: -.01em; }
.plan-precio { display: flex; align-items: baseline; gap: 4px; }
.plan-monto { font-size: 2.7rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.plan-card.destacada .plan-monto { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-periodo { color: var(--muted); font-weight: 650; }
.plan-nota { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.plan-lista { list-style: none; padding: 0; margin: 8px 0 4px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan-lista li { position: relative; padding-left: 28px; line-height: 1.45; font-size: var(--fs-sm); }
.plan-lista li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem; font-weight: 900;
  color: var(--on-accent); background: var(--grad);
}
.plan-cta { margin-top: 10px; min-height: 48px; font-weight: 750; }
/* El cuadro de tu plan no tiene botón: lo dice, sin invitar a elegirlo. */
.plan-actual {
  margin: 10px 0 0; min-height: 48px; display: grid; place-items: center;
  border-radius: 14px; border: 1px dashed var(--border-hi);
  color: var(--muted); font-weight: 650; font-size: var(--fs-sm);
}
.premium-metodos { margin: 20px auto 0; max-width: 560px; }
.premium-letra { max-width: 640px; margin: 24px auto 8px; text-align: center; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.premium-letra p { margin: 6px 0; }
@media (max-width: 900px) {
  .planes-app { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; row-gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { .plan-card:hover { transform: none; } }
/* Pantalla de venta: el compañero flotante no se sienta encima de los precios. */
:root[data-view="premium"] .voice-fab, :root[data-view="premium"] .comp-esquina { display: none; }

/* ---- El dinero de tu meta: lo que pide cada nivel y apartarlo en Dinero ---- */
.meta-dinero .md-kicker { color: var(--accent-2); font-size: var(--fs-xs); letter-spacing: 1.5px; font-weight: 800; margin-bottom: 8px; }
.meta-dinero h3 { margin: 0 0 6px; }
.md-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.md-total b { font-size: 30px; font-weight: 750; letter-spacing: -.5px; }
.md-total span { color: var(--muted); font-size: var(--fs-sm); }
.md-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.md-fila > span { min-width: 0; overflow-wrap: anywhere; }
.md-fila > b { white-space: nowrap; }
.md-fila b.ok { color: var(--ok); }
.md-niveles { display: grid; gap: 10px; margin: 14px 0; }
.md-nivel { border: 1px solid var(--border-hi); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.md-nivel.on { border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); }
.md-nivel-h { font-weight: 700; margin-bottom: 4px; }
.md-item { padding: 8px 0 0; margin-top: 8px; border-top: 1px dashed var(--border-hi); }
.md-item.off > .md-fila > span { text-decoration: line-through; color: var(--muted); }
.md-gratis { color: var(--ok); font-size: var(--fs-sm); margin-top: 3px; }
.md-ahora { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.md-aviso { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; color: var(--text); background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.md-dinero { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-hi); }
.md-dinero .bar { margin: 8px 0 4px; }
.md-dinero p { margin: 10px 0; }
.md-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.md-e { border: 1px solid var(--border-hi); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 8px; background: var(--surface-2); }
.md-e input, .md-e select { width: auto; min-width: 0; padding: 9px 11px; border-radius: 10px; }
.md-e-concepto { width: 100%; box-sizing: border-box; }
.md-e-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.md-e-precio { display: flex; align-items: center; gap: 6px; flex: 1 1 120px; min-width: 0; }
.md-e-precio input { flex: 1; width: 100%; }
.md-e-precio span { color: var(--muted); font-weight: 700; }
.md-e-meses { display: flex; align-items: center; gap: 6px; }
.md-e-meses input { width: 62px; }
.md-e-meses[hidden] { display: none; }
.md-e-incl { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; font-size: var(--fs-sm); cursor: pointer; }
.md-e-incl input { width: 20px; height: 20px; padding: 0; margin: 0; accent-color: var(--accent-2); }
.mg-de-meta { display: inline-block; margin: 2px 0 8px; color: var(--accent-2); font-size: var(--fs-sm); font-weight: 650; text-decoration: none; }
.mg-de-meta:hover { text-decoration: underline; }

/* ---- Aprender · el curso clase por clase (Premium) ---- */
.curso-kicker { color: var(--accent-2); font-size: var(--fs-xs); letter-spacing: 1.5px; font-weight: 800; margin-bottom: 8px; }
.curso-puerta h3, .curso-hoy h3 { margin: 0 0 8px; }
.curso-puerta p { margin: 0 0 12px; }
.curso-puerta .curso-mientras { margin: 16px 0 0; }
.curso-hoy { border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }
.curso-unidad h3 { margin: 0 0 4px; }
.curso-clases { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.curso-clase { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-hi); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.curso-clase:disabled { opacity: .55; cursor: default; }
.curso-clases li.hoy .curso-clase { border-color: var(--accent-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent); }
.curso-clases li.hecha .curso-dia { color: var(--ok); }
.curso-dia { flex: 0 0 auto; min-width: 46px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .5px; color: var(--muted); padding-top: 2px; }
.curso-t { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.curso-t .muted { font-size: var(--fs-sm); }
.curso-leccion h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.curso-obj { margin: 0 0 6px; }
.curso-texto p { margin: 0 0 12px; line-height: 1.6; white-space: pre-line; }
.curso-ejemplos { margin: 0; padding-left: 18px; display: grid; gap: 10px; }
.curso-ejemplos li > b { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.curso-ejemplos li > .muted { display: block; font-size: var(--fs-sm); margin-top: 2px; }
.curso-ej { padding: 12px 0; border-top: 1px dashed var(--border-hi); }
.curso-ej:first-of-type { border-top: 0; }
.curso-enun { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.curso-ops { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.curso-ops .chip { white-space: normal; color: var(--text); }
.curso-op { white-space: normal; text-align: left; line-height: 1.35; }
.task-row.serie .task-dot { color: var(--accent-2); font-weight: 800; }
.plan-impuestos { margin: -6px 0 10px; font-size: var(--fs-xs); color: var(--muted); }
.money-dist { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; margin: 6px 0 10px; }
.money-dist i { display: block; min-width: 4px; }
.money-dist-ley { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.money-dist-ley li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.money-dist-ley .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.d-necesidades { background: var(--accent); }
.d-deudas { background: var(--warn); }
.d-proteccion { background: #5aa9e6; }
.d-colchon { background: var(--ok); }
.d-inversion { background: var(--accent-2); }
.d-metas { background: #c98bf0; }
.d-gustos { background: color-mix(in srgb, var(--muted) 70%, transparent); }
.d-sin_destino { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--muted) 55%, transparent) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 40%, transparent); }
.money-mid { display: block; font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.15; color: var(--text); margin: 4px 0; }
.spend-hoy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: end; margin-top: 4px; }
.spend-bar { position: relative; overflow: visible; }
.spend-bar i { border-radius: 99px; }
.spend-hoy-mark { position: absolute; top: -3px; width: 2px; height: 14px; border-radius: 2px; background: var(--text); opacity: .55; transform: translateX(-1px); }
.money-bar.rapido i { background: var(--warn); }
.money-bar.agotado i { background: var(--danger); }
.spend-det { font-size: var(--fs-sm); margin: 2px 0 6px; }
.spend-cats { margin-top: 8px; }
.spend-cat .money-bar { height: 6px; margin: 2px 0 6px; }
.spend-sug { margin-top: 8px; }
.spend-sug summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.spend-sug[open] summary { margin-bottom: 8px; }
.spend-sug .btn { margin-top: 8px; }
.grow-res { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.grow-hitos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.grow-hitos > div { padding: 8px; border-radius: 10px; background: var(--sunk-60); }
.grow-hitos b { display: block; font-size: var(--fs-sm); }
.money-reparte.destacada { border-color: color-mix(in srgb, var(--accent-2) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 35%, transparent), var(--shadow); }
.reparte-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.reparte-form label { flex: 1 1 160px; margin: 0; }
.reparte-resto { border-top: 1px dashed var(--border); margin-top: 4px; }
.reparte-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.money-asesor { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.asesor-titular { font-weight: 650; font-size: var(--fs-base); line-height: 1.45; margin: 6px 0 10px; }
.asesor-acciones { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 10px; }
.asesor-acciones li { line-height: 1.45; }
.asesor-acciones .btn { margin-top: 6px; }
.asesor-pregunta { font-style: italic; margin: 8px 0; }
.asesor-nota { font-size: var(--fs-xs); margin-top: 8px; }
.rinde-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.comparador .money-seg { margin: 8px 0; }
.tasas-lista { margin-top: 8px; }
.tasa-row { padding: 10px 0; border-bottom: 1px solid var(--border); display: grid; gap: 4px; }
.tasa-row:last-child { border-bottom: 0; }
.tasa-row.dim { opacity: .6; }
.tasa-pct { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text); }
.tasa-fuente { display: block; font-size: var(--fs-xs); }
.tasa-fuente a { color: var(--accent-2); }
.tasas-sin { font-size: var(--fs-xs); margin-top: 8px; }
.interes-exp { margin: 10px 0 8px; }
.interes-exp summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.interes-exp ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: var(--fs-sm); line-height: 1.5; }
.money-tip { margin: 6px 0; padding: 8px 10px; border-radius: 10px; font-size: var(--fs-sm); line-height: 1.45; }
.money-tip.bien { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.money-tip.alerta { background: color-mix(in srgb, var(--warn) 15%, transparent); }
.money-tip.consejo { background: color-mix(in srgb, var(--accent-2) 9%, transparent); }
.sus-row { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--border-hi); }
.sus-row:first-of-type { border-top: 0; }
.sus-row.cancelada { opacity: .6; }
.sus-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sus-top > b { min-width: 0; overflow-wrap: anywhere; }
.sus-top .num { white-space: nowrap; }
.sus-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.curso-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.curso-form input { flex: 1 1 160px; min-width: 0; }
.curso-form.abierta { flex-direction: column; align-items: stretch; }
.curso-form.abierta .btn { align-self: flex-start; }
.curso-fb { margin: 6px 0 4px; padding: 10px 12px; border-radius: 10px; }
.curso-fb p { margin: 0 0 6px; overflow-wrap: anywhere; }
.curso-fb p:last-child { margin-bottom: 0; }
.curso-fb.bien { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.curso-fb.mal { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.curso-fb.casi { background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.curso-ejemplo { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--accent-2); background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
.curso-ejemplo p { margin: 0 0 6px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.curso-ejemplo p:last-child { margin-bottom: 0; }
.curso-clave { margin: 4px 0 0; font-weight: 700; }
.curso-pasos, .curso-resumen { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.curso-tarjetas { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.curso-tarjetas li > b, .curso-tarjetas li > .muted { display: block; overflow-wrap: anywhere; }

/* ---- Lo que alguien cuenta de cómo está: si es grave, se queda en pantalla ---- */
.animo-grave { white-space: pre-line; line-height: 1.6; margin: 10px 0 16px; }
.animo-grave a, .chat-msg.el a { color: var(--accent-2); font-weight: 700; text-decoration: underline; overflow-wrap: anywhere; }

/* ---- Editar y borrar lo tuyo: hábitos, tarjetas de repaso ---- */
.habit-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lrn-todas > summary { cursor: pointer; list-style: none; }
.lrn-todas > summary::-webkit-details-marker { display: none; }
.lrn-todas .curso-tarjetas li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lrn-todas .curso-tarjetas li > span { min-width: 0; }
.lrn-todas .curso-tarjetas li > span > b, .lrn-todas .curso-tarjetas li > span > .muted { display: block; overflow-wrap: anywhere; }
.lrn-review-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ============ AGENDA — un calendario de verdad (2026-10-01) ============
   "Hazla como una agenda real de calendario, similar a la de Google pero
   con nuestro toque": rejilla de horas, bloques del largo de cada cita,
   línea del ahora, vistas Día / 3 días / Semana / Mes. Los colores de las
   citas son un tinte del fondo (cristal YINN), con su barra de color. */
:root[data-view="agenda"] { --panel-rgb: 56, 189, 248; --panel-2-rgb: 124, 131, 255; }
:root { --agc-tinte: 24%; --agc-linea: rgba(150, 158, 175, .15); --agc-linea-2: rgba(150, 158, 175, .065); --agc-ahora: #ff5a5f; }
.c-indigo { --ev: #7c83ff; } .c-cielo { --ev: #38bdf8; } .c-menta { --ev: #34d399; } .c-sol { --ev: #fbbf24; }
.c-coral { --ev: #fb7185; } .c-uva { --ev: #c084fc; } .c-grafito { --ev: #94a3b8; } .c-google { --ev: #5b9cf6; }
/* En claro los tonos se oscurecen: la barra y el texto se leen sobre blanco. */
:root[data-theme="light"] { --agc-tinte: 14%; --agc-linea: rgba(23, 28, 45, .11); --agc-linea-2: rgba(23, 28, 45, .05); --agc-ahora: #e5383b; }
:root[data-theme="light"] .c-indigo { --ev: #4f46e5; } :root[data-theme="light"] .c-cielo { --ev: #0284c7; } :root[data-theme="light"] .c-menta { --ev: #059669; }
:root[data-theme="light"] .c-sol { --ev: #b45309; } :root[data-theme="light"] .c-coral { --ev: #e11d48; } :root[data-theme="light"] .c-uva { --ev: #9333ea; }
:root[data-theme="light"] .c-grafito { --ev: #64748b; } :root[data-theme="light"] .c-google { --ev: #1a73e8; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --agc-tinte: 14%; --agc-linea: rgba(23, 28, 45, .11); --agc-linea-2: rgba(23, 28, 45, .05); --agc-ahora: #e5383b; }
  :root:not([data-theme="dark"]) .c-indigo { --ev: #4f46e5; } :root:not([data-theme="dark"]) .c-cielo { --ev: #0284c7; } :root:not([data-theme="dark"]) .c-menta { --ev: #059669; }
  :root:not([data-theme="dark"]) .c-sol { --ev: #b45309; } :root:not([data-theme="dark"]) .c-coral { --ev: #e11d48; } :root:not([data-theme="dark"]) .c-uva { --ev: #9333ea; }
  :root:not([data-theme="dark"]) .c-grafito { --ev: #64748b; } :root:not([data-theme="dark"]) .c-google { --ev: #1a73e8; }
}
.agc-ev, .agc-barra, .agc-m-ev, .ag-hoy-ev, .ag-hoy-todo { --ev-fondo: color-mix(in srgb, var(--ev) var(--agc-tinte), var(--bg-2)); }

/* ---- la barra de arriba ---- */
.agc { padding: 0; overflow: hidden; }
.agc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 14px 16px 12px; border-bottom: 1px solid var(--agc-linea); }
.agc-bar-a, .agc-bar-b { display: flex; align-items: center; gap: 8px; min-width: 0; }
.agc-titulo { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.3px; margin: 0 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-hoy-btn { border-radius: 99px; }
.agc-flecha, .agc-mas { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; line-height: 1; padding: 0; }
.agc-mas { font-size: 18px; }
.agc-vistas { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--sunk-60); border: 1px solid var(--border); }
.agc-vistas button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 650; padding: 6px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.agc-vistas button:hover { color: var(--text); }
.agc-vistas button[aria-selected="true"] { background: var(--bg-2); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.agc-nueva { border-radius: 99px; gap: 5px; }
.agc-nueva span:first-child { font-size: 19px; line-height: 1; font-weight: 500; }
.agc-cuerpo { position: relative; }
.agc-cargando { padding: 48px 16px; text-align: center; }

/* ---- la rejilla: días y "todo el día" pegados arriba, horas a la izquierda ---- */
.agc-scroll { --agc-gut: 58px; position: relative; overflow-y: auto; overflow-x: hidden; height: 70vh; overscroll-behavior: contain; scrollbar-width: thin; }
.agc-top { position: sticky; top: 0; z-index: 4; background: linear-gradient(var(--card-solid), var(--card-solid)), var(--bg-2); border-bottom: 1px solid var(--agc-linea); box-shadow: 0 6px 14px -12px rgba(0, 0, 0, .5); }
.agc-cab { display: grid; grid-template-columns: var(--agc-gut) repeat(var(--n), minmax(0, 1fr)); padding: 8px 0 6px; }
.agc-d { display: grid; justify-items: center; gap: 3px; background: none; border: 0; color: var(--text); cursor: pointer; font: inherit; padding: 2px 0; min-width: 0; -webkit-tap-highlight-color: transparent; }
.agc-d small { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.agc-d b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: var(--fs-md); font-weight: 650; transition: background .15s; font-variant-numeric: tabular-nums; }
.agc-d:hover b { background: var(--sunk-60); }
.agc-d.pasado b { color: var(--muted); }
.agc-d.hoy small { color: var(--accent); }
.agc-d.hoy b, .agc-d.hoy:hover b { background: var(--accent); color: var(--on-accent); }
.agc-tira { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 8px 6px 4px; }
.agc-tira .agc-d { position: relative; padding: 2px 0 10px; }
.agc-tira .agc-d.sel:not(.hoy) b { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 65%, transparent); }
.agc-tira .agc-d i { position: absolute; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); }

/* todo el día: barras que cruzan los días, y lo del plan sin hora */
.agc-todo { display: grid; grid-template-columns: var(--agc-gut) repeat(var(--n), minmax(0, 1fr)); grid-auto-rows: minmax(22px, auto); row-gap: 3px; padding: 2px 0 6px; }
.agc-todo-l { grid-column: 1; align-self: start; font-size: 10px; line-height: 1.15; color: var(--muted); text-align: right; padding: 4px 8px 0 0; }
.agc-barra { min-width: 0; margin: 0 2px; padding: 3px 8px; border-radius: 6px; border: 0; text-align: left; font: inherit; font-size: var(--fs-xs); font-weight: 650; color: var(--text); background: var(--ev-fondo); box-shadow: inset 3px 0 0 var(--ev); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.agc-x { min-width: 0; margin: 0 2px; padding: 3px 8px; border-radius: 6px; border: 1px dashed var(--border-hi); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-xs); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-decoration: none; }
.agc-x.tarea { color: var(--text); }
.agc-x small { color: var(--danger); font-size: 10px; }
.agc-x.mas { border-style: solid; text-align: center; color: var(--text); }
.agc-x.fila { display: block; width: 100%; margin: 6px 0; padding: 10px 12px; font-size: var(--fs-sm); border-radius: 10px; white-space: normal; }
.agc-vacio { margin: 0; padding: 6px 12px 8px; font-size: var(--fs-xs); color: var(--muted); text-align: center; }

/* las horas */
.agc-rejilla { position: relative; display: grid; grid-template-columns: var(--agc-gut) minmax(0, 1fr); }
.agc-horas { position: relative; }
.agc-hr { position: absolute; right: 8px; transform: translateY(-50%); font-size: 10.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.agc-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.agc-col { position: relative; border-left: 1px solid var(--agc-linea); cursor: cell;
  background-image: linear-gradient(to bottom, var(--agc-linea) 1px, transparent 1px), linear-gradient(to bottom, var(--agc-linea-2) 1px, transparent 1px);
  background-size: 100% var(--agc-h), 100% var(--agc-h); background-position: 0 0, 0 calc(var(--agc-h) / 2); }
.agc-col.hoy { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }
.agc-col.pasado { cursor: default; }

/* las citas */
.agc-ev { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden; padding: 3px 6px 3px 9px;
  border: 0; border-radius: 7px; text-align: left; font: inherit; color: var(--text); background: var(--ev-fondo);
  box-shadow: inset 3px 0 0 var(--ev), 0 0 0 1px var(--bg-2); cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition: box-shadow .15s, opacity .15s; }
.agc-ev:hover { box-shadow: inset 3px 0 0 var(--ev), 0 0 0 1px var(--bg-2), 0 8px 20px -10px rgba(0, 0, 0, .55); z-index: 2; }
.agc-ev-t { max-width: 100%; font-size: var(--fs-xs); font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agc-ev:not(.corto) .agc-ev-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.agc-ev-h { font-size: 10.5px; font-weight: 500; color: color-mix(in srgb, var(--text) 72%, transparent); white-space: nowrap; }
.agc-ev-l { max-width: 100%; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-ev.corto { flex-direction: row; align-items: center; padding-top: 0; padding-bottom: 0; }
.agc-ev.pasada { opacity: .58; }
.agc-ev.ahora { box-shadow: inset 3px 0 0 var(--ev), 0 0 0 1px var(--bg-2), 0 0 0 2.5px color-mix(in srgb, var(--ev) 55%, transparent); }
.agc-ev.choca::after { content: "⚠"; position: absolute; top: 2px; right: 4px; font-size: 10px; color: var(--warn); }
.agc-asa { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; cursor: ns-resize; }
.agc-asa::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 20px; height: 3px; margin-left: -10px; border-radius: 3px; background: color-mix(in srgb, var(--ev) 75%, transparent); opacity: 0; transition: opacity .15s; }
.agc-ev:hover .agc-asa::after, .agc-ev.arrastrando .agc-asa::after { opacity: 1; }
.agc-ev.arrastrando { z-index: 6; opacity: .96; cursor: grabbing; transform: scale(1.02); box-shadow: inset 3px 0 0 var(--ev), 0 0 0 2px var(--ev), 0 18px 36px -12px rgba(0, 0, 0, .6); }
body.agc-arrastrando { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.agc-rec { position: absolute; z-index: 1; overflow: hidden; padding: 0 6px; border-radius: 6px; border: 1px dashed color-mix(in srgb, var(--warn) 65%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, var(--bg-2)); color: var(--text); font: inherit; font-size: 10.5px; text-align: left; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.agc-ahora { position: absolute; left: -1px; right: 0; height: 2px; background: var(--agc-ahora); z-index: 3; pointer-events: none; }
.agc-ahora::before { content: ""; position: absolute; left: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--agc-ahora); }
@keyframes agcDer { from { opacity: .2; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes agcIzq { from { opacity: .2; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.agc-entra-der { animation: agcDer .22s cubic-bezier(.2, .8, .2, 1) both; }
.agc-entra-izq { animation: agcIzq .22s cubic-bezier(.2, .8, .2, 1) both; }

/* ---- el mes ---- */
.agc-mes { display: flex; flex-direction: column; height: 70vh; }
.agc-mes-cab { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 8px 0 6px; border-bottom: 1px solid var(--agc-linea); }
.agc-mes-cab span { text-align: center; font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; font-weight: 650; letter-spacing: .05em; }
.agc-mes-rej { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); }
.agc-m { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 4px 3px; border-right: 1px solid var(--agc-linea); border-bottom: 1px solid var(--agc-linea); cursor: pointer; outline-offset: -2px; }
.agc-m:nth-child(7n) { border-right: 0; }
.agc-m:hover { background: var(--sunk-50); }
.agc-m.fuera { background: var(--sunk-50); }
.agc-m.fuera .agc-m-n { color: var(--muted); opacity: .75; }
.agc-m-n { align-self: center; display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.agc-m.hoy .agc-m-n { background: var(--accent); color: var(--on-accent); }
.agc-m-ev { display: block; min-width: 0; flex: none; padding: 1px 5px; border-radius: 4px; font-size: 10.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.agc-m-ev i { font-style: normal; font-weight: 700; margin-right: 3px; }
.agc-m-ev:not(.todo)::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ev); margin-right: 4px; vertical-align: 1px; }
.agc-m-ev.todo { background: var(--ev-fondo); box-shadow: inset 2px 0 0 var(--ev); font-weight: 650; }
.agc-m-mas { font-size: 10px; color: var(--muted); padding: 0 5px; flex: none; }
.agc-m-x { font-size: 15px; line-height: .5; color: var(--accent-2); text-align: center; letter-spacing: 2px; }

/* ---- abajo: hablarle, traer tu Google ---- */
.agc-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 14px; }
.agc-pie-txt { display: grid; gap: 4px; flex: 1 1 320px; font-size: var(--fs-sm); }
.agc-pie-acc { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- las hojas (en el teléfono suben desde abajo) ---- */
@keyframes agcSube { from { transform: translateY(48px); opacity: .5; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
  .modal-overlay.agc-hoja { place-items: end center; padding: 0; }
  .modal-overlay.agc-hoja .modal-card { width: 100%; max-height: 90vh; border-radius: 22px 22px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); animation: agcSube .24s cubic-bezier(.2, .8, .2, 1) both; }
}
.agc-det-cab { display: flex; align-items: center; gap: 12px; }
.agc-punto { width: 14px; height: 14px; flex: none; border-radius: 4px; background: var(--ev); }
.agc-det .modal-title { margin: 0; overflow-wrap: anywhere; }
.agc-det-cuando { margin: 6px 0 12px 26px; color: var(--muted); font-size: var(--fs-sm); }
.agc-det-fila { display: flex; gap: 12px; align-items: baseline; margin: 8px 0; font-size: var(--fs-sm); }
.agc-det-fila a { color: var(--accent-2); overflow-wrap: anywhere; }
.agc-det-notas { white-space: pre-wrap; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--sunk-60); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.agc-det-g { font-size: var(--fs-xs); color: var(--muted); margin: 10px 0 14px; }
.agc-form { display: grid; gap: 12px; }
.agc-form label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); color: var(--muted); }
.agc-form input, .agc-form select, .agc-form textarea { padding: 10px 12px; border-radius: 10px; min-height: 42px; background: var(--bg-2); border-color: var(--border-hi); }
.agc-form .agc-f-titulo { font-size: var(--fs-lg); font-weight: 650; border: 0; border-bottom: 2px solid var(--border-hi); border-radius: 0; background: transparent; padding: 8px 2px; color: var(--text); }
.agc-form .agc-f-titulo:focus { border-bottom-color: var(--accent); box-shadow: none; }
.agc-form [hidden] { display: none; }
.agc-f-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agc-form .agc-f-sw { flex-direction: row; align-items: center; gap: 10px; color: var(--text); cursor: pointer; width: max-content; font-size: var(--fs-base); }
.agc-form .agc-f-sw input { appearance: none; -webkit-appearance: none; position: relative; width: 42px; height: 24px; min-height: 0; padding: 0; border-radius: 99px; background: var(--sunk-60); border: 1px solid var(--border-hi); cursor: pointer; transition: background .15s; }
.agc-form .agc-f-sw input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.agc-form .agc-f-sw input:checked { background: var(--accent); border-color: var(--accent); }
.agc-form .agc-f-sw input:checked::after { transform: translateX(18px); background: #fff; }
.agc-f-colores { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.agc-f-colores legend { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 8px; padding: 0; }
.agc-form .agc-sw { position: relative; flex-direction: row; cursor: pointer; }
.agc-form .agc-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.agc-sw span { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--ev); box-shadow: 0 0 0 2px var(--bg-2); transition: transform .12s, box-shadow .12s; }
.agc-sw input:checked + span { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--ev); transform: scale(1.06); }
.agc-sw input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; }
.agc-sw .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.agc-menu { display: grid; gap: 8px; margin: 10px 0 14px; }
.agc-menu-op { display: grid; gap: 3px; text-align: left; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--border); background: var(--sunk-60); color: var(--text); font: inherit; cursor: pointer; }
.agc-menu-op:hover { border-color: var(--border-hi); }
.agc-menu-op small { color: var(--muted); font-size: var(--fs-sm); }
.agc-pasos { margin: 10px 0 10px 20px; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.agc-pasos a, .agc-archivo summary { color: var(--accent-2); }
.agc-g-form { display: flex; gap: 8px; }
.agc-g-form input { min-width: 0; flex: 1; padding: 10px 12px; border-radius: 10px; font-size: var(--fs-sm); }
.agc-nota { font-size: var(--fs-xs); margin: 10px 0; }
.agc-archivo { margin: 8px 0; font-size: var(--fs-sm); }
.agc-archivo summary { cursor: pointer; }
.agc-archivo input[type="file"] { padding: 8px; font-size: var(--fs-sm); }
.agc-sub { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 14px 0 6px; }
.agc-fuente { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sunk-60); margin: 6px 0; }
.agc-fuente > div:first-child { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.agc-fuente-acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.agc-plat { padding: 12px 14px; border-radius: 13px; background: var(--sunk-60); margin: 8px 0; }
.agc-plat p { margin: 4px 0 10px; font-size: var(--fs-sm); }
.agc-ejemplos { margin: 8px 0 12px 18px; display: grid; gap: 6px; }

/* ---- la tarjeta de Hoy ---- */
.ag-hoy-lista { display: grid; gap: 6px; margin-top: 10px; }
.ag-hoy-ev { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 12px; background: var(--ev-fondo); box-shadow: inset 3px 0 0 var(--ev); color: var(--text); text-decoration: none; }
.ag-hoy-ev.ahora { box-shadow: inset 3px 0 0 var(--ev), 0 0 0 1.5px color-mix(in srgb, var(--ev) 60%, transparent); }
.ag-hoy-h { min-width: 64px; font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ag-hoy-t { display: grid; gap: 1px; min-width: 0; }
.ag-hoy-t b, .ag-hoy-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-hoy-t small { color: var(--muted); font-size: var(--fs-xs); }
.ag-hoy-todo { display: inline-flex; gap: 6px; align-items: baseline; margin: 8px 6px 0 0; padding: 5px 10px; border-radius: 8px; background: var(--ev-fondo); box-shadow: inset 3px 0 0 var(--ev); color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 650; }
.ag-hoy-todo small { color: var(--muted); font-weight: 500; }
.ag-hoy-mas { font-size: var(--fs-sm); color: var(--accent-2); text-decoration: none; padding: 2px 4px; }
.ag-ya { color: var(--accent-2); font-weight: 700; }

/* En la agenda, el compañero de voz se hace chico: no tapa las citas. */
:root[data-view="agenda"] .voice-fab { width: 150px; height: 150px; }
@media (max-width: 900px) { :root[data-view="agenda"] .voice-fab { width: 86px; height: 86px; bottom: 82px; } }

/* ---- teléfono ---- */
@media (max-width: 640px) {
  .agc-bar { padding: 10px 10px 10px; gap: 8px; }
  .agc-bar-a, .agc-bar-b { width: 100%; }
  .agc-titulo { order: -1; flex: 1; margin: 0 0 0 4px; font-size: var(--fs-md); }
  .agc-vistas { flex: 1; }
  .agc-vistas button { flex: 1; padding: 6px 2px; }
  .agc-nueva { width: 36px; height: 36px; min-height: 0; padding: 0; }
  .agc-nueva-t { display: none; }
  .agc-scroll { --agc-gut: 46px; }
  .agc-cab .agc-d b { width: 30px; height: 30px; font-size: var(--fs-base); }
  .agc-cab .agc-d small { font-size: 10px; letter-spacing: 0; }
  .agc-ev { padding: 2px 4px 2px 7px; border-radius: 6px; }
  .agc-ev-t { font-size: 11px; }
  .agc-m { padding: 3px 2px; }
  .agc-m-ev { font-size: 9.5px; padding: 0 3px; }
  .agc-m-ev i { display: none; }
  .agc-pie-acc { width: 100%; }
  .agc-pie-acc .btn { flex: 1 1 auto; }
  .agc-f-fila { grid-template-columns: 1fr; }
  .agc-f-fila.agc-f-horas { grid-template-columns: 1fr 1fr; }
}

/* ============ TUS PAGOS FIJOS (recibos con prueba, suscripciones que se cobran solas) ============ */
.pago-row { padding: 10px 12px; border-radius: 12px; background: var(--sunk-60); margin: 8px 0; display: grid; gap: 4px; }
.pago-row.atrasado { box-shadow: inset 3px 0 0 var(--warn); }
.pago-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pago-top b { overflow-wrap: anywhere; }
.pago-top .num { display: flex; align-items: center; gap: 8px; flex: none; }
.pago-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pago-sub { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 14px 0 6px; }
.np-motivos { display: grid; gap: 4px; margin: 4px 0 6px; }
.np-motivos .money-check { display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--text); padding: 8px 10px; border-radius: 10px; background: var(--sunk-60); cursor: pointer; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 600; }
.np-motivos .money-check:has(input:checked) { box-shadow: inset 0 0 0 1px var(--accent); }
.money-check input[type="radio"] { width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 0; flex: 0 0 18px; accent-color: var(--accent); box-shadow: none; }
.np-fecha[hidden] { display: none; }
@media (max-width: 520px) { .pago-top { flex-wrap: wrap; } }

/* Tu plan con IA (Dinero → Presupuesto) */
.money-plan-ia h3 { margin: 6px 0 4px; }
.pdi-sub { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 14px 0 6px; }
.pdi-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pdi-lista li { padding: 8px 10px; border-radius: 10px; background: var(--sunk-60); line-height: 1.4; }
.pdi-lista li.ok span { color: var(--ok); font-weight: 800; }
.pdi-lista li.warn span { color: var(--warn); font-weight: 800; }
.pdi-niveles { margin: 4px 0 10px; }
.pdi-pasos { padding-left: 0; list-style: none; margin: 0; display: grid; gap: 8px; }
.pdi-pasos li { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--sunk-60); }
.pdi-pasos li.hecho b { text-decoration: line-through; opacity: .7; }
.pdi-pasos li .btn { justify-self: start; }
.pdi-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--text); font-weight: 400; }
.pdi-check input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 2px 0 0; flex: 0 0 18px; accent-color: var(--accent); box-shadow: none; }
.pdi-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.pdi-quedan { margin: 8px 0 0; font-size: var(--fs-sm); }

/* Cambiar de plan: lo que pagas hoy */
.cambio-plan .money-row { padding: 6px 0; }
.cambio-plan .cambio-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; font-size: 1.08em; }

/* Un botón que se ve como enlace (acciones secundarias) */
.btn-link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; }

/* ---------- Tu asesor de dinero (plan con IA, 2026-10-02) ---------- */
.d-trabajo { background: #f59e0b; }
.pro-head { display: flex; gap: 16px; align-items: center; }
.pro-head-txt { min-width: 0; flex: 1; }
.pro-nota { --n: 0; flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--card-solid) 78%, transparent 80% 100%), conic-gradient(var(--accent-2) calc(var(--n) * 1%), var(--border) 0); }
.pro-nota b { font-family: var(--font-display); font-size: 26px; line-height: 1; }
.pro-nota small { font-size: var(--fs-xs); color: var(--muted); }
.pro-nota-txt { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.pro-titular { font-weight: 650; font-size: var(--fs-md); line-height: 1.4; margin: 4px 0 0; }
.pro-salud { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.pro-chip { font-size: var(--fs-xs); padding: 4px 9px; border-radius: 99px; background: var(--sunk-60); border: 1px solid var(--border); }
.pro-chip.ok { color: var(--ok); }
.pro-chip.no { color: var(--warn); }
.pro-movs { display: grid; gap: 10px; }
.pro-mov { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(var(--panel-rgb), .14), rgba(var(--panel-2-rgb), .06)); border: 1px solid var(--border-hi); }
.pro-n { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--grad); color: var(--on-accent); }
.pro-mov-txt { min-width: 0; flex: 1; }
.pro-mov-txt p { margin: 6px 0 0; line-height: 1.45; }
.pro-mov-t { font-size: var(--fs-md); }
.pro-monto { font-family: var(--font-display); font-size: 24px; margin-top: 4px; }
.pro-monto small { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--muted); }
.pro-leccion { margin-top: 8px; }
.pro-leccion summary { cursor: pointer; color: var(--accent-2); font-weight: 600; font-size: var(--fs-sm); }
.pro-leccion p { padding: 10px 12px; border-radius: 12px; background: var(--sunk-60); }
.pro-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.pdi-lista li.no span { color: var(--danger); font-weight: 800; }
.pro-niveles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pro-nivel { display: grid; gap: 8px; text-align: left; padding: 12px; border-radius: 14px; background: var(--sunk-60); border: 1px solid var(--border); color: var(--text); cursor: pointer; font: inherit; }
.pro-nivel.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pro-nivel-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pro-nivel .money-dist { margin: 0; }
.pro-anio { font-size: var(--fs-sm); color: var(--muted); }
.pro-anio b { color: var(--text); }
@media (max-width: 640px) { .pro-niveles { grid-template-columns: 1fr; } .pro-nota { width: 72px; height: 72px; } }
.pro-chat { margin-top: 16px; padding: 14px; border-radius: 16px; background: var(--sunk-50); border: 1px solid var(--border); }
.pro-chat-log { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; }
.pro-q, .pro-a { margin: 0; padding: 9px 12px; border-radius: 14px; line-height: 1.45; max-width: 88%; }
.pro-q { justify-self: end; background: rgba(var(--panel-rgb), .22); }
.pro-a { justify-self: start; background: var(--sunk-75); }
.pro-a.pensando { color: var(--muted); font-style: italic; }
.pro-sug { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.pro-chat-form { display: flex; gap: 8px; margin-top: 10px; }
.pro-chat-form input { flex: 1; min-width: 0; }

/* Aviso de "no es asesoría" junto al plan y en Entrenar (revisión para las tiendas). */
.aviso-meta { margin: 12px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); line-height: 1.5; }
/* «Cargando lo tuyo…» encima del esqueleto: que no parezca vacío. */
.sk-nota { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--muted); font-size: var(--fs-sm); }
.sk-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: skLatido 1s ease-in-out infinite; }
@keyframes skLatido { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sk-punto { animation: none; } }

/* Programa de Entrenar (Premium): sesiones con ejercicios. */
.prog-ejercicios { margin: 8px 0; padding-left: 20px; display: grid; gap: 10px; }
.prog-ejercicios li { line-height: 1.5; }
.prog-dia > summary { cursor: pointer; }
.prog-hoy { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

/* Tu cuerpo en datos (entrevista de la meta y Entrenar): peso, estatura, edad, sexo. */
.datos-cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 8px; }
.datos-cuerpo label { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--muted); min-width: 0; text-transform: none; letter-spacing: normal; font-weight: 500; }
.datos-cuerpo label.money-check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.datos-cuerpo label.money-check input { width: auto; flex: 0 0 auto; margin-top: 3px; }
.datos-cuerpo input, .datos-cuerpo select { width: 100%; min-width: 0; }
.datos-cuerpo .ancho { grid-column: 1 / -1; }
.datos-cuerpo .con-unidad { display: flex; gap: 6px; }
.datos-cuerpo .con-unidad input { flex: 1; }
.datos-cuerpo .con-unidad select { width: auto; flex: 0 0 auto; }
.foto-slot { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.foto-slot input[type=file] { margin-top: 6px; max-width: 100%; }

/* La comida de Entrenar: sus números del día y la despensa que le alcanza. */
#comida-card > p, #comida-card > ul { margin: 8px 0; }
/* «Confirma tu correo» en Hoy. */
.aviso-correo { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.aviso-correo p { margin: 6px 0 10px; line-height: 1.5; }
.aviso-correo-acc { display: flex; gap: 8px; flex-wrap: wrap; }
/* Cada foto de progreso: cómo va y qué recomienda. */
.prog-foto { padding-top: 10px; border-top: 1px solid var(--border); }
.prog-foto p { margin: 6px 0; line-height: 1.5; }
.prog-foto .chip { white-space: normal; }
.prog-foto ul { margin: 6px 0; padding-left: 20px; }
#comida-card > ul:not(.despensa-lista) { padding-left: 20px; }
.comida-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.comida-numeros div { padding: 10px 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); text-align: center; min-width: 0; }
.comida-numeros b { display: block; font-size: 1.15rem; color: var(--text); }
.comida-numeros small { color: var(--muted); font-size: var(--fs-xs, .75rem); }
@media (max-width: 420px) { .comida-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.despensa-lista { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.despensa-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); line-height: 1.4; }
.despensa-lista li span { min-width: 0; }
.despensa-lista li b.precio { flex: 0 0 auto; color: var(--text); font-variant-numeric: tabular-nums; }
.despensa-der { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.despensa-lista .no-como { width: 34px; height: 34px; min-width: 34px; font-size: .8rem; opacity: .75; }
.despensa-lista .no-como:hover, .despensa-lista .no-como:focus-visible { opacity: 1; }
/* Las flechas cruzadas de «cámbialo» (no una ✕: no se borra, se cambia). */
.despensa-lista .no-como { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.despensa-lista .no-como svg { width: 16px; height: 16px; display: block; }
.icono-inline svg { width: 14px; height: 14px; vertical-align: -2px; display: inline-block; }
/* Comprar Celestial: su foto arriba, centrada. */
.compra-figura { text-align: center; }
.compra-figura .compra-figura-foto { margin: 0 auto 10px; }
.compra-figura .modal-actions { justify-content: center; margin-top: 14px; }
.compra-figura a.btn { text-decoration: none; }
.no-como-box .money-inline { margin: 6px 0; }
.no-como-lista .chip { margin: 2px 4px 2px 0; }
.chip-x { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 2px; font-size: 1rem; line-height: 1; }
.despensa-total { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; margin-top: 6px; }
.despensa-total.no-alcanza { color: var(--warn); }
.despensa-total.alcanza { color: var(--ok); }

/* ============================================================
   TU PARTIDA — la meta leída como un juego: ficha, mapa, misiones,
   jefe y reglas. Todo con tokens (sirve en claro y en oscuro).
   ============================================================ */
.partida { z-index: 5; overflow: visible; }
.partida::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--panel-rgb), .16), transparent 55%),
              radial-gradient(90% 80% at 100% 0%, rgba(180, 92, 255, .12), transparent 60%); }
.partida > * { position: relative; z-index: 1; }
.partida > .partida-top { display: flex; align-items: center; gap: var(--sp-3); z-index: 3; } /* su menú, por encima de las cifras */
.partida-avatar { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-content: center;
  background: var(--grad); color: var(--on-accent); font-size: 22px; font-weight: 800;
  box-shadow: 0 10px 28px -10px rgba(var(--panel-rgb), .8), inset 0 1px 0 rgba(255,255,255,.35);
  animation: partidaLatido 3.2s var(--ease-out) infinite; }
@keyframes partidaLatido { 0%,100% { box-shadow: 0 10px 28px -10px rgba(var(--panel-rgb), .8), inset 0 1px 0 rgba(255,255,255,.35); }
  50% { box-shadow: 0 10px 34px -6px rgba(var(--panel-rgb), 1), inset 0 1px 0 rgba(255,255,255,.35); } }
.partida-txt { flex: 1; min-width: 0; }
.partida-kicker { display: block; font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; font-weight: 800; color: var(--accent-2); margin-bottom: 2px; }
.partida-titulo { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); line-height: var(--lh-tight); letter-spacing: -.02em; overflow-wrap: anywhere; }
.partida-porque { margin: var(--sp-3) 0 0; color: var(--muted); font-style: italic; font-size: var(--fs-sm); }
.partida-menu { position: relative; flex: none; align-self: flex-start; }
.partida-menu > summary { list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: 12px; display: grid; place-content: center;
  border: 1px solid var(--glass-brd); background: var(--sunk-50); color: var(--muted); font-size: 20px; line-height: 1; }
.partida-menu > summary::-webkit-details-marker { display: none; }
.partida-menu[open] > summary { color: var(--text); border-color: var(--border-hi); }
.partida-menu-lista { position: absolute; right: 0; top: 44px; z-index: 20; min-width: 210px; display: grid; gap: 6px; padding: 10px;
  border-radius: 16px; background: var(--card-solid); border: 1px solid var(--border-hi); box-shadow: var(--elev-3, var(--shadow));
  animation: chipIn 220ms var(--ease-out) both; }
.partida-menu-lista .btn { width: 100%; justify-content: flex-start; }
.partida-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-4); }
.pstat { padding: 10px 6px; border-radius: 14px; text-align: center; background: var(--sunk-50); border: 1px solid var(--border); }
.pstat b { display: block; font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.05; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pstat b small { font-size: var(--fs-sm); }
.pstat span { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); }
.partida-xp { margin-top: var(--sp-3); }
.partida-xp-bar { height: 10px; border-radius: 99px; background: var(--sunk-60); border: 1px solid var(--border); overflow: hidden; }
.partida-xp-bar i { position: relative; display: block; height: 100%; border-radius: 99px; background: var(--grad); overflow: hidden; animation: growW 900ms var(--ease-out) both; }
.partida-xp-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  background-size: 220% 100%; animation: partidaBrillo 2.8s linear infinite; }
@keyframes partidaBrillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.partida-xp > span { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.partida #invite-box:not(:empty) { margin-top: var(--sp-3); }

/* El mapa: los niveles como nodos de un camino que se recorre. */
.mapa-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.mapa-head h3 { margin: 0; }
.mapa-head .conf { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mapa { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x proximity; padding: 8px 2px 10px; margin: 0 -4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mapa::-webkit-scrollbar { display: none; }
.mapa-tramo { flex: none; width: 22px; height: 3px; margin-top: 25px; border-radius: 3px; background: var(--border-hi); opacity: .6; }
.mapa-tramo.on { background: var(--grad); opacity: 1; }
.mapa-nodo { flex: none; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  color: var(--text); cursor: pointer; scroll-snap-align: center; font: inherit; }
.mapa-orbe { width: 50px; height: 50px; border-radius: 50%; display: grid; place-content: center; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md);
  transition: transform var(--dur-2, .2s) var(--ease-spring, ease), box-shadow var(--dur-2, .2s); }
.mapa-nodo.done .mapa-orbe { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); border: 2px solid color-mix(in srgb, var(--ok) 60%, transparent); }
.mapa-nodo.current .mapa-orbe { color: var(--on-accent); background: var(--grad); border: 0; transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(var(--panel-rgb), .18), 0 10px 26px -6px rgba(var(--panel-rgb), .9); animation: mapaLatido 2.4s var(--ease-out) infinite; }
@keyframes mapaLatido { 0%,100% { box-shadow: 0 0 0 4px rgba(var(--panel-rgb), .18), 0 10px 26px -6px rgba(var(--panel-rgb), .9); }
  50% { box-shadow: 0 0 0 9px rgba(var(--panel-rgb), .06), 0 10px 30px -4px rgba(var(--panel-rgb), 1); } }
.mapa-nodo.locked .mapa-orbe { color: var(--muted); background: var(--sunk-50); border: 2px dashed var(--border-hi); font-size: var(--fs-sm); }
.mapa-nodo.sel .mapa-orbe { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.mapa-nodo:focus-visible { outline: none; }
.mapa-nodo:focus-visible .mapa-orbe { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.mapa-nombre { font-size: var(--fs-xs); line-height: 1.25; text-align: center; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mapa-nodo.current .mapa-nombre, .mapa-nodo.sel .mapa-nombre { color: var(--text); font-weight: 650; }
.mapa-detalle:not(:empty) { margin-top: var(--sp-2); padding: 12px 14px; border-radius: 14px; background: var(--sunk-50); border: 1px solid var(--border); }
.mapa-det-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.mapa-detalle .why { margin: 6px 0 0; }

/* Las misiones de hoy: cada una dice cuánto XP da. */
.mision { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 0; border-top: 1px solid var(--border); }
.misiones-card .mapa-head + .mision, .misiones-card .conf + .mision { border-top: 0; }
.mision-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-2); box-shadow: 0 0 10px -2px var(--accent-2); }
.mision.atrasada .mision-dot { border-color: var(--warn); box-shadow: 0 0 10px -2px var(--warn); }
.mision-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mision-titulo { font-weight: 600; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.mision-meta { font-size: var(--fs-xs); color: var(--muted); }
.mision.atrasada .mision-meta { color: var(--warn); }
.mision .btn { flex: none; }
.xp-chip { flex: none; display: inline-block; padding: 3px 9px; border-radius: 99px; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 800;
  color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); white-space: nowrap; }
.mision-meta .xp-chip { margin-right: 4px; }

/* El jefe del nivel: su vida baja con cada parte cumplida. */
.mission-card { background: linear-gradient(128deg, color-mix(in srgb, var(--accent) 17%, var(--card-solid)), var(--card-solid) 65%); }
.jefe-top { display: flex; align-items: center; gap: var(--sp-3); position: relative; z-index: 1; margin-bottom: var(--sp-2); }
.jefe-top .mission-kicker { margin-bottom: 2px; }
.jefe-top h2 { margin: 0; }
.jefe-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-content: center; font-size: 20px;
  background: var(--grad-warm); color: #fff; box-shadow: 0 8px 22px -8px rgba(251, 113, 133, .75); }
.jefe-vida { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 4px; }
.jefe-vida-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--sunk-60); border: 1px solid var(--border); overflow: hidden; }
.jefe-vida-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad-warm); transition: width 600ms var(--ease-out); }
.jefe-vida > span { flex: none; font-size: var(--fs-xs); color: var(--muted); font-weight: 650; }
.mission-metrics span.hecho { color: var(--ok); }
.jefe-para { position: relative; z-index: 1; margin: 0 0 var(--sp-4); padding: 12px 14px; border-radius: 14px; background: var(--sunk-50); border: 1px solid var(--border); }
.jefe-para .eyebrow { margin-bottom: 4px; }
.jefe-para .lvl-targets { margin-top: 4px; }
.ladder-conquista h3 { margin-bottom: var(--sp-2); }
/* Sin la lista de niveles encima, las rayas y el aire de separación sobran. */
.ladder-conquista > .level-strategy:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.ladder-conquista #ls-out:empty ~ .ls-refine.hidden ~ .lvl-start { margin-top: var(--sp-2); padding-top: 0; border-top: 0; }

/* Las reglas del juego y el plan entero, plegados. */
.reglas-card > summary, .plan-todo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.reglas-card > summary::-webkit-details-marker, .plan-todo > summary::-webkit-details-marker { display: none; }
.reglas-card > summary h3 { margin: 0; }
.reglas-card[open] > summary .chapter-caret, .plan-todo[open] > summary .chapter-caret { transform: rotate(90deg); }
.reglas-card ol { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 10px; }
.reglas-card li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.regla-ico { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-content: center; font-size: 14px;
  color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); }
.reglas-sub { margin: var(--sp-4) 0 0; }
.reglas-numeros { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 8px; }
.reglas-card .reglas-numeros li { display: block; padding: 10px 12px; border-radius: 12px; background: var(--sunk-50); border: 1px solid var(--border); font-size: var(--fs-sm); }
.reglas-numeros .why { display: block; margin: 3px 0 0; }
.plan-todo > summary { padding: 12px 14px; border-radius: 14px; background: var(--sunk-50); border: 1px solid var(--border); font-weight: 650; }
.plan-todo[open] > summary { margin-bottom: var(--sp-3); }
@media (prefers-reduced-motion: reduce) {
  .partida-avatar, .mapa-nodo.current .mapa-orbe, .partida-xp-bar i::after { animation: none; }
}

/* Tus números: el marcador de la partida. */
.numeros-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-2); }
.numero { padding: 12px; border-radius: 14px; background: var(--sunk-50); border: 1px solid var(--border); display: grid; gap: 2px; min-width: 0; }
.numero-nombre { font-size: var(--fs-xs); color: var(--muted); font-weight: 650; overflow-wrap: anywhere; }
.numero-valor { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.numero-meta { font-size: var(--fs-xs); color: var(--muted); }
.numero-meta .sube { color: var(--ok); font-weight: 700; }
.numero-meta .baja { color: var(--warn); font-weight: 700; }
.numeros-acciones { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.numeros-nota { margin-top: var(--sp-2); }
.numero-nivel { font-size: 10px; font-weight: 800; color: var(--accent-2); white-space: nowrap; }
.cap-recos { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--fs-sm); }
.cap-recos .why { display: block; margin: 2px 0 0; }

/* Fotos y videos en el chat (F3). */
.chat-adj-btn {
  flex: none; width: 40px; height: 40px; margin-bottom: 2px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--muted); border: 1px solid var(--border);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.chat-adj-btn:hover, .chat-adj-btn:focus-visible { color: var(--text); border-color: var(--border-hi); }
.chat-adj-btn svg { width: 18px; height: 18px; }
.chat-adjunto { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 10px; border-radius: 14px;
  background: var(--sunk-50); border: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted); }
.chat-adjunto img { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; flex: none; }
.chat-adj-ico { font-size: 26px; flex: none; }
.chat-adj-txt { flex: 1; min-width: 0; }
.chat-adj-quitar { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--muted); cursor: pointer; }
.chat-msg .chat-foto { display: block; max-width: 220px; max-height: 260px; border-radius: 12px; margin: -3px -5px 6px; object-fit: cover; }
.chat-msg.critica { white-space: normal; max-width: 94%; }
.crit { display: grid; gap: 8px; }
.crit p { margin: 0; }
.crit-titulo { font-family: var(--font-display); font-size: var(--fs-md); }
.crit-mejor { color: var(--ok); }
.crit-areas { display: grid; gap: 8px; }
.crit-area { padding: 10px 12px; border-radius: 12px; background: var(--sunk-50); border: 1px solid var(--border); display: grid; gap: 4px; }
.crit-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 650; }
.crit-top b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.crit-bar { height: 6px; border-radius: 99px; background: var(--sunk-60); overflow: hidden; }
.crit-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); }
.crit-bar.medio i { background: linear-gradient(90deg, var(--warn), var(--accent-2)); }
.crit-bar.flojo i { background: var(--grad-warm); }
.crit-mejora { color: var(--accent-2); }
.crit-sub { margin-top: 4px; }
.crit-cambios { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.crit-en { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 800; color: var(--accent-2); padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent-2) 12%, transparent); }

/* Panel del dueño: las dos formas de armar planes, lado a lado. */
.comp-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.comp-tabla th, .comp-tabla td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.comp-tabla th { color: var(--muted); font-weight: 650; font-size: var(--fs-xs); }
.comp-meta .chapter-title { font-size: var(--fs-sm); }
.comp-lados { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-3); }
@media (min-width: 900px) { .comp-lados { grid-template-columns: 1fr 1fr; } }
.comp-lista { font-size: var(--fs-sm); }
.comp-lista ul { margin: 4px 0 6px; padding-left: 16px; }