/* ============================================================
   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; }
:root[data-view="fitness"] { --panel-rgb: 251, 113, 133; --panel-2-rgb: 251, 146, 60; }
:root[data-view="learning"] { --panel-rgb: 167, 139, 250; --panel-2-rgb: 34, 211, 238; }
/* 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); }
/* Lo siguiente de tu partida (cuando hoy no toca ninguna misión) y la XP del día. */
.q-proxima { display: grid; gap: 2px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--border-hi); background: var(--sunk-50); text-align: left; }
.q-proxima-tag { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.q-proxima b { font-size: var(--fs-sm); line-height: 1.3; }
.q-proxima small { font-size: var(--fs-xs); color: var(--muted); }
.dayband .xp-hoy { color: var(--accent-2); font-weight: 800; }
.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); }
/* En el teléfono, 90vh cuenta también lo que tapa la barra del navegador (y
   el notch en la app): el final de la ventana —con «Guardar»— quedaba
   escondido. dvh es la altura que de verdad se ve (donde no existe, manda la
   regla de arriba). */
.modal-card { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.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; }
.conf.ev-ok { color: var(--ok); }
/* La pregunta del juez no es un error: es una pregunta (sin rojo). */
.modal-err.pregunta { color: var(--accent-2); font-weight: 600; }
.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; }
/* ⏰ La hora del aviso: un toque la pone o la cambia. */
.habit-hora {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 36px;
  padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent);
}
.habit-hora.con { color: var(--accent-2); border-style: solid; border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }
.habit-hora:hover { border-color: var(--accent); color: var(--text); }
.hchip-hora { font-size: 12px; font-weight: 600; color: var(--muted); }
.field .opc { font-weight: 400; color: var(--muted); }
.hora-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hora-fila input { flex: 1; min-width: 130px; }
.habit-avisos .why { margin: 4px 0 6px; }
.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; }
/* Lo que se repite se abre en su día: en vez de «Hacer», cuándo. */
.candado { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 99px; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted); border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); }

/* TU DÍA EN ESTA META (dueño, 2026-10-09): tu tiempo, tus misiones de hoy
   con su barra, el apoyo marcado y «Dame más para hoy». Entra con vida;
   quieta para quien pide menos movimiento (al final del bloque). */
.td-card { position: relative; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent-2) 9%, var(--card-solid)), var(--card-solid) 55%); }
.td-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: .85; }
.td-card.td-completo { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--ok) 70%, transparent); }
.td-card.td-completo::before { background: linear-gradient(100deg, var(--ok), var(--accent-2)); }
.td-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.td-head h3 { margin: 2px 0 0; }
.td-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 750; color: var(--text); background: var(--sunk-50);
  border: 1px solid var(--border-hi); transition: transform 160ms var(--ease-out), border-color 160ms; }
.td-chip span { color: var(--accent-2); }
.td-chip:hover { border-color: var(--accent-2); transform: translateY(-1px); }
.td-chip:active { transform: scale(.97); }
.td-pregunta { margin: 0 0 var(--sp-3); padding: 14px; border-radius: 16px; background: var(--sunk-50);
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--border)); animation: td-entra 420ms var(--ease-out) both; }
.td-q { margin: 0 0 4px; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 750; }
.td-pregunta .why { margin: 0 0 var(--sp-3); }
.td-opciones { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-2) 0; }
.td-op { min-width: 64px; padding: 10px 14px; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 750; color: var(--text);
  background: var(--card-solid); border: 1px solid var(--border-hi);
  transition: transform 160ms var(--ease-out), background 160ms, border-color 160ms, color 160ms;
  animation: td-entra 380ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
.td-op:hover { transform: translateY(-2px); border-color: var(--accent-2); }
.td-op:active { transform: scale(.96); }
.td-op.sel, .td-op:focus-visible { background: var(--grad); color: var(--on-accent); border-color: transparent; outline: none; }
.td-op-otro { color: var(--muted); border-style: dashed; }
.td-tiempo { display: grid; gap: 6px; margin: 0 0 var(--sp-2); }
.td-barra { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--sunk-60); border: 1px solid var(--border); }
.td-barra i { display: block; height: 100%; transform-origin: left center; animation: td-llena 900ms var(--ease-out) both; }
.td-hecho { background: linear-gradient(100deg, var(--ok), var(--accent-2)); box-shadow: 0 0 12px -2px var(--ok); }
.td-falta { animation-delay: 150ms !important;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 38%, transparent) 0 6px, color-mix(in srgb, var(--accent) 20%, transparent) 6px 12px); }
.td-barra-txt { font-size: var(--fs-xs); color: var(--muted); }
.td-barra-txt b { color: var(--text); }
.td-barra-txt .xp-chip { margin-left: 4px; }
.td-lista { list-style: none; margin: 0; padding: 0; }
.td-mision { display: flex; align-items: center; gap: var(--sp-3); padding: 11px 0; border-top: 1px solid var(--border);
  animation: td-entra 460ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
.td-mision:first-child { border-top: 0; }
.td-mision .btn, .td-mision .candado { flex: none; }
.td-check { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-content: center; font-size: 12px; font-weight: 900;
  border: 2px solid var(--accent-2); box-shadow: 0 0 10px -3px var(--accent-2); color: var(--on-accent); }
.td-mision.hecha .td-check { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 12px -2px var(--ok); animation: td-pop 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 260ms); }
.td-mision.atrasada .td-check { border-color: var(--warn); box-shadow: 0 0 10px -3px var(--warn); }
.td-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.td-titulo { font-weight: 600; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.td-mision.hecha .td-titulo { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ok) 70%, transparent); }
.td-meta { font-size: var(--fs-xs); color: var(--muted); }
.td-meta .xp-chip { margin-right: 4px; }
.td-mision.atrasada .td-meta { color: var(--warn); }
.td-tag { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-3); background: color-mix(in srgb, var(--accent-3) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-3) 38%, transparent); }
.td-mision.td-apoyo .td-check { border-style: dashed; border-color: var(--accent-3); box-shadow: none; }
.td-mision.td-apoyo.hecha .td-check { border-style: solid; }
.td-ok { flex: none; font-size: var(--fs-xs); font-weight: 800; color: var(--ok); }
.td-mision.td-nueva { border-radius: 12px; animation: td-entra 460ms var(--ease-out) both, td-nueva 1800ms var(--ease-out) 400ms both; }
.td-fin { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-2); padding: 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--ok) 10%, var(--sunk-50)); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  position: relative; overflow: hidden; animation: td-entra 420ms var(--ease-out) both; }
.td-fin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%);
  transform: translateX(-100%); animation: td-brillo 1600ms var(--ease-out) 500ms both; pointer-events: none; }
.td-fin div { display: grid; gap: 2px; }
.td-fin span:not(.td-trofeo) { font-size: var(--fs-sm); color: var(--muted); }
.td-trofeo { font-size: 26px; animation: td-trofeo 900ms var(--ease-out) 200ms both; }
.td-acciones { display: flex; justify-content: flex-end; margin-top: var(--sp-2); }
.td-acciones .btn.cargando { opacity: .6; pointer-events: none; }
.td-mas-brilla { position: relative; overflow: hidden; }
.td-mas-brilla::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-100%); animation: td-brillo 2400ms ease-in-out 900ms infinite; pointer-events: none; }
.td-sig { display: grid; gap: 2px; margin-top: var(--sp-3); padding: 10px 12px; border-radius: 14px; background: var(--sunk-50); border: 1px dashed var(--border-hi); }
.td-sig-k { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.td-sig-t { font-weight: 650; overflow-wrap: anywhere; }
.td-sig-m { font-size: var(--fs-xs); color: var(--muted); }
.td-nivel { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.td-previa { margin: 0; }
.td-modal .td-opciones { margin-bottom: var(--sp-3); }
@keyframes td-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes td-llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes td-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes td-brillo { to { transform: translateX(100%); } }
@keyframes td-trofeo { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.2) rotate(8deg); opacity: 1; } 100% { transform: none; } }
@keyframes td-nueva { 0% { background: color-mix(in srgb, var(--accent-2) 22%, transparent); box-shadow: 0 0 0 1px var(--accent-2); }
  100% { background: transparent; box-shadow: 0 0 0 1px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .td-pregunta, .td-op, .td-barra i, .td-mision, .td-mision.hecha .td-check, .td-mision.td-nueva, .td-fin, .td-fin::after, .td-trofeo, .td-mas-brilla::after { animation: none !important; }
  .td-fin::after, .td-mas-brilla::after { display: none; }
}
@media (max-width: 480px) {
  .td-head { flex-wrap: wrap; }
  .td-op { flex: 1 1 calc(33% - 8px); }
}

/* 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; }
/* La cifra que vence al jefe: cuánto llevas y cuánto falta. */
.jefe-cifra { position: relative; z-index: 1; margin: var(--sp-2) 0 var(--sp-3); padding: 10px 14px; border-radius: 14px; font-size: var(--fs-sm); line-height: 1.45;
  background: color-mix(in srgb, var(--warn) 9%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.jefe-cifra b { font-size: 1.15em; }
.jefe-cifra.ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.jefe-cifra-label { display: block; font-weight: 650; font-size: var(--fs-sm); margin-bottom: 6px; }
.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; }

/* Tus videos: sus vistas, qué funciona y qué grabar después. */
.videos-resumen { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin: 4px 0 var(--sp-2); font-size: var(--fs-sm); }
.videos-resumen b { font-size: 1.35em; font-family: var(--font-display); }
.videos-consejos { margin: 0 0 var(--sp-3); padding: 10px 14px 10px 30px; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.45;
  border-radius: 14px; background: color-mix(in srgb, var(--accent-2) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 25%, transparent); }
.videos-lista { display: grid; }
.video-fila { display: flex; align-items: center; gap: var(--sp-2); padding: 10px 0; border-top: 1px solid var(--border); }
.video-fila:first-child { border-top: 0; }
.video-plat { flex: none; width: 28px; text-align: center; font-size: 18px; }
.video-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.video-titulo { font-weight: 600; font-size: var(--fs-sm); color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-titulo:hover { text-decoration: underline; }
.video-meta { font-size: var(--fs-xs); color: var(--muted); }
.video-fila .btn { flex: none; }
.video-fila.pendiente .btn { border-color: var(--warn); color: var(--warn); }
.videos-ideas { margin-top: var(--sp-3); padding: 10px 14px; border-radius: 14px; background: var(--sunk-50); border: 1px solid var(--border); }
.videos-ideas > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-weight: 650; font-size: var(--fs-sm); }
.videos-ideas > summary::-webkit-details-marker { display: none; }
.videos-ideas[open] > summary .chapter-caret { transform: rotate(90deg); }
.ideas-lista li { display: grid; gap: 3px; }
.idea-linea { display: block; font-size: var(--fs-sm); }
.idea-linea .eyebrow { display: inline; margin-right: 6px; }

/* 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; }

/* ============================================================
   DINERO v2 — más vida, la misma esencia (2026-10-08).
   El dinero tiene su acento propio (oro → coral, el del panel) y cada
   concepto su dibujito: se reconoce de un vistazo qué es cada cifra.
   Las cifras grandes suben al aparecer, el avance se ve en anillos y
   barras, y lo que entra y sale se compara con barras, no con texto.
   Nada de esto cambia una cuenta: solo cómo se ve. Todo con tokens del
   tema, así que el claro y el oscuro se leen igual de bien.
   ============================================================ */

/* ---- Piezas comunes ---- */
.m-ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.16em; }
/* La moneda en pequeño: el número manda. En las cifras protagonistas
   además sube, como en las apps de banco. */
.m-cur { font-size: .82em; opacity: .72; margin-right: .04em; }
.money-big .m-cur, .money-mid .m-cur, .kpi-n .m-cur, .flow-in-n .m-cur, .mg-montos .m-cur, .m-tile b .m-cur {
  font-size: .5em; font-weight: 650; opacity: .6; vertical-align: .62em; margin-right: .1em; letter-spacing: 0;
}
.m-badge {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; margin: -3px 10px 0 0;
  vertical-align: middle; color: rgb(var(--panel-rgb)); background: rgba(var(--panel-rgb), .12);
  box-shadow: inset 0 0 0 1px rgba(var(--panel-rgb), .28);
}
.m-badge .m-ico { width: 16px; height: 16px; }
.m-badge.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent); }
.m-badge.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 32%, transparent); }
.m-pill {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin-top: 10px;
  padding: 5px 11px; border-radius: 99px; font-size: var(--fs-sm); color: var(--text);
  background: var(--sunk-60); border: 1px solid var(--border);
}
.m-pill .m-ico { color: rgb(var(--panel-rgb)); }
.m-pill.sm { margin-top: 0; padding: 3px 10px; font-size: var(--fs-xs); font-weight: 650; white-space: nowrap; }
.m-pill.dim { color: var(--muted); }
.m-tile {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: 16px;
  background: var(--sunk-50); border: 1px solid var(--border);
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.m-tile:hover { border-color: var(--border-hi); }
.m-tile > span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); }
.m-tile > span .m-ico { color: rgb(var(--panel-rgb)); }
.m-tile b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
.m-tile.in > span .m-ico { color: var(--ok); }
.m-tile.out > span .m-ico { color: var(--danger); }
.m-tile.pos b { color: var(--ok); }
.m-tile.neg b { color: var(--danger); }
.m-tile.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.m-tile.warn b { color: var(--warn); }
.m-tile.neg { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.m-tiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 12px; }
.m-cat {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 11px;
  font-size: 15px; line-height: 1; background: var(--sunk-60); border: 1px solid var(--border);
}
.m-cat-n { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.m-cat-n > span:last-child { min-width: 0; }

/* Anillo de avance */
.m-ring { position: relative; display: inline-grid; place-items: center; width: var(--t); height: var(--t); flex: none; }
.m-ring svg { display: block; transform: rotate(-90deg); overflow: visible; }
.m-ring-bg { fill: none; stroke: rgba(150, 158, 178, .16); }
.m-ring-fg {
  fill: none; stroke: rgb(var(--panel-rgb)); stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(var(--panel-rgb), .5));
  animation: ringDraw 1.1s var(--ease-out) both;
}
.m-ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.m-ring-c b { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.m-ring-c b i { font-size: .6em; font-style: normal; color: var(--muted); margin-left: 1px; }

/* Barra partida en dos (lo que tienes / lo que debes; lo que pusiste / lo que te pagaron) */
.m-split { display: flex; height: 8px; gap: 3px; margin: 8px 0 4px; border-radius: 99px; overflow: hidden; }
.m-split i { display: block; min-width: 3px; border-radius: 99px; animation: distIn .8s var(--ease-exit) both; transform-origin: left; }
.m-split i.a { background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 60%, transparent), var(--ok)); }
.m-split i.d { background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 60%, transparent), var(--danger)); }
.m-split i.g { background: linear-gradient(90deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); }
.m-split-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-xs); color: var(--muted); }
.m-split-ley i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.m-split-ley i.a { background: var(--ok); }
.m-split-ley i.g { background: rgb(var(--panel-rgb)); }
@keyframes distIn { from { transform: scaleX(0); opacity: .3; } }

/* ---- Pestañas: el oro del panel marca dónde estás ---- */
.money-tabs { padding: 5px; gap: 4px; border-radius: 16px; background: var(--sunk-60); backdrop-filter: blur(14px); }
.money-tabs button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 9px 14px; border-radius: 11px;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.money-tabs button .m-ico { width: 16px; height: 16px; opacity: .7; transition: opacity var(--dur-2), color var(--dur-2); }
.money-tabs button:hover { color: var(--text); background: rgba(var(--panel-rgb), .08); }
.money-tabs button.on {
  color: var(--text);
  background: linear-gradient(135deg, rgba(var(--panel-rgb), .24), rgba(var(--panel-2-rgb), .12));
  box-shadow: inset 0 0 0 1px rgba(var(--panel-rgb), .48), 0 8px 22px -12px rgba(var(--panel-rgb), .75);
}
.money-tabs button.on .m-ico { opacity: 1; color: rgb(var(--panel-rgb)); }

/* ---- Disponible hoy: la cifra que manda, con luz propia ---- */
#money-body .money-hero {
  position: relative; overflow: hidden; padding: 26px 26px 24px; align-items: stretch;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--panel-rgb), .17), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(var(--panel-2-rgb), .10), transparent 60%),
    var(--surface);
}
#money-body .money-hero::after {
  content: ""; position: absolute; left: -110px; top: -140px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--panel-rgb), .26), transparent 65%); filter: blur(6px);
  pointer-events: none; animation: floaty 9s ease-in-out infinite;
}
.money-hero-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.money-hero .money-big {
  font-size: clamp(44px, 9vw, 72px); line-height: .95; margin: 6px 0 6px;
  background: linear-gradient(180deg, var(--text) 35%, color-mix(in srgb, rgb(var(--panel-rgb)) 60%, var(--text)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 26px rgba(var(--panel-rgb), .22));
}
.money-hero-side {
  position: relative; z-index: 1; padding: 16px 18px; border-radius: 18px;
  background: var(--sunk-50); border: 1px solid var(--border); align-self: center;
}
.m-flujo { display: grid; gap: 12px; margin: 8px 0 6px; }
.m-flujo-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
.m-flujo-fila > b { font-variant-numeric: tabular-nums; }
.m-flujo-et { display: inline-flex; align-items: center; gap: 8px; color: var(--text); min-width: 0; }
.m-flujo-fila.in .m-flujo-et .m-ico, .m-flujo-fila.in > b { color: var(--ok); }
.m-flujo-fila.out .m-flujo-et .m-ico { color: var(--danger); }
.m-flujo-bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--sunk-60); overflow: hidden; }
.m-flujo-bar i { display: block; height: 100%; border-radius: inherit; animation: growW .9s var(--ease-out) both; }
.m-flujo-fila.in .m-flujo-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 55%, transparent), var(--ok)); }
.m-flujo-fila.out .m-flujo-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 55%, transparent), var(--danger)); }
#money-body .m-neto { margin-top: 2px; padding-top: 10px; border-top: 1px dashed var(--border-hi); }
.money-tipico { font-size: var(--fs-sm); margin-top: 8px; line-height: var(--lh-snug); }

/* ---- Para gastar: dos cifras, una barra con el día de hoy y en qué se va ---- */
.money-spend .spend-hoy { gap: 12px; margin: 6px 0 16px; align-items: stretch; }
.spend-hoy .m-tile .money-big { font-size: clamp(32px, 6.5vw, 46px); margin: 2px 0 0; line-height: 1; }
.spend-hoy .m-tile .money-mid { font-size: clamp(24px, 4.6vw, 32px); margin: 2px 0 0; line-height: 1.05; }
.money-spend.agotado .spend-hoy .m-tile, .money-spend.sin_margen .spend-hoy .m-tile { border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.spend-bar { height: 12px; }
.spend-bar i { background: linear-gradient(90deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); box-shadow: 0 0 14px rgba(var(--panel-rgb), .4); animation: growW .9s var(--ease-out) both; }
.spend-bar.rapido i { background: linear-gradient(90deg, var(--warn), #fb923c); }
.spend-bar.agotado i, .spend-bar.sin_margen i { background: linear-gradient(90deg, #fb7185, var(--danger)); box-shadow: 0 0 14px rgba(251, 113, 133, .4); }
.spend-hoy-mark { top: -5px; width: 3px; height: 22px; border-radius: 3px; opacity: .95; box-shadow: 0 0 0 3px var(--card-solid); }
.spend-leyenda { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.spend-ley-raya { display: inline-block; width: 3px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--text); vertical-align: -1px; }
.spend-cats { display: grid; gap: 4px; margin-top: 12px; }
.spend-cat .money-row { padding: 4px 0; align-items: center; }
.spend-cat .money-bar { height: 6px; margin: 2px 0 8px 42px; }
.money-bar i { animation: growW .9s var(--ease-out) both; }
.money-bar.rapido i { background: linear-gradient(90deg, var(--warn), #fb923c); }
.money-bar.agotado i { background: linear-gradient(90deg, #fb7185, var(--danger)); }

/* ---- Las cuatro cifras de tu mes ---- */
.money-kpis .kpi { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.money-kpis .kpi::after {
  content: ""; position: absolute; right: -46px; top: -46px; width: 130px; height: 130px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--k, rgb(var(--panel-rgb))) 20%, transparent), transparent 70%);
}
.kpi-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kpi-top .eyebrow { margin: 0; letter-spacing: .16em; }
.kpi-ico {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px;
  color: var(--k, rgb(var(--panel-rgb))); background: color-mix(in srgb, var(--k, rgb(var(--panel-rgb))) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, rgb(var(--panel-rgb))) 30%, transparent);
}
.kpi-ico .m-ico { width: 17px; height: 17px; }
.k-runway { --k: var(--ok); }
.k-patrimonio { --k: var(--accent-2); }
.k-deuda { --k: var(--danger); }
.k-sobro { --k: var(--warn); }
.money-kpis .kpi b, .kpi-n { display: block; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin: 6px 0 0; color: var(--text); font-variant-numeric: tabular-nums; }
.money-kpis .kpi .money-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--k) 60%, transparent), var(--k)); }
.kpi-ring { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.kpi-ring b { margin: 0 !important; }
.kpi-ring .m-ring-fg { stroke: var(--k); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--k) 55%, transparent)); }
.money-kpis .kpi .m-pill .m-ico { color: var(--k); }

/* ---- Tu semana, tus metas, pregúntale, palabras raras ---- */
.m-week-head { align-items: center; }
.m-week-head h3 { margin: 0 !important; }
.m-wgoal { padding: 8px 0 10px; border-top: 1px solid var(--border); }
.m-wgoal .money-row { padding: 2px 0 6px; }
.m-wbar { position: relative; height: 6px; border-radius: 99px; background: var(--sunk-60); overflow: hidden; }
.m-wbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.m-wbar i.ahora { background: linear-gradient(90deg, rgb(var(--panel-rgb)), var(--ok)); animation: growW .9s var(--ease-out) both; }
.m-wbar i.antes { background: color-mix(in srgb, var(--text) 30%, transparent); }
.money-week .money-note { margin-top: 12px; border-left: 3px solid rgb(var(--panel-rgb)); }
.mg-mini .money-row { align-items: center; padding: 10px 0; }
.mg-mini + .mg-mini { border-top: 1px solid var(--border); }
.mg-mini-t { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.mg-mini-t > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mg-mini-t small { font-size: var(--fs-xs); }
.mg-mini-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 11px; color: rgb(var(--panel-rgb)); background: rgba(var(--panel-rgb), .12); }
.money-top-metas .btn { margin-top: 10px; }
.money-ask { background: radial-gradient(120% 130% at 100% 0%, rgba(var(--panel-rgb), .11), transparent 55%), var(--surface); }
.money-ask-chips { gap: 8px; }
.money-ask-chips .chip { padding: 7px 13px; font-size: var(--fs-xs); transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-1) var(--ease-spring); }
.money-ask-chips .chip:hover { border-color: rgba(var(--panel-rgb), .6); background: rgba(var(--panel-rgb), .10); transform: translateY(-1px); }
.money-ask-out p { border-left: 2px solid rgb(var(--panel-rgb)); border-radius: 4px 14px 14px 14px; background: linear-gradient(100deg, rgba(var(--panel-rgb), .10), var(--sunk-50) 45%); }
.money-alerts p { border-radius: 12px; }
.money-tip { border-radius: 12px; padding: 10px 12px; border: 1px solid transparent; }
.money-tip.bien { border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.money-tip.alerta { border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.money-tip.consejo { border-color: color-mix(in srgb, var(--accent-2) 24%, transparent); }
.money-learn { background: radial-gradient(110% 140% at 0% 100%, rgba(var(--panel-2-rgb), .08), transparent 55%), var(--surface); }

/* ---- Puerta de entrada (sin datos todavía) ---- */
#money-body .money-door { position: relative; overflow: hidden; padding-right: 190px;
  background: radial-gradient(120% 140% at 100% 50%, rgba(var(--panel-rgb), .14), transparent 55%), var(--surface); }
.money-door-art {
  position: absolute; right: 30px; top: 50%; width: 124px; height: 124px; margin-top: -62px; display: grid; place-items: center;
  border-radius: 34px; color: rgb(var(--panel-rgb));
  background: radial-gradient(circle at 30% 25%, rgba(var(--panel-rgb), .30), rgba(var(--panel-2-rgb), .08));
  box-shadow: inset 0 0 0 1px rgba(var(--panel-rgb), .35), 0 22px 50px -22px rgba(var(--panel-rgb), .7);
  animation: floaty 6s ease-in-out infinite;
}
.money-door-art .m-ico { width: 56px; height: 56px; stroke-width: 1.4; }

/* ---- Presupuesto ---- */
.money-seg { padding: 5px; border-radius: 14px; }
.money-seg button { padding: 9px 16px; border-radius: 10px; transition: color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2); }
.money-seg button:hover { color: var(--text); }
.money-seg button.on {
  color: var(--text); background: linear-gradient(135deg, rgba(var(--panel-rgb), .24), rgba(var(--panel-2-rgb), .12));
  box-shadow: inset 0 0 0 1px rgba(var(--panel-rgb), .5), 0 6px 18px -10px rgba(var(--panel-rgb), .8);
}
#money-body .money-flow { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); gap: 12px; align-items: stretch; margin-top: 16px; }
.flow-in {
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--panel-rgb), .26), rgba(var(--panel-2-rgb), .12));
  box-shadow: inset 0 0 0 1px rgba(var(--panel-rgb), .4);
}
.flow-in small { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; font-weight: 750; color: var(--muted); }
.flow-in-n { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.flow-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; }
#money-body .flow-step { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; border-radius: 12px; background: var(--sunk-50); border: 1px solid var(--border); }
.flow-step small { font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }
.flow-step b { font-variant-numeric: tabular-nums; }
.flow-share { height: 4px; margin-top: 6px; border-radius: 99px; background: var(--sunk-60); overflow: hidden; }
.flow-share i { display: block; height: 100%; border-radius: inherit; background: var(--fc, rgb(var(--panel-rgb))); animation: growW .9s var(--ease-out) both; }
.flow-step.k-esenciales { --fc: var(--accent); }
.flow-step.k-seguros { --fc: #5aa9e6; }
.flow-step.k-obligaciones { --fc: color-mix(in srgb, var(--muted) 80%, transparent); }
.flow-step.k-minimos_deuda, .flow-step.k-deuda_cara { --fc: var(--warn); }
.flow-step.k-colchon { --fc: var(--ok); }
.flow-step.k-inversion { --fc: var(--accent-2); }
.flow-step.k-metas { --fc: #c98bf0; }
.flow-step.k-vida { --fc: color-mix(in srgb, var(--muted) 75%, transparent); }
#money-body .money-dist { height: 18px; gap: 3px; border-radius: 10px; margin: 10px 0 14px; }
#money-body .money-dist i { border-radius: 6px; animation: distIn .8s var(--ease-exit) both; transform-origin: left; }
#money-body .money-dist-ley { gap: 8px; }
#money-body .money-dist-ley li { padding: 8px 10px; border-radius: 10px; background: var(--sunk-50); border: 1px solid var(--border); }
.money-orden .money-steps li { padding: 6px 0 6px 46px; }
.money-orden .money-steps li::before {
  left: 2px; top: 13px; width: 28px; height: 28px; font-family: var(--font-display); font-size: var(--fs-sm);
  color: rgb(var(--panel-rgb)); background: rgba(var(--panel-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--panel-rgb), .42);
}
.money-orden .money-steps li::after { content: ""; position: absolute; left: 15px; top: 45px; bottom: -6px; width: 2px; border-radius: 2px; background: linear-gradient(rgba(var(--panel-rgb), .38), transparent); }
.money-orden .money-steps li:last-child::after { display: none; }
.money-orden .money-steps li.dim::before { color: var(--muted); background: var(--sunk-60); box-shadow: inset 0 0 0 1px var(--border); }
.money-orden .money-steps li.dim::after { background: linear-gradient(var(--border-hi), transparent); }
.money-orden .money-steps .num { font-family: var(--font-display); font-weight: 650; font-variant-numeric: tabular-nums; }
.money-semana-plan { background: linear-gradient(135deg, rgba(var(--panel-rgb), .12), transparent 60%), var(--surface); }
#money-body .money-reparte .rep-linea { align-items: center; }
.rep-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 9px; background: var(--sunk-60); border: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
#money-body .money-reparte.destacada {
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--panel-rgb), .16), transparent 55%), var(--surface);
  border-color: rgba(var(--panel-rgb), .55);
  box-shadow: 0 0 0 1px rgba(var(--panel-rgb), .3), 0 18px 40px -22px rgba(var(--panel-rgb), .55), var(--shadow);
}

/* ---- Metas: un anillo que se llena ---- */
#money-body .mg-card { padding: 22px; }
.mg-head { display: flex; align-items: center; gap: 18px; }
.mg-head-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mg-head-t .money-row { padding: 0; align-items: center; }
.mg-montos b { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mg-falta { font-size: var(--fs-sm); }
.mg-ring .m-ring-c b { font-size: 20px; }
.mg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 0 6px; }
.mg-stats .m-tile b { font-size: var(--fs-md); }
.mg-card.t-emergencia .m-ring-fg { stroke: var(--ok); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ok) 55%, transparent)); }
.mg-card.t-deseo .m-ring-fg { stroke: #c98bf0; filter: drop-shadow(0 0 6px rgba(201, 139, 240, .5)); }
.mg-card.t-deuda .m-ring-fg { stroke: var(--warn); }
.mg-card.cumplida { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent), var(--shadow); }
.mg-card.cumplida .m-ring-fg { stroke: var(--ok); }
.mg-actions { margin-top: 14px; }

/* ---- Deudas ---- */
#money-body .money-kpis-inline { gap: 14px; }
.money-kpis-inline > div { min-width: 0; }
.money-kpis-inline > div:nth-child(1) { --k: var(--danger); }
.money-kpis-inline > div:nth-child(2) { --k: var(--warn); }
.money-kpis-inline > div:nth-child(3) { --k: var(--ok); }
.money-kpis-inline .kpi-n, .money-kpis-inline > div > b { display: block; margin-top: 8px; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
#money-body .cmp { padding: 16px; border-radius: 16px; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2); }
#money-body .cmp:hover { transform: translateY(-2px); border-color: var(--border-hi); }
#money-body .cmp.best { background: linear-gradient(160deg, color-mix(in srgb, var(--ok) 12%, transparent), var(--sunk-50) 55%); }
.cmp .money-row { padding: 5px 0; }
.cmp-h { margin-bottom: 6px; }
.m-deuda { align-items: center; padding: 12px 0; }
.m-apr { display: inline-block; padding: 0 7px; border-radius: 99px; font-weight: 750; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.m-deuda-saldo { font-family: var(--font-display); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.m-deuda .num .btn { margin-top: 6px; }

/* ---- Simulador: el dinero que crece, en columnas ---- */
#money-body .grow-res { margin-top: 16px; padding: 16px 18px; border-radius: 16px; background: var(--sunk-50); border: 1px solid var(--border); }
.grow-res .money-mid { margin: 0; }
.grow-split { height: 12px; margin: 12px 0 6px; }
#money-body .grow-hitos { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); align-items: end; gap: 10px; margin-top: 16px; }
#money-body .grow-hitos > div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: var(--sunk-60); }
.grow-col { display: flex; align-items: flex-end; height: 92px; margin-bottom: 4px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--text) 5%, transparent); }
.grow-col { justify-content: center; }
.grow-col i { display: block; width: 46%; min-width: 22px; border-radius: 8px 8px 3px 3px; transform-origin: bottom;
  background: linear-gradient(180deg, rgb(var(--panel-rgb)), rgba(var(--panel-2-rgb), .65)); animation: colUp .9s var(--ease-exit) both; }
@keyframes colUp { from { transform: scaleY(0); } }
.money-sim-res .money-row.sim { padding: 9px 0; }
.money-sim-res .money-row.sim .arrow { color: rgb(var(--panel-rgb)); margin: 0 4px; }

/* ---- Movimientos y Mis datos ---- */
#money-body .tx-list { border-top: 0; margin-top: 4px; }
#money-body .money-row.tx { align-items: center; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; transition: background var(--dur-2); }
#money-body .money-row.tx:hover { background: var(--sunk-50); }
#money-body .money-row.tx .num b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.tx-in .m-cat { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.money-topes .tope .money-row { align-items: center; }
.money-topes .tope .money-bar { margin-left: 42px; }
#money-body .money-data .money-row { align-items: center; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; transition: background var(--dur-2); }
#money-body .money-data .money-row:hover { background: var(--sunk-50); }
#money-body .money-data details summary {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 14px; border-radius: 10px;
  color: var(--text); border: 1px dashed rgba(var(--panel-rgb), .55); list-style: none; transition: background var(--dur-2);
}
#money-body .money-data details summary::-webkit-details-marker { display: none; }
#money-body .money-data details summary::before { content: "+"; font-weight: 800; color: rgb(var(--panel-rgb)); }
#money-body .money-data details[open] summary::before { content: "−"; }
#money-body .money-data details summary:hover { background: rgba(var(--panel-rgb), .08); }
#money-body .sus-row, #money-body .pago-row { border: 1px solid var(--border); background: var(--sunk-50); }
/* Cada suscripción, su propia ficha (antes era texto pegado al borde). */
#money-body .sus-row { display: grid; gap: 4px; margin: 8px 0; padding: 12px 14px; border-radius: 14px; transition: border-color var(--dur-2); }
#money-body .sus-row:hover { border-color: var(--border-hi); }
#money-body .sus-row.cancelada { opacity: .6; }
#money-body .sus-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
#money-body .sus-top .num b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
#money-body .sus-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pago-row { padding: 12px 14px; }
.pago-row .m-cat { width: 28px; height: 28px; font-size: 13px; }

@media (max-width: 720px) {
  #money-body .money-hero { grid-template-columns: 1fr; padding: 20px 18px; }
  .money-hero .money-big { font-size: clamp(42px, 13vw, 58px); }
  #money-body .money-flow { grid-template-columns: 1fr; }
  #money-body .money-door { padding-right: var(--sp-5); }
  .money-door-art { position: static; width: 76px; height: 76px; margin: 0 0 14px; border-radius: 24px; }
  .money-door-art .m-ico { width: 38px; height: 38px; }
  .mg-head { gap: 14px; }
}
@media (max-width: 520px) {
  .m-tiles3 { grid-template-columns: 1fr 1fr; }
  .m-tiles3 .m-tile:last-child { grid-column: 1 / -1; }
  .money-tabs button { padding: 9px 12px; }
  .spend-cat .money-bar, .money-topes .tope .money-bar { margin-left: 0; }
  .money-seg { display: flex; width: 100%; }
  .money-seg button { flex: 1; padding: 9px 8px; font-size: var(--fs-sm); }
}
@media (prefers-reduced-motion: reduce) {
  #money-body .money-hero::after, .money-door-art { animation: none; }
}

/* ============================================================
   DETALLES DE TODA LA APP (2026-10-08) — el menú con íconos de línea
   (antes eran símbolos de teclado) y la sección activa con SU color:
   Dinero en oro, Hábitos en verde, Plan en cian… El mismo concepto de
   los paneles, llevado al menú. Más la barra de la semana en Hábitos.
   ============================================================ */
/* Un botón hecho con <a> no lleva subrayado (salía en «Ver Premium», «Ver agenda»). */
a.btn { text-decoration: none; }
.nav a i { display: inline-grid; place-items: center; }
.nav a i svg { display: block; width: 20px; height: 20px; transition: transform var(--dur-2) var(--ease-spring), color var(--dur-2); }
.nav a:hover i svg { transform: translateY(-1px) scale(1.06); }
.nav a.active i { color: rgb(var(--panel-rgb)); opacity: 1; filter: drop-shadow(0 0 6px rgba(var(--panel-rgb), .55)); }
.sidebar .nav a.active {
  background: linear-gradient(90deg, rgba(var(--panel-rgb), .17), rgba(var(--panel-rgb), .04));
  border-color: rgba(var(--panel-rgb), .34);
  box-shadow: inset 3px 0 0 rgb(var(--panel-rgb)), 0 6px 20px -12px rgba(var(--panel-rgb), .6);
}
@media (max-width: 900px) {
  .bottomnav a i svg { width: 22px; height: 22px; }
  .bottomnav a.active { background: rgba(var(--panel-rgb), .15); color: var(--text); }
}
#btn-notifs .ico-bell { display: block; width: 19px; height: 19px; margin: auto; transform-origin: 50% 15%; }
#btn-notifs:hover .ico-bell { animation: bellTilt .6s var(--ease-spring); }
@keyframes bellTilt { 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } }
/* Las etiquetas de las cifras de Dinero caben mejor con menos aire. */
.kpi-top { align-items: flex-start; }
.kpi-top .eyebrow { letter-spacing: .13em; line-height: 1.45; padding-top: 6px; }
/* Hábitos: cuánto llevas de la semana, de un vistazo. */
.habit-semana { height: 6px; margin: 10px 0 8px; border-radius: 99px; background: var(--sunk-60); overflow: hidden; }
.habit-semana i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); box-shadow: 0 0 10px rgba(var(--panel-rgb), .45); animation: growW .9s var(--ease-out) both; }
.habit-card.en-racha { background: radial-gradient(120% 100% at 100% 0%, rgba(251, 146, 60, .10), transparent 60%), var(--surface); }
.habit-card.hecho { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
/* Las metas del Plan: la tarjeta toma el color de su panel. */
.goal-card { background: radial-gradient(130% 120% at 100% 0%, rgba(var(--panel-rgb), .09), transparent 55%), var(--surface); }

/* ============================================================
   EL MAPA DE TU PARTIDA v3 (2026-10-08) — los niveles grandes, los
   pasos pequeños entre ellos y tu personaje donde vas. Lo dibuja
   public/mapa-juego.js; aquí solo su aspecto (claro y oscuro).
   ============================================================ */
.mapa.mapa-juego {
  display: block; position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: none;
  margin: 0 -10px; padding: 4px 10px 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.mj { position: relative; margin: 0 auto; }
.mj-svg { position: absolute; inset: 0; overflow: visible; }
/* La senda: un lecho ancho y suave, con la huella punteada encima. */
.mj-senda-fondo { fill: none; stroke: var(--sunk-60); stroke-width: 18; stroke-linecap: round; }
.mj-senda { fill: none; stroke: var(--border-hi); stroke-width: 2.5; stroke-dasharray: 1 10; stroke-linecap: round; }
/* Lo recorrido brilla con el color del panel y se dibuja al entrar. */
.mj-hecho, .mj-hecho-brillo { fill: none; stroke: url(#mj-grad); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: mjTrazo 1.6s var(--ease-exit) .15s forwards; }
.mj-hecho { stroke-width: 6; }
.mj-hecho-brillo { stroke-width: 16; opacity: .28; }
@keyframes mjTrazo { to { stroke-dashoffset: 0; } }
.mj-salida { fill: var(--text); opacity: .45; }
/* Los pasos: pequeños, y encendidos al cumplirlos. */
.mj-paso { fill: var(--bg-2); stroke: var(--border-hi); stroke-width: 2.2; }
.mj-paso.hecho { fill: rgb(var(--panel-rgb)); stroke: rgba(var(--panel-rgb), .4); stroke-width: 5; }
.mj-paso.siguiente { fill: var(--bg-2); stroke: rgb(var(--panel-rgb)); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: mjLate 1.8s ease-in-out infinite; }
@keyframes mjLate { 50% { transform: scale(1.4); } }
/* Las estaciones (niveles). */
.mj-estacion { position: absolute; z-index: 2; width: 66px; height: 66px; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; color: var(--text); font: inherit; }
.mj-estacion .mapa-orbe { width: 66px; height: 66px; font-size: var(--fs-lg); }
.mj-estacion.done .mapa-orbe { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 14%, transparent), 0 8px 24px -10px color-mix(in srgb, var(--ok) 80%, transparent); }
.mj-estacion.locked .mapa-orbe { background: var(--bg-2); }
.mj-estacion:hover .mapa-orbe { transform: scale(1.06); }
.mj-estacion.current:hover .mapa-orbe { transform: scale(1.12); }
/* La cima: tu meta. Más grande y con corona de luz. */
.mj-estacion.cima { width: 82px; height: 82px; }
.mj-estacion.cima .mapa-orbe { width: 82px; height: 82px; font-size: var(--fs-xl); }
.mj-estacion.cima::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(var(--panel-rgb), .0), rgba(var(--panel-rgb), .55), rgba(var(--panel-2-rgb), .0), rgba(var(--panel-2-rgb), .5), rgba(var(--panel-rgb), .0));
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 66%, transparent 68%); mask: radial-gradient(circle, transparent 58%, #000 60%, #000 66%, transparent 68%);
  animation: spin 14s linear infinite;
}
.mj-estacion.cima.locked .mapa-orbe { color: rgb(var(--panel-rgb)); border-style: solid; border-color: rgba(var(--panel-rgb), .45); }
/* El cartel de cada estación: nivel, nombre y cuántos pasos lleva. */
.mj-cartel {
  position: absolute; left: 50%; width: 140px; transform: translateX(-50%); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center;
}
.mj-cartel.arriba { bottom: calc(100% + 8px); }
.mj-cartel.abajo { top: calc(100% + 8px); }
.mj-cartel b { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--panel-rgb)); filter: brightness(var(--title-bright)); }
.mj-cartel .mapa-nombre { color: var(--text); font-weight: 650; font-size: var(--fs-xs); }
.mj-cartel small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mj-estacion.locked .mj-cartel b, .mj-estacion.locked .mj-cartel .mapa-nombre { color: var(--muted); filter: none; }
.mj-estacion.sel .mj-cartel .mapa-nombre { color: rgb(var(--panel-rgb)); }
/* Tu personaje, parado donde vas. Flota un poco: está vivo. */
.mj-yo { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.mj-yo-in { position: absolute; left: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; transform: translateX(-50%); animation: mjFlota 3.2s ease-in-out infinite; }
.mj-yo.arriba .mj-yo-in { bottom: 14px; flex-direction: column; }
.mj-yo.abajo .mj-yo-in { top: 14px; flex-direction: column-reverse; }
.mj-yo.arriba.en-estacion .mj-yo-in { bottom: 42px; }
.mj-yo.abajo.en-estacion .mj-yo-in { top: 42px; }
.mj-yo.en-cima.arriba .mj-yo-in { bottom: 50px; }
.mj-yo.en-cima.abajo .mj-yo-in { top: 50px; }
@keyframes mjFlota { 50% { translate: 0 -5px; } }
.mj-yo-retrato {
  --rango-c: #cd7f32;
  position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; overflow: hidden; background: var(--bg-2);
  box-shadow: 0 0 0 3px var(--rango-c), 0 0 0 6px rgba(0, 0, 0, .35), 0 12px 28px -8px rgba(0, 0, 0, .7), 0 0 26px rgba(var(--panel-rgb), .55);
}
.mj-yo-retrato img, .mj-yo-retrato svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.mj-yo-inicial { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); }
/* El metal de cada rango (rangos.js dibuja las insignias con el mismo). */
.rango-bronce { --rango-c: #cd7f32; --rg-luz: #ffd6a8; --rg-base: #cd7f32; --rg-sombra: #6b3a12; }
.rango-plata { --rango-c: #d4dbe6; --rg-luz: #ffffff; --rg-base: #c3ccd8; --rg-sombra: #5d6878; }
.rango-oro { --rango-c: #fbbf24; --rg-luz: #fff6c2; --rg-base: #f5b81c; --rg-sombra: #8a5200; }
.rango-platino { --rango-c: #5fd8c6; --rg-luz: #eafffb; --rg-base: #5fd8c6; --rg-sombra: #0b5d57; }
.rango-diamante { --rango-c: #78bdf5; --rg-luz: #f0f9ff; --rg-base: #78bdf5; --rg-sombra: #1e3fa8; }
.rango-leyenda { --rango-c: #e58bf0; --rg-luz: #fff1c4; --rg-base: #e58bf0; --rg-sombra: #5b21b6; }
.mj-yo-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; padding: 3px 9px; border-radius: 99px;
  color: var(--on-accent); background: linear-gradient(100deg, rgb(var(--panel-2-rgb)), rgb(var(--panel-rgb)));
  box-shadow: 0 6px 16px -6px rgba(var(--panel-rgb), .9);
}
.mj-yo.en-cima .mj-yo-tag { background: linear-gradient(100deg, #fbbf24, #fb7185); }
@media (prefers-reduced-motion: reduce) {
  .mj-hecho, .mj-hecho-brillo { animation: none; stroke-dashoffset: 0; }
  .mj-paso.siguiente, .mj-yo-in, .mj-estacion.cima::before { animation: none; }
}
html.is-away .mj-yo-in, html.is-away .mj-paso.siguiente, html.is-away .mj-estacion.cima::before { animation-play-state: paused; }

/* ============================================================
   TU PERSONAJE (2026-10-08) — el jugador de tu partida: su retrato
   con el marco de su rango y su nivel, su hoja (atributos, elegirlo,
   crearlo con tu foto) y la celebración al subir de nivel. Los colores
   del rango (.rango-*) son los del mapa. Tokens del tema: claro y oscuro.
   ============================================================ */
.partida-avatar.partida-heroe {
  position: relative; display: block; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 18px; cursor: pointer;
  background: var(--bg-2); color: inherit; font: inherit;
  box-shadow: 0 0 0 2.5px var(--rango-c, #cd7f32), 0 0 0 5px color-mix(in srgb, var(--rango-c, #cd7f32) 20%, transparent), 0 12px 28px -10px rgba(var(--panel-rgb), .9);
  animation: heroeLatido 3.2s var(--ease-out) infinite;
  transition: transform var(--dur-2, .2s) var(--ease-spring, ease);
}
@keyframes heroeLatido {
  0%, 100% { box-shadow: 0 0 0 2.5px var(--rango-c, #cd7f32), 0 0 0 5px color-mix(in srgb, var(--rango-c, #cd7f32) 20%, transparent), 0 12px 28px -10px rgba(var(--panel-rgb), .9); }
  50% { box-shadow: 0 0 0 2.5px var(--rango-c, #cd7f32), 0 0 0 8px color-mix(in srgb, var(--rango-c, #cd7f32) 10%, transparent), 0 12px 34px -6px rgba(var(--panel-rgb), 1); }
}
.partida-heroe:hover { transform: translateY(-2px) scale(1.04); }
.partida-heroe:active { transform: scale(.97); }
.partida-heroe:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 5px; }
.heroe-img { position: absolute; inset: 0; display: block; border-radius: inherit; overflow: hidden; }
.heroe-img img, .pj-retrato img, .pj-opcion-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.heroe-nivel {
  position: absolute; right: -8px; bottom: -8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 12px; font-weight: 800; line-height: 1;
  color: #16110a; background: var(--rango-c, #cd7f32); border: 2px solid var(--card-solid); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .6);
}

/* La hoja de tu personaje. */
.pj-modal .modal-card { width: min(540px, 100%); }
.pj-heroe { display: flex; align-items: center; gap: 16px; margin: 14px 0 12px; }
.pj-retrato {
  position: relative; flex: none; width: 112px; height: 112px; border-radius: 28px; overflow: hidden; background: var(--bg);
  box-shadow: 0 0 0 3px var(--rango-c, #cd7f32), 0 0 0 7px color-mix(in srgb, var(--rango-c, #cd7f32) 22%, transparent), 0 18px 40px -14px rgba(var(--panel-rgb), .9);
}
.pj-retrato.creando img { filter: saturate(.4) blur(2px); opacity: .7; }
.pj-retrato.creando::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .38) 45%, transparent 70%); background-size: 220% 100%;
  animation: partidaBrillo 1.4s linear infinite;
}
.pj-id { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pj-nombre { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--muted); overflow-wrap: anywhere; }
.pj-nivel { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.05; letter-spacing: -.02em; }
.pj-rango { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 700; }
.pj-rango i { width: 10px; height: 10px; border-radius: 50%; background: var(--rango-c, #cd7f32); box-shadow: 0 0 10px var(--rango-c, #cd7f32); }
.pj-poder { flex: none; min-width: 64px; padding: 8px 10px; border-radius: 16px; text-align: center; background: var(--sunk-50); border: 1px solid var(--border); }
.pj-poder b { display: block; font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pj-poder span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.pj-xp { margin: 0 0 14px; }
.pj-xp-bar { height: 10px; border-radius: 99px; background: var(--sunk-60); border: 1px solid var(--border); overflow: hidden; }
.pj-xp-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); animation: growW 900ms var(--ease-out) both; }
.pj-xp > span { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.pj-atributos { display: grid; gap: 8px; }
.pj-attr { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--sunk-50); border: 1px solid var(--border); }
.pj-attr.dominio { border-color: rgba(var(--panel-rgb), .45); background: linear-gradient(120deg, rgba(var(--panel-rgb), .12), var(--sunk-50) 62%); }
.pj-attr-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-content: center; font-size: 17px; background: var(--card-solid); border: 1px solid var(--border); }
.pj-attr-txt { flex: 1; min-width: 0; }
.pj-attr-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pj-attr-top b { font-size: var(--fs-sm); }
.pj-attr-val { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.pj-attr-bar { height: 7px; margin: 5px 0; border-radius: 99px; background: var(--sunk-60); overflow: hidden; }
.pj-attr-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); animation: growW 900ms var(--ease-out) both; }
.pj-attr.dominio .pj-attr-bar i { background: var(--grad-warm); }
.pj-attr-porque { display: block; font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
.pj-reglas { margin: 10px 0 0; }
.pj-sub { margin: 18px 0 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pj-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.pj-opcion { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--sunk-50);
  color: var(--text); font: inherit; cursor: pointer; transition: transform .15s var(--ease-out), border-color .15s, box-shadow .15s; }
.pj-opcion:hover { transform: translateY(-2px); border-color: var(--border-hi); }
.pj-opcion:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.pj-opcion.sel { border-color: rgb(var(--panel-rgb)); box-shadow: 0 0 0 3px rgba(var(--panel-rgb), .2); }
.pj-opcion-img { width: 64px; height: 64px; margin-bottom: 4px; border-radius: 18px; overflow: hidden; background: var(--bg); }
.pj-opcion b { font-size: var(--fs-sm); }
.pj-opcion small { font-size: 11px; color: var(--muted); }
.pj-crear { margin-top: 16px; padding: 14px; border-radius: 18px; border: 1px solid rgba(var(--panel-rgb), .35);
  background: radial-gradient(120% 120% at 0% 0%, rgba(var(--panel-rgb), .13), transparent 60%), var(--sunk-50); }
.pj-crear .pj-sub { margin-top: 0; color: var(--text); }
.pj-crear .why { margin: 0 0 10px; font-size: var(--fs-sm); }
.pj-crear > .conf { margin: 0 0 12px; }
.pj-crear .chip { margin-left: 6px; vertical-align: middle; letter-spacing: 0; text-transform: none; }
.pj-estilos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.pj-estilo { position: relative; cursor: pointer; }
.pj-estilo input { position: absolute; opacity: 0; pointer-events: none; }
.pj-estilo > span { display: grid; gap: 2px; height: 100%; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--card-solid); transition: border-color .15s, box-shadow .15s; }
.pj-estilo small { font-size: 11px; color: var(--muted); }
.pj-estilo input:checked + span { border-color: rgb(var(--panel-rgb)); box-shadow: 0 0 0 3px rgba(var(--panel-rgb), .2); }
.pj-estilo input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.pj-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); cursor: pointer; }
.pj-aviso input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: rgb(var(--panel-rgb)); }
.pj-cupo { margin: 8px 0 0; text-align: center; }
.pj-acciones { margin-top: 16px; }
#pj-borrar { color: var(--danger); }

/* ¡Subiste de nivel! */
.pj-subida { position: relative; text-align: center; padding-top: 4px; }
.pj-subida > :not(.pj-subida-luz) { position: relative; }
.pj-subida-luz { position: absolute; left: 50%; top: 0; width: 280px; height: 280px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -22%);
  background: radial-gradient(circle, color-mix(in srgb, var(--rango-c, #cd7f32) 50%, transparent), transparent 66%); filter: blur(4px); animation: pjLuz 2.6s ease-in-out infinite; }
.pj-subida .pj-retrato { width: 132px; height: 132px; margin: 6px auto 14px; animation: pjSube 900ms cubic-bezier(.2, 1.4, .4, 1) both; }
.pj-subida-nivel { margin: 4px 0 2px; font-family: var(--font-display); font-size: 42px; line-height: 1; letter-spacing: -.03em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pj-subida-rango { margin: 6px 0 2px; font-weight: 700; }
.pj-subida .modal-actions { justify-content: center; margin-top: 16px; }
@keyframes pjSube { from { transform: translateY(18px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pjLuz { 50% { opacity: .65; transform: translate(-50%, -22%) scale(1.08); } }
.mapa-det-pasos { margin: 6px 0 0; }
@media (max-width: 420px) {
  .pj-heroe { gap: 12px; }
  .pj-retrato { width: 92px; height: 92px; border-radius: 24px; }
  .pj-poder { min-width: 54px; padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .partida-heroe, .pj-retrato.creando::after, .pj-subida .pj-retrato, .pj-subida-luz, .pj-xp-bar i, .pj-attr-bar i { animation: none; }
}
html.is-away .partida-heroe, html.is-away .pj-subida-luz, html.is-away .pj-retrato.creando::after { animation-play-state: paused; }

/* ============================================================
   TÚ — TU PERSONAJE 3D Y TUS ESTADÍSTICAS REALES (2026-10-08). El panel
   de Yo (y de la ventana de la partida), Mídete, las pruebas, el editor de
   apariencia y el camino 3D de la meta. Tokens del tema: claro y oscuro.
   ============================================================ */
.tu-heroe {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); overflow: hidden; padding-top: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(var(--panel-rgb), .22), transparent 62%), radial-gradient(90% 60% at 100% 100%, rgba(180, 92, 255, .12), transparent 60%), var(--surface);
}
.th-escena { position: relative; height: 340px; margin: 0 calc(var(--sp-4) * -1); touch-action: pan-y;
  background: radial-gradient(60% 55% at 50% 58%, rgba(var(--panel-rgb), .28), transparent 70%); }
.th-escena .vitrina-lienzo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.th-escena .vitrina-lienzo:active { cursor: grabbing; }
.th-respaldo { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; transform: translate(-50%, -50%); border-radius: 34px; overflow: hidden;
  box-shadow: 0 0 0 3px var(--rango-c, #cd7f32), 0 20px 50px -18px rgba(var(--panel-rgb), .9); transition: opacity .4s; }
.th-respaldo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-escena.con-3d .th-respaldo { opacity: 0; pointer-events: none; }
.th-info { display: grid; gap: var(--sp-2); }
.th-kicker { font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; font-weight: 800; color: var(--accent-2); }
.th-nombre { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.05; letter-spacing: -.02em; }
.th-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.th-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 750;
  background: var(--sunk-50); border: 1px solid var(--border); }
.th-rango i { width: 9px; height: 9px; border-radius: 50%; background: var(--rango-c, #cd7f32); box-shadow: 0 0 10px var(--rango-c, #cd7f32); }
.th-rango { padding-left: 6px; border-color: color-mix(in srgb, var(--rango-c, #cd7f32) 45%, var(--border)); }
.th-rango .rg-ins { flex: none; margin: -4px 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); }
.th-poder { color: var(--on-accent); background: var(--grad); border-color: transparent; box-shadow: 0 8px 20px -10px rgba(var(--panel-rgb), .9); }
.th-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.th-acciones .btn { flex: 1 1 140px; }
.th-faltan { margin: 0; }
.tu-heroe .pj-xp { margin: 0; }
@media (min-width: 720px) {
  .tu-heroe { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; padding-top: var(--sp-4); }
  .th-escena { margin: 0; height: 380px; border-radius: 18px; }
}

/* Tus estadísticas */
.st-grupos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@media (min-width: 760px) { .st-grupos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* min-width 0: una fila larga (nombre, «tus metas», tramo, cifra, botón) ya no ensancha la página en el celular. */
.st-grupo { min-width: 0; padding: 12px; border-radius: 16px; background: var(--sunk-50); border: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.st-grupo h4 { margin: 0 0 2px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.st-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 10px; border-radius: 13px; background: var(--card-solid); border: 1px solid var(--border); }
.st-fila > .btn { margin-left: auto; }
.st-fila.destacada { border-color: rgba(var(--panel-rgb), .55); background: linear-gradient(120deg, rgba(var(--panel-rgb), .1), var(--card-solid) 60%); }
.st-fila.sin { border-style: dashed; }
.st-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-content: center; font-size: 17px; background: var(--sunk-50); border: 1px solid var(--border); }
.st-txt { flex: 1 1 170px; min-width: 0; }
.st-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.st-top b { font-size: var(--fs-sm); }
.st-meta { font-size: 10.5px; font-weight: 750; color: rgb(var(--panel-rgb)); filter: brightness(var(--title-bright, 1)); }
.st-val { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.st-fila.sin .st-val { font-family: inherit; font-weight: 650; font-size: var(--fs-xs); color: var(--muted); }
.st-bar { position: relative; height: 7px; margin: 5px 0; border-radius: 99px; background: var(--sunk-60); overflow: hidden; }
.st-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--grad); animation: growW 900ms var(--ease-out) both; }
.st-bar em { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px 5px); opacity: .55; }
/* LA ESCALA REALISTA (dueño, 2026-10-08): el tramo junto al número, el techo
   que pone tu evidencia (una rayita en la barra) y qué significa cada número. */
.st-tramo { flex: none; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 750; letter-spacing: .02em; color: var(--muted); background: var(--sunk-50); border: 1px solid var(--border); }
.st-tramo.t-aprendiz { color: #93c5fd; border-color: rgba(147, 197, 253, .35); }
.st-tramo.t-competente { color: #6ee7b7; border-color: rgba(110, 231, 183, .35); }
.st-tramo.t-avanzado { color: #22d3ee; border-color: rgba(34, 211, 238, .4); }
.st-tramo.t-experto { color: #c4b5fd; border-color: rgba(196, 181, 253, .45); }
.st-tramo.t-elite { color: #fcd34d; border-color: rgba(252, 211, 77, .5); }
.st-tramo.t-mundial { color: #fff; border-color: transparent; background: linear-gradient(100deg, #f59e0b, #ec4899, #8b5cf6); }
:root[data-theme="light"] .st-tramo.t-aprendiz { color: #1d4ed8; } :root[data-theme="light"] .st-tramo.t-competente { color: #047857; }
:root[data-theme="light"] .st-tramo.t-avanzado { color: #0e7490; } :root[data-theme="light"] .st-tramo.t-experto { color: #6d28d9; } :root[data-theme="light"] .st-tramo.t-elite { color: #b45309; }
.st-bar u.st-techo { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--text); opacity: .55; text-decoration: none; }
.st-fila.pronto { opacity: .85; }
.st-pronto { font-size: 10.5px !important; letter-spacing: .1em; text-transform: uppercase; }
.st-escala { margin: 0 0 10px; padding: 10px 12px; border-radius: 13px; background: var(--sunk-50); border: 1px solid var(--border); }
.st-escala summary { cursor: pointer; font-weight: 700; font-size: var(--fs-sm); }
.st-escala ul { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 6px; }
.st-escala li { display: grid; gap: 1px; font-size: 12.5px; }
.st-escala li b { font-weight: 750; }
.st-escala li span { color: var(--muted); }
.pr-codigo { margin: 8px 0 12px; padding: 12px 14px; border-radius: 12px; background: #0b0d16; color: #e6edf3; border: 1px solid var(--border-hi); font: 600 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: left; white-space: pre; overflow-x: auto; tab-size: 4; }
.pr-res-tramo { display: inline-block; margin: 4px auto 0; font-size: 12px; padding: 3px 10px; }
/* Tu cuerpo, demostrado: video de tus flexiones o la captura de tu carrera. */
.cu-techo { margin: 14px 0 6px; }
.cu-demostrar { width: 100%; }
.pf-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 10px; }
.pf-tab { min-height: 42px; border-radius: 12px; border: 1px solid var(--border-hi); background: var(--sunk-50); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.pf-tab.sel { border-color: rgba(var(--panel-rgb), .8); background: rgba(var(--panel-rgb), .16); }
.pf-seguro { margin: 6px 0 10px; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.pf-acepto { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; cursor: pointer; }
.pf-acepto input { margin-top: 2px; flex: none; width: 18px; height: 18px; }
.pr-res-techo { margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: rgba(var(--panel-rgb), .1); border: 1px solid rgba(var(--panel-rgb), .35); font-size: var(--fs-sm); line-height: 1.45; }
.st-porque { display: block; font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
.st-fuente { opacity: .85; }
.st-aviso { color: var(--warn); font-weight: 650; }
.st-fila .btn { flex: none; }
.st-nota { margin: 2px 0 0; }
.st-reglas { margin-top: var(--sp-3); }
.st-reglas > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px;
  border-radius: 12px; background: var(--sunk-50); border: 1px solid var(--border); font-weight: 650; font-size: var(--fs-sm); }
.st-reglas > summary::-webkit-details-marker { display: none; }
.st-reglas[open] > summary .chapter-caret { transform: rotate(90deg); }
.st-reglas ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.st-reglas li b { color: var(--text); }

/* La ventana de tu personaje (desde la partida). La tarjeta de dentro no
   recorta (la escena ocupa todo el ancho con márgenes negativos: con
   overflow:hidden se cortaban el escudo y los costados) ni pinta su borde
   (salía un marco dentro de otro). */
.tu-modal .modal-card { width: min(640px, 100%); padding-top: 0; }
.tu-ventana .tu-heroe, .tu-ventana .tu-stats { box-shadow: none; border: 0; background: none; padding-left: 0; padding-right: 0; overflow: visible; backdrop-filter: none; }
.tu-ventana .tu-heroe::before, .tu-ventana .tu-stats::before { display: none; }
/* (en el teléfono, las tarjetas llevan fondo sólido con !important: aquí no) */
.tu-ventana .tu-heroe, .tu-ventana .tu-stats { background: transparent !important; }
.tu-ventana .th-escena { margin: 0 -24px; }

/* Mídete */
.md-lista { display: grid; gap: 8px; margin: var(--sp-3) 0; }
.md-op { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--sunk-50); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s; }
.md-op:hover { transform: translateY(-1px); border-color: rgba(var(--panel-rgb), .55); }
.md-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-content: center; font-size: 20px; background: var(--card-solid); border: 1px solid var(--border); }
.md-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.md-txt small { color: var(--muted); font-size: var(--fs-xs); }
.md-val { flex: none; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); }

/* Las pruebas */
.pr { display: grid; gap: var(--sp-3); }
.pr-intro, .pr-res { text-align: center; justify-items: center; }
.pr-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-content: center; font-size: 32px; background: var(--grad); box-shadow: 0 14px 34px -14px rgba(var(--panel-rgb), .9); }
.pr-cab { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: 750; color: var(--muted); letter-spacing: .04em; }
.pr-tiempo { height: 6px; border-radius: 99px; background: var(--sunk-60); overflow: hidden; }
.pr-tiempo i { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--grad); transition: width .1s linear; }
.pr-tiempo i.poco { background: var(--grad-warm); }
.pr-pregunta { margin: var(--sp-2) 0; font-family: var(--font-display); font-size: clamp(22px, 6vw, 30px); font-weight: 800; line-height: 1.25; text-align: center; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pr-entrada { width: 100%; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--border-hi); background: var(--bg); color: var(--text);
  font: 800 26px/1 var(--font-display); text-align: center; letter-spacing: .06em; }
.pr-entrada:focus { outline: none; border-color: rgb(var(--panel-rgb)); box-shadow: 0 0 0 4px rgba(var(--panel-rgb), .2); }
/* La pista («Tu respuesta (en m/s)») cabe entera; lo que escribes, grande. */
.pr-entrada::placeholder { font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; }
.pr-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Las situaciones y los acertijos son párrafos: se leen, no se gritan. */
.pr-pregunta.larga { font-family: inherit; font-size: var(--fs-md); font-weight: 600; line-height: 1.5; text-align: left; letter-spacing: 0; }
.pr-opciones.larga { grid-template-columns: 1fr; }
.pr-opciones.larga .pr-op { padding: 12px 14px; text-align: left; font-family: inherit; font-size: var(--fs-sm); font-weight: 650; line-height: 1.4; }
.pr-nivel { padding: 2px 9px; border-radius: 99px; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent); letter-spacing: .02em; }
.pr-op { padding: 16px 10px; border-radius: 14px; border: 1.5px solid var(--border-hi); background: var(--sunk-50); color: var(--text); font: 800 var(--fs-md)/1.2 var(--font-display); cursor: pointer; transition: transform .12s, border-color .12s, background .12s; }
.pr-op:hover { transform: translateY(-1px); border-color: rgb(var(--panel-rgb)); }
.pr-op.bien { background: color-mix(in srgb, var(--ok) 22%, transparent); border-color: var(--ok); }
.pr-op.mal { background: color-mix(in srgb, var(--danger) 18%, transparent); border-color: var(--danger); }
.pr-cifras { font: 800 clamp(34px, 11vw, 52px)/1.1 var(--font-display); letter-spacing: .12em; text-align: center; padding: 18px 0; color: rgb(var(--panel-rgb)); filter: brightness(var(--title-bright, 1)); }
.pr-instr { margin: 0; text-align: center; }
.pr.pr-bien { animation: prBien .5s var(--ease-out); }
.pr.pr-mal { animation: prMal .45s var(--ease-out); }
@keyframes prBien { 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 45%, transparent); border-radius: 16px; } }
@keyframes prMal { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.pr-res-valor { font-family: var(--font-display); font-size: 64px; line-height: 1; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-res-cambio { margin: 0; font-weight: 700; }
.pr-res-cambio.sube { color: var(--ok); }
.pr-res-cambio.baja { color: var(--muted); }

/* El editor de cómo se ve */
.ap-modal .modal-card { width: min(560px, 100%); }
.ap { display: grid; gap: 12px; }
.ap-vista { position: relative; height: 300px; margin: 0 -24px; background: radial-gradient(55% 55% at 50% 60%, rgba(var(--panel-rgb), .28), transparent 72%); touch-action: pan-y; }
.ap-vista .vitrina-lienzo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.ap-vista.con-3d .th-respaldo { opacity: 0; }
.ap-vista.creando .vitrina-lienzo { filter: blur(3px) saturate(.4); }
.ap-vista.creando::after { content: "Creando tu personaje…"; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 99px;
  font-size: var(--fs-xs); font-weight: 750; color: var(--on-accent); background: var(--grad); animation: fadeUp .3s both; }
.ap-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ap-preset { display: grid; justify-items: center; gap: 4px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--sunk-50); color: var(--text); font: inherit; cursor: pointer; }
.ap-preset img { width: 54px; height: 54px; border-radius: 15px; object-fit: cover; }
.ap-preset b { font-size: var(--fs-sm); }
.ap-preset.sel, .ap-chip.sel { border-color: rgb(var(--panel-rgb)); box-shadow: 0 0 0 3px rgba(var(--panel-rgb), .2); }
.ap-grupo { display: grid; gap: 7px; }
/* Los de leyenda (Sombra, Arcano): su retrato sacado de su propio modelo. */
.ap-leyendas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ap-leyenda { display: grid; justify-items: center; gap: 5px; padding: 8px 6px 9px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--sunk-50); color: var(--text); font: inherit; cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 160ms, box-shadow 160ms; }
.ap-leyenda img, .ap-leyenda-ico { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; background: radial-gradient(circle at 50% 35%, rgba(var(--panel-rgb), .35), transparent 70%), var(--card-solid); }
.ap-leyenda-ico { display: grid; place-content: center; font-size: 24px; color: var(--accent-2); }
.ap-leyenda b { font-size: var(--fs-sm); }
.ap-leyenda small { margin-top: -3px; font-size: var(--fs-xs); color: var(--muted); }
.ap > .ap-leyendas { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.ap > .ap-leyendas .ap-leyenda img { width: 84px; height: 84px; border-radius: 20px; }
.ap-leyenda:hover { transform: translateY(-2px); }
.ap-leyenda.sel { border-color: rgb(var(--panel-rgb)); box-shadow: 0 0 0 3px rgba(var(--panel-rgb), .2), 0 10px 24px -14px rgba(var(--panel-rgb), .9); }
.ap-leyenda:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ap-nota { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.ap-solo-clase { transition: opacity 200ms; }
.ap-solo-clase.ap-apagado { opacity: .42; }
.ap-et { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chip { padding: 7px 12px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--sunk-50); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 650; cursor: pointer; }
.ap-colores { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-color { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--card-solid); background: var(--c); box-shadow: 0 0 0 1px var(--border-hi); cursor: pointer; transition: transform .12s; }
.ap-color:hover { transform: scale(1.08); }
.ap-color.sel { box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 4px rgb(var(--panel-rgb)); }
.ap-chip:focus-visible, .ap-color:focus-visible, .ap-preset:focus-visible, .md-op:focus-visible, .pr-op:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ap-ia { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--sunk-50); border: 1px solid var(--border); }
.ap-ia-img { width: 46px; height: 46px; border-radius: 14px; overflow: hidden; flex: none; }
.ap-ia-img img { width: 100%; height: 100%; object-fit: cover; }
.ap-ia-txt { flex: 1; min-width: 0; display: grid; }
.ap-ia-txt small { color: var(--muted); font-size: var(--fs-xs); }

/* El camino 3D de la meta (encima del mapa plano) */
.c3 { position: relative; height: 360px; margin: 0 calc(var(--sp-4) * -1); overflow: hidden; border-radius: 0; opacity: 0; transition: opacity .6s var(--ease-out); }
.c3.listo { opacity: 1; }
@media (min-width: 720px) { .c3 { height: 420px; margin: 0; border-radius: 16px; } }
.c3-lienzo { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; touch-action: pan-y; cursor: grab; }
.c3-capa { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.c3-cartel { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 180px; padding: 6px 11px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(12, 12, 24, .62); color: #fff; font: inherit; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  white-space: nowrap; cursor: pointer; transition: opacity .25s; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8); }
.c3-cartel b { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #c7cbff; }
.c3-cartel span { font-weight: 700; font-size: 12px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.c3-cartel small { font-size: 10.5px; color: #c4c4d4; }
.c3-cartel.current { border-color: rgba(var(--panel-rgb), .8); box-shadow: 0 0 0 3px rgba(var(--panel-rgb), .2), 0 10px 24px -12px rgba(var(--panel-rgb), .9); }
.c3-cartel.done b { color: #6ee7b7; }
.c3-cartel.cima { border-color: rgba(251, 191, 36, .7); }
.c3-cartel.cima b { color: #fcd34d; }
.c3-botones { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 2; }
.c3-btn { border: 1px solid rgba(255, 255, 255, .22); background: rgba(12, 12, 24, .58); color: #fff; border-radius: 99px; padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 650;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; }
.c3-btn:focus-visible, .c3-cartel:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* El cartel de UN subpaso (al tocar su piedra, o el tuyo al llegar). */
.c3-cartel.c3-paso { cursor: default; pointer-events: none; z-index: 1; max-width: 220px; white-space: normal; text-align: center; padding: 7px 12px; }
.c3-cartel.c3-paso span { white-space: normal; max-width: 200px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.c3-cartel.c3-paso.tuyo { border-color: rgba(var(--panel-rgb), .85); box-shadow: 0 0 0 3px rgba(var(--panel-rgb), .22), 0 12px 26px -12px rgba(var(--panel-rgb), .9); }
.c3-cartel.c3-paso.tuyo small { color: #fff; font-weight: 700; }
.c3-cartel.c3-paso.hecho b, .c3-cartel.c3-paso.hecho small { color: #6ee7b7; }

/* ============================================================
   EXPLORAR TU MUNDO (dueño, 2026-10-08: «no se puede ver la siguiente
   meta… mejor control de la cámara… una pestañita no me agrada»). En la
   página el mundo es una vista previa; a pantalla completa se explora y
   cada nivel tiene su FICHA dentro del mundo: abajo en el teléfono, a un
   lado en pantallas anchas.
   ============================================================ */
.c3.mundo-completo { position: fixed; inset: 0; z-index: 70; height: auto; margin: 0; border-radius: 0; opacity: 1; background: #05060d; }
html.con-mundo-completo, html.con-mundo-completo body { overflow: hidden; }
.mundo-completo .c3-lienzo { touch-action: none; }
.mundo-raiz:not(.completo) .mundo-barra, .mundo-raiz:not(.completo) .mundo-ficha, .mundo-raiz:not(.completo) .mundo-pista,
.mundo-raiz:not(.completo) [data-c3="meta"], .mundo-raiz:not(.completo) [data-c3="yo"] { display: none; }
.mundo-raiz.completo [data-c3="explorar"] { display: none; }
.mundo-raiz.con-ficha .c3-botones { display: none; }
.c3-btn.c3-explorar { background: linear-gradient(100deg, rgba(var(--panel-rgb), .9), rgba(34, 211, 238, .78)); border-color: transparent; font-weight: 800; box-shadow: 0 8px 22px -10px rgba(var(--panel-rgb), .95); }
.mundo-barra { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; pointer-events: none;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 14px; background: linear-gradient(rgba(5, 6, 13, .8), rgba(5, 6, 13, 0)); }
.mundo-barra > * { pointer-events: auto; }
.mundo-salir { flex: none; width: 42px; height: 42px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(12, 12, 24, .6); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mundo-titulo { flex: 1; min-width: 0; color: #fff; font-weight: 750; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.mundo-chip { flex: none; padding: 5px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 750; color: #fff; background: rgba(var(--panel-rgb), .35); border: 1px solid rgba(var(--panel-rgb), .6); }
.mundo-completo .c3-botones { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.mundo-pista { position: absolute; left: 50%; top: calc(66px + env(safe-area-inset-top, 0px)); z-index: 3; transform: translateX(-50%); width: max-content; max-width: min(92%, 440px); padding: 8px 14px; border-radius: 12px;
  background: rgba(12, 12, 24, .74); color: #e8e9ff; font-size: 12.5px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .5s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mundo-pista.ver { opacity: 1; }
.mundo-ficha { position: absolute; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 4; max-height: min(54%, 470px); overflow: auto; overscroll-behavior: contain;
  padding: 14px 16px 12px; border-radius: 20px; color: #f1f3f7; background: rgba(13, 14, 26, .9); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 -10px 40px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(var(--panel-rgb), .18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: fichaSube .32s var(--ease-out) both; }
@media (min-width: 720px) { .mundo-ficha { left: auto; right: 16px; top: calc(72px + env(safe-area-inset-top, 0px)); bottom: 16px; width: 380px; max-height: none; } }
@keyframes fichaSube { from { transform: translateY(24px); opacity: 0; } }
.mundo-ficha-cab { display: flex; align-items: center; gap: 8px; }
.mundo-ficha-cab b { flex: 1; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #c7cbff; }
.mundo-ficha-estado { flex: none; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 750; background: rgba(255, 255, 255, .08); color: #c4c4d4; }
.mundo-ficha-estado.done { color: #6ee7b7; background: rgba(52, 211, 153, .14); }
.mundo-ficha-estado.current { color: #fff; background: rgba(var(--panel-rgb), .45); }
.mundo-ficha-x { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font-size: 14px; cursor: pointer; }
.mundo-ficha-titulo { margin: 10px 0 2px; font-size: 19px; font-weight: 780; line-height: 1.25; color: #fff; }
.mundo-ficha-tema { margin: 0; font-size: 12.5px; color: #b9bccb; }
.mundo-ficha-bloque { margin-top: 12px; }
.mundo-ficha-bloque h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #9ea3b8; font-weight: 800; }
.mundo-ficha-bloque ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.mundo-ficha-bloque p { margin: 0; font-size: 13px; line-height: 1.5; }
.mundo-subpasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mundo-subpasos button { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px 8px 32px; border-radius: 10px;
  border: 1px solid transparent; background: rgba(255, 255, 255, .05); color: inherit; font: inherit; font-size: 13px; text-align: left; line-height: 1.35; cursor: pointer; }
.mundo-subpasos button::before { content: ''; position: absolute; left: 11px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2px solid #7d8199; }
.mundo-subpasos .hecho button::before { background: #34d399; border-color: #34d399; }
.mundo-subpasos .hecho span { color: #9ea3b8; }
.mundo-subpasos .tuyo button { border-color: rgba(var(--panel-rgb), .7); background: rgba(var(--panel-rgb), .16); }
.mundo-subpasos .tuyo button::before { border-color: rgb(var(--panel-rgb)); background: rgba(var(--panel-rgb), .45); animation: subpasoLate 1.6s ease-in-out infinite; }
.mundo-subpasos .sel button { border-color: rgba(255, 255, 255, .55); }
.mundo-subpasos small { flex: none; font-size: 11px; color: #9ea3b8; }
.mundo-subpasos .tuyo small { color: #fff; font-weight: 700; }
.mundo-ficha-nota { margin: 10px 0 0; font-size: 12.5px; color: #b9bccb; }
.mundo-ficha-accion { display: block; width: 100%; margin-top: 12px; min-height: 46px; border: 0; border-radius: 14px; background: var(--grad); color: var(--on-accent); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.mundo-ficha-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.mundo-ficha-nav button { flex: 1; min-height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mundo-ficha-nav button:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .mundo-ficha { animation: none; } .mundo-subpasos .tuyo button::before { animation: none; } }
/* Los subpasos del nivel, debajo del camino: uno por misión. */
.mapa-subpasos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.mapa-subpasos li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 10px 7px 34px; border-radius: 10px; background: var(--sunk-50); border: 1px solid transparent; font-size: var(--fs-sm); line-height: 1.35; }
.mapa-subpasos li::before { content: ''; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2px solid var(--muted); opacity: .7; }
.mapa-subpasos li.hecho::before { background: var(--ok); border-color: var(--ok); opacity: 1; }
.mapa-subpasos li.tuyo { border-color: rgba(var(--panel-rgb), .55); background: rgba(var(--panel-rgb), .1); }
.mapa-subpasos li.tuyo::before { border-color: rgb(var(--panel-rgb)); background: rgba(var(--panel-rgb), .35); opacity: 1; box-shadow: 0 0 0 4px rgba(var(--panel-rgb), .18); animation: subpasoLate 1.6s ease-in-out infinite; }
.mapa-subpasos li.sel { border-color: rgba(var(--panel-rgb), .9); }
.mapa-subpasos li.hecho span { color: var(--muted); }
.mapa-subpasos small { flex: none; font-size: 11px; color: var(--muted); }
.mapa-subpasos li.tuyo small { color: var(--text); font-weight: 700; }
.mapa-subpasos-mas { margin: 6px 0 0; }
@keyframes subpasoLate { 50% { box-shadow: 0 0 0 7px rgba(var(--panel-rgb), .06); } }
@media (prefers-reduced-motion: reduce) { .mapa-subpasos li.tuyo::before { animation: none; } }
.mapa.oculto-3d { display: none; }
/* Con el mundo 3D, la ficha de cada nivel sale DENTRO del mundo: la caja de
   abajo (la «pestañita») sobra. El camino clásico y el mapa plano la siguen usando. */
.mapa.con-mundo + .mapa-detalle { display: none; }
@media (prefers-reduced-motion: reduce) {
  .st-bar i, .pr.pr-bien, .pr.pr-mal { animation: none; }
  .c3 { transition: none; }
}

/* ============================================================
   PLAN v2 (2026-10-08, dueño: «la parte de plan es de las peores en
   estética… al crear el plan y cuando abres el plan»). Tus partidas con
   su camino en pequeño, la nueva partida, las preguntas de una en una,
   la espera con tu personaje caminando y la estrategia por etapas.
   ============================================================ */
/* ============================================================
   TUS PARTIDAS (dueño, 2026-10-09: «hazlo ver especial… algo 3D,
   interactividad para entrar»; y después: «no me gustaron los colores del
   plan: mira qué favorecería con nuestra paleta»). Con la paleta de YINN:
   índigo, cian y violeta (el mismo degradado de los botones). La tarjeta
   principal es una noche índigo con su camino en perspectiva; lo demás
   sigue el tema (claro u oscuro) con brillos del panel. Las tarjetas se
   inclinan (capas a distintas alturas) y se abren como un portal
   (partidas.js). Solo diseño: los datos son los de siempre.
   ============================================================ */
@property --pt-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pt-zona {
  --noche-0: #070818; --noche-1: #0c0e26; --noche-2: #151a46; --noche-txt: #eef0ff; --noche-gris: #a9b0dc; --noche-gris-2: #7c84b8;
  --noche-linea: rgba(165, 180, 252, .16); --noche-linea-2: rgba(165, 180, 252, .3);
  --pt-grad: var(--grad);
  --pt-texto: linear-gradient(100deg, #ffffff 0%, #c7d2fe 45%, #67e8f9 100%);
  display: grid; gap: var(--sp-3);
}
/* (con !important: en el celular, .card lleva un fondo sólido forzado por rendimiento) */
.pt-zona .card { margin: 0; }

/* --- La cabecera: tu personaje, tu rango y lo que llevas --- */
.pt-cab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 16px; overflow: hidden; padding: 18px;
  background: radial-gradient(90% 130% at 0% 0%, rgba(var(--panel-rgb), .22), transparent 58%), radial-gradient(80% 120% at 100% 100%, rgba(180, 92, 255, .16), transparent 60%), var(--card-solid) !important; }
.pt-cab::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(var(--panel-rgb), .08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--panel-rgb), .08) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask: radial-gradient(110% 100% at 100% 0%, #000, transparent 70%); mask: radial-gradient(110% 100% at 100% 0%, #000, transparent 70%); }
.pt-cab > * { position: relative; }
.pt-cab .ph-avatar { display: block; width: 66px; height: 66px; border-radius: 20px; overflow: hidden; background: var(--bg-2);
  box-shadow: 0 0 0 2px var(--rango-c, #cd7f32), 0 0 0 5px rgba(var(--panel-rgb), .18), 0 18px 30px -14px rgba(var(--panel-rgb), .7); }
.pt-cab .ph-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-cab > .pt-cab-ins { position: absolute; left: 66px; top: 62px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); pointer-events: none; }
.pt-cab .ph-txt { min-width: 0; }
.pt-cab .ph-kicker { display: block; font-size: var(--fs-xs); letter-spacing: .3em; text-transform: uppercase; font-weight: 800; color: rgb(var(--panel-rgb)); filter: brightness(var(--title-bright, 1)); }
.pt-cab .ph-titulo { margin: 4px 0 4px; font: 800 clamp(24px, 6.6vw, 32px)/1.05 var(--font-display); letter-spacing: -.025em;
  background: var(--pt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-cab .conf { margin: 0; }
.pt-cab-datos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.pt-cab-datos span { display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; background: var(--sunk-50); border: 1px solid var(--border); }
.pt-cab-datos b { font: 800 var(--fs-lg)/1 var(--font-display); letter-spacing: -.02em; background: var(--pt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.pt-cab-datos small { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--muted); }

/* --- Lo común de las tarjetas que se inclinan --- */
.partida-card { position: relative; display: block; color: var(--text); text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.partida-card .pt-3d { position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; }
.partida-card.tocando .pt-3d { transition-duration: .14s, .3s, .3s; }
.partida-card:focus-visible .pt-3d { box-shadow: 0 0 0 2px rgb(var(--panel-rgb)), 0 0 0 6px rgba(var(--panel-rgb), .2); }
.pt-brillo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(var(--panel-rgb), .22), rgba(var(--panel-rgb), .05) 30%, transparent 55%); }
.partida-card.tocando .pt-brillo, .partida-card:hover .pt-brillo { opacity: 1; }
.pt-estado { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 750; letter-spacing: .02em;
  color: var(--muted); background: var(--sunk-50); border: 1px solid var(--border); white-space: nowrap; }
.pt-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.pt-estado.active::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.pt-estado.paused::before { background: var(--warn); }
.pt-estado.completed { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.pt-estado.completed::before { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }

/* --- La principal: una noche índigo con su camino en perspectiva --- */
.pt-principal { perspective: 1100px; border-radius: 28px; color: var(--noche-txt); }
.pt-principal .pt-3d { display: grid; border-radius: 28px; background: linear-gradient(180deg, var(--noche-2), var(--noche-0)); border: 1px solid var(--noche-linea-2);
  box-shadow: inset 0 1px 0 rgba(199, 210, 254, .12), 0 44px 80px -44px rgba(var(--panel-rgb), .55), 0 0 0 1px rgba(0, 0, 0, .35); }
/* Un filo de luz (cian y violeta) que recorre el borde, despacio. */
.pt-principal .pt-3d::before { content: ""; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--pt-ang), transparent 0 60%, rgba(34, 211, 238, .85) 72%, rgba(180, 92, 255, .85) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ptGiro 8s linear infinite; }
@keyframes ptGiro { to { --pt-ang: 360deg; } }
.pt-vista { position: relative; grid-area: 1 / 1; height: 318px; border-radius: 27px 27px 0 0; overflow: hidden; background: var(--noche-0); }
.pt-vista .ph-vista { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pt-velo { grid-area: 1 / 1; height: 318px; border-radius: 27px 27px 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 8, 24, .88) 0%, rgba(7, 8, 24, .45) 26%, transparent 44%, transparent 84%, var(--noche-1) 100%); }
.pt-info { grid-area: 1 / 1; position: relative; display: grid; gap: 12px; align-content: start; padding: 18px; transform-style: preserve-3d; }
.pt-sobre { min-height: 290px; display: grid; align-content: start; gap: 8px; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.pt-cab-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-kicker { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 800; color: #a5f3fc; text-shadow: 0 2px 10px #000; }
.pt-kicker .star { color: #fbbf24; text-shadow: 0 0 12px rgba(251, 191, 36, .7); letter-spacing: 0; }
.pt-principal .pt-estado { color: var(--noche-gris); background: rgba(7, 8, 24, .55); border-color: var(--noche-linea); }
.pt-meta-titulo { margin: 0; max-width: 17ch; font: 800 clamp(22px, 6.4vw, 34px)/1.06 var(--font-display); letter-spacing: -.03em; text-wrap: balance;
  background: var(--pt-texto); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .9)); }
.pt-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.pt-datos span { display: grid; gap: 3px; padding: 11px 12px; border-radius: 16px; background: linear-gradient(180deg, rgba(124, 131, 255, .14), rgba(124, 131, 255, .04));
  border: 1px solid var(--noche-linea); box-shadow: inset 0 1px 0 rgba(199, 210, 254, .1); }
.pt-datos b { font: 800 clamp(20px, 5.6vw, 26px)/1 var(--font-display); letter-spacing: -.02em; background: var(--pt-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-datos small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--noche-gris-2); }
.pt-sig { position: relative; display: grid; gap: 4px; padding: 12px 14px 12px 16px; border-radius: 16px; font-size: var(--fs-sm); line-height: 1.4; color: #e0e7ff;
  background: rgba(7, 8, 24, .5); border: 1px solid var(--noche-linea); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.pt-sig::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--grad); box-shadow: 0 0 10px rgba(34, 211, 238, .6); }
.pt-sig span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--noche-gris-2); }
.pt-entrar { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-radius: 18px;
  font: 800 var(--fs-md)/1 var(--font-display); letter-spacing: -.01em; color: var(--on-accent, #05070f); background: var(--grad);
  box-shadow: 0 14px 34px -12px rgba(124, 131, 255, .75); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.pt-entrar i { font-style: normal; font-size: 20px; transition: transform .3s var(--ease-spring); }
.pt-entrar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 160% 0; animation: ptLustre 4.5s ease-in-out infinite 1.2s; }
@keyframes ptLustre { 0%, 70% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.pt-principal:hover .pt-entrar i, .pt-principal.tocando .pt-entrar i { transform: translateX(5px); }
/* Al tocarla, sus capas se separan: se ve la profundidad. */
.pt-principal.tocando .pt-sobre, .pt-principal:hover .pt-sobre { transform: translateZ(46px); }
.pt-principal.tocando .pt-datos, .pt-principal:hover .pt-datos { transform: translateZ(28px); }
.pt-principal.tocando .pt-sig, .pt-principal:hover .pt-sig { transform: translateZ(20px); }
.pt-principal.tocando .pt-entrar, .pt-principal:hover .pt-entrar { transform: translateZ(56px); box-shadow: 0 22px 44px -14px rgba(34, 211, 238, .7); }
.pt-principal.paused .ph-vista, .pt-principal.completed .ph-vista { filter: grayscale(.4); }

/* El camino en perspectiva (partidas.js): noche índigo, lo vencido en verde, lo tuyo en cian. */
.ph-cielo circle { fill: #e0e7ff; opacity: .6; animation: ptTitila 4s ease-in-out infinite; }
.ph-cielo circle:nth-child(3n) { animation-delay: -1.3s; }
.ph-cielo circle:nth-child(3n + 1) { animation-delay: -2.6s; }
@keyframes ptTitila { 50% { opacity: .15; } }
.ph-sierra.lejos { fill: #1f2258; }
.ph-sierra.cerca { fill: #14163c; }
.ph-piedra .ph-sombra { fill: #000; opacity: .5; }
.ph-piedra .ph-lado { fill: #262a66; }
.ph-piedra .ph-cara { fill: #353c86; stroke: #5560c4; stroke-width: .8; }
.ph-piedra text { text-anchor: middle; font-family: var(--font-display); font-weight: 800; fill: #a5b4fc; }
.ph-piedra.done .ph-lado { fill: #157a59; }
.ph-piedra.done .ph-cara { fill: #34d399; stroke: #a7f3d0; }
.ph-piedra.done text { fill: #042f22; }
.ph-piedra.current .ph-lado { fill: #0e7490; }
.ph-piedra.current .ph-cara { fill: #67e8f9; stroke: #ecfeff; filter: drop-shadow(0 0 6px rgba(34, 211, 238, .95)); }
.ph-piedra.current text { fill: #062a35; }
.ph-faro { animation: ptFaro 2.6s ease-in-out infinite; }
@keyframes ptFaro { 50% { opacity: .55; } }
.ph-onda { fill: none; stroke: #67e8f9; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: ptOnda 2.4s ease-out infinite; }
@keyframes ptOnda { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.ph-meta { filter: drop-shadow(0 0 6px rgba(251, 191, 36, .6)); }
.ph-meta.lograda { filter: drop-shadow(0 0 12px rgba(251, 191, 36, 1)); }

/* --- Las demás: con su brillo del panel y su camino en corto --- */
.partidas { display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .partidas { grid-template-columns: 1fr 1fr; } }
.pt-carta { perspective: 900px; border-radius: 22px; }
.pt-carta .pt-3d { display: grid; gap: 10px; padding: 16px 16px 18px; border-radius: 22px;
  background: radial-gradient(120% 110% at 100% 0%, rgba(var(--panel-rgb), .14), transparent 55%), radial-gradient(90% 90% at 0% 100%, rgba(180, 92, 255, .08), transparent 60%), var(--card-solid);
  border: 1px solid var(--border); box-shadow: 0 26px 50px -34px rgba(var(--panel-rgb), .6); }
.pt-carta:hover .pt-3d, .pt-carta.tocando .pt-3d { border-color: rgba(var(--panel-rgb), .5); }
.pt-carta.paused .pt-3d, .pt-carta.completed .pt-3d { background: var(--card-solid); }
.pt-carta.paused .pc-titulo { color: var(--muted); }
.pc-top { display: flex; align-items: flex-start; gap: 10px; }
.pc-titulo { flex: 1; min-width: 0; margin: 0; font: 750 var(--fs-md)/1.25 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; color: var(--text); }
.pc-titulo .star { color: #fbbf24; }
.pc-camino { display: flex; align-items: center; gap: 0; padding: 6px 2px; }
.pc-camino.vacio { padding: 4px 0; }
.pc-sin { font-size: var(--fs-xs); color: var(--muted); }
.pc-punto { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-content: center; font: 800 11px/1 var(--font-display);
  background: var(--sunk-60); border: 2px solid var(--border-hi); color: var(--muted); }
.pc-punto.done { background: color-mix(in srgb, var(--ok) 20%, transparent); border-color: color-mix(in srgb, var(--ok) 70%, transparent); color: var(--ok); }
.pc-punto.current { width: 28px; height: 28px; background: var(--grad); border: 0; color: var(--on-accent); box-shadow: 0 0 0 4px rgba(var(--panel-rgb), .18), 0 6px 16px -6px rgba(var(--panel-rgb), .9); }
.pc-tramo { flex: 1; min-width: 8px; height: 3px; border-radius: 3px; background: var(--border-hi); opacity: .55; }
.pc-tramo.on { background: var(--grad); opacity: 1; }
.pc-meta { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-content: center; font-size: 13px; color: #fbbf24;
  background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .4); }
.pc-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.pc-pie b { color: var(--text); }
.pc-dias { font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--sunk-50); border: 1px solid var(--border); }
.pc-dias.cerca { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pc-siguiente { display: flex; gap: 8px; align-items: baseline; padding: 9px 12px; border-radius: 12px; font-size: var(--fs-sm); line-height: 1.35;
  background: var(--sunk-50); border: 1px solid var(--border); }
.pc-siguiente span { color: rgb(var(--panel-rgb)); font-size: 10px; }
.pt-flecha { position: absolute; right: 14px; bottom: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; color: var(--on-accent);
  background: var(--grad); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s var(--ease-spring); }
.pt-carta:hover .pt-flecha, .pt-carta.tocando .pt-flecha, .pt-carta:focus-visible .pt-flecha { opacity: 1; transform: translateZ(40px); }
.pt-carta.tocando .pc-top, .pt-carta:hover .pc-top { transform: translateZ(26px); }
.pt-carta.tocando .pc-camino, .pt-carta:hover .pc-camino { transform: translateZ(16px); }
.pt-carta .pc-top, .pt-carta .pc-camino { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }

/* --- Entrar: la tarjeta se te viene encima y la meta se abre como un portal --- */
.pt-entrando .pt-zona .partida-card:not(.entrando), .pt-entrando .pt-zona > section { opacity: .18; filter: blur(3px) saturate(.4); transform: scale(.97); transition: opacity .35s, filter .35s, transform .35s; }
.partida-card.entrando { z-index: 5; }
.partida-card.entrando .pt-3d { transform: translateZ(90px) scale(1.02); transition: transform .42s cubic-bezier(.3, .6, .2, 1), box-shadow .3s;
  box-shadow: 0 0 0 1px rgba(103, 232, 249, .5), 0 60px 100px -30px rgba(0, 0, 0, .8), 0 0 70px rgba(124, 131, 255, .35); }
.partida-card.entrando .pt-3d::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(236, 254, 255, .95), rgba(103, 232, 249, .45) 16%, rgba(124, 131, 255, .12) 42%, transparent 60%);
  animation: ptDestello .42s ease-out both; }
@keyframes ptDestello { from { opacity: 0; clip-path: circle(0 at var(--px, 50%) var(--py, 50%)); } to { opacity: 1; clip-path: circle(140% at var(--px, 50%) var(--py, 50%)); } }
.pt-principal.entrando .ph-senda { transform-box: view-box; transform-origin: 180px 60px; animation: ptVuela .42s cubic-bezier(.55, 0, .85, .35) both; }
@keyframes ptVuela { to { transform: scale(2.6); opacity: .25; } }
#view.pt-llega { animation: ptAbre .72s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ptAbre { from { clip-path: circle(0 at var(--px, 50%) var(--py, 120px)); } to { clip-path: circle(1800px at var(--px, 50%) var(--py, 120px)); } }

/* La nueva partida: con el brillo del panel. */
.pt-zona .nueva-partida { display: grid; gap: 12px; background: radial-gradient(100% 120% at 100% 0%, rgba(var(--panel-rgb), .16), transparent 58%), var(--card-solid) !important;
  border: 1px dashed rgba(var(--panel-rgb), .4); }
.np-cab { display: flex; gap: 12px; align-items: flex-start; }
.np-cab h3 { margin: 0 0 2px; font-family: var(--font-display); }
.np-cab .conf { margin: 0; }
.np-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-content: center; font-size: 20px; color: var(--on-accent); background: var(--grad);
  box-shadow: 0 10px 24px -10px rgba(var(--panel-rgb), .9); }
.np-campo input { font-size: var(--fs-md); padding: 14px 14px; }
.np-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.np-idea { padding: 6px 11px; border-radius: 99px; border: 1px solid var(--border); background: var(--sunk-50); color: var(--text); font: inherit; font-size: var(--fs-xs); font-weight: 650; cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s; }
.np-idea:hover { border-color: rgba(var(--panel-rgb), .6); background: rgba(var(--panel-rgb), .08); transform: translateY(-1px); }
.np-fila { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.np-fila .field { flex: 1 1 160px; margin: 0; }
.np-fila .btn { flex: 1 1 160px; min-height: 46px; }

@media (min-width: 760px) {
  .pt-cab { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pt-cab-datos { grid-column: auto; grid-template-columns: repeat(3, minmax(92px, auto)); }
  /* La principal, a lo ancho: lo que dice a la izquierda, el camino a la derecha. */
  .pt-principal .pt-3d { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .pt-vista, .pt-velo { grid-area: 1 / 2; height: auto; min-height: 340px; border-radius: 0 27px 27px 0; }
  .pt-velo { background: linear-gradient(90deg, var(--noche-1) 0%, rgba(12, 14, 38, .4) 22%, transparent 45%), linear-gradient(180deg, rgba(7, 8, 24, .5), transparent 30%); }
  .pt-info { grid-area: 1 / 1; padding: 24px; align-content: center; }
  .pt-sobre { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-principal .pt-3d::before, .pt-entrar::after, .ph-cielo circle, .ph-faro, .ph-onda, #view.pt-llega { animation: none; }
  .partida-card .pt-3d, .pt-sobre, .pt-datos, .pt-sig, .pt-entrar, .pt-flecha { transition: none; }
}
html.is-away .pt-principal .pt-3d::before, html.is-away .pt-entrar::after, html.is-away .ph-cielo circle, html.is-away .ph-faro, html.is-away .ph-onda { animation-play-state: paused; }

/* Las preguntas, de una en una */
.iq { display: grid; gap: var(--sp-3); }
.iq-cab h3 { margin: 0 0 4px; }
.iq-cab .why { margin: 0 0 10px; }
.iq-avance { height: 6px; border-radius: 99px; background: var(--sunk-60); overflow: hidden; }
.iq-avance i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--grad); transition: width .35s var(--ease-out); }
.iq-cuenta { display: block; margin-top: 6px; }
.iq-paso { display: none; gap: 8px; }
.iq-paso.activo { display: grid; animation: fadeUp .3s var(--ease-out) both; }
.iq-num { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }
.iq-preg { font-family: var(--font-display); font-size: clamp(19px, 5vw, 24px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.iq-por { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.iq-entrada { width: 100%; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--border-hi); background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-md); }
.iq-entrada:focus { outline: none; border-color: rgb(var(--panel-rgb)); box-shadow: 0 0 0 4px rgba(var(--panel-rgb), .18); }
.iq-final { text-align: center; justify-items: center; padding: 10px 0; }
.iq-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-content: center; font-size: 28px; color: var(--on-accent); background: var(--grad); box-shadow: 0 14px 34px -14px rgba(var(--panel-rgb), .9); }
.iq-final .btn { min-width: 240px; margin-top: 6px; }
.iq-nav { display: flex; gap: 8px; justify-content: space-between; align-items: center; }
.iq-nav #iq-sig { margin-left: auto; }

/* Forjando tu partida */
.forja { overflow: hidden; }
.forja-escena { position: relative; height: 210px; margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 0;
  background: radial-gradient(70% 90% at 50% 100%, rgba(var(--panel-rgb), .22), transparent 70%); }
.forja-camino { position: absolute; left: 6%; right: 6%; bottom: 12px; width: 88%; height: 120px; overflow: visible; }
.forja-senda { fill: none; stroke: var(--sunk-60); stroke-width: 12; stroke-linecap: round; }
.forja-trazo { fill: none; stroke: rgb(var(--panel-rgb)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: forjaTrazo 6.4s var(--ease-out) infinite; filter: drop-shadow(0 0 6px rgba(var(--panel-rgb), .8)); }
@keyframes forjaTrazo { 0% { stroke-dashoffset: 100; } 70%, 100% { stroke-dashoffset: 0; } }
.forja-estacion { fill: var(--bg-2); stroke: var(--border-hi); stroke-width: 3; animation: forjaEstacion 6.4s ease-in-out infinite; }
@keyframes forjaEstacion { 0%, 8% { fill: var(--bg-2); stroke: var(--border-hi); } 18%, 92% { fill: rgb(var(--panel-rgb)); stroke: rgba(var(--panel-rgb), .45); } 100% { fill: var(--bg-2); } }
.forja-heroe { position: absolute; left: 50%; top: 0; width: 170px; height: 190px; transform: translateX(-50%); display: grid; place-items: center; }
.forja-heroe .vitrina-lienzo { width: 100% !important; height: 100% !important; }
.forja .orbe-espera { padding-top: var(--sp-3); }

/* Tu estrategia */
.estrategia { display: grid; gap: var(--sp-3); }
.es-cab h3 { margin: 0 0 8px; }
.es-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.es-chip { padding: 5px 11px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 700; background: var(--sunk-50); border: 1px solid var(--border); }
.es-porque .rationale { margin: 0; }
.es-mas { margin-top: 6px; }
.es-mas > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 650; color: rgb(var(--panel-rgb)); filter: brightness(var(--title-bright, 1)); }
.es-mas[open] > summary { margin-bottom: 6px; }
.es-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.es-etapa { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 0 0 14px; }
.es-etapa:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--border-hi); }
.es-etapa.hecha:not(:last-child)::before { background: color-mix(in srgb, var(--ok) 60%, transparent); }
.es-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-content: center; font: 800 var(--fs-sm)/1 var(--font-display);
  background: var(--sunk-60); border: 2px solid var(--border-hi); color: var(--muted); position: relative; z-index: 1; }
.es-etapa.hecha .es-num { background: color-mix(in srgb, var(--ok) 20%, var(--card-solid)); border-color: var(--ok); color: var(--ok); }
.es-etapa.ahora .es-num { background: var(--grad); border: 0; color: var(--on-accent); box-shadow: 0 0 0 5px rgba(var(--panel-rgb), .16); }
.es-txt { flex: 1; min-width: 0; padding-top: 4px; }
.es-txt b { display: block; font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; }
.es-etapa.despues .es-txt b { color: var(--muted); }
.es-barra { height: 6px; margin: 6px 0 4px; border-radius: 99px; background: var(--sunk-60); overflow: hidden; }
.es-barra i { display: block; height: 100%; border-radius: 99px; background: var(--grad); }
.es-etapa.hecha .es-barra i { background: var(--ok); }
.es-txt small { font-size: var(--fs-xs); color: var(--muted); }
.estrategia #btn-regen { justify-self: start; }
@media (prefers-reduced-motion: reduce) {
  .forja-trazo, .forja-estacion, .iq-paso.activo { animation: none; }
  .forja-trazo { stroke-dashoffset: 0; }
}

/* ============================================================
   HOY, CON VIDA (dueño, 2026-10-08: «dale más vida visualmente, dale
   mejor estructura, más fácil de usar, más cool, más dinamismo»).
   Arriba, tu día de un vistazo (lo hecho, la XP de hoy, tu racha y tu
   personaje); enseguida, la misión de ahora con su caminito; tus hábitos
   en fichas grandes de un toque; y lo demás debajo. Todo entra
   escalonado y lo que cambia se anima (salvo con «reducir movimiento»).
   ============================================================ */
.hoy-entra { animation: hoyEntra .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes hoyEntra { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* --- Tu día --- */
.coach.hoy-cab { padding: 16px 16px 14px; }
.hoy-cab-top { display: flex; align-items: center; gap: 12px; }
.hoy-cab-top .av-stage { margin: -8px -6px -8px -8px; }
.hoy-cab-txt { flex: 1; min-width: 0; }
.coach.hoy-cab .hi { font-size: var(--fs-md); line-height: 1.3; }
.coach.hoy-cab .say { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.55; }
.coach.hoy-cab .sub { margin-top: 10px; }
/* Tu ánimo en una línea: lo que te dice el compañero y «¿Cómo estás hoy?». */
.hoy-animo { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.hoy-animo-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoy-animo .sub-link { flex: none; }
.hoy-marcador { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.hoy-marcador.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hoy-dato { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 68px; padding: 8px 6px;
  border-radius: 16px; background: var(--sunk-50); border: 1px solid var(--border); text-align: center; overflow: hidden; }
.hoy-dato b { position: relative; font-size: 20px; font-weight: 820; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.hoy-dato b small { font-size: 12px; color: var(--muted); font-weight: 700; }
.hoy-dato > span:last-child { position: relative; font-size: 11px; color: var(--muted); font-weight: 650; }
.hoy-anillo { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hoy-anillo svg { width: 54px; height: 54px; transform: rotate(-90deg); margin-top: -13px; }
.hoy-anillo circle { fill: none; stroke-width: 3.2; }
.hoy-anillo .fondo { stroke: var(--border); }
.hoy-anillo .luz { stroke: var(--ok); stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(52, 211, 153, .55)); animation: anilloLlena 1.1s var(--ease-out) both .2s; }
.hoy-dia.lleno { border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .08); }
@keyframes anilloLlena { from { stroke-dasharray: 0 100; } }
.hoy-xp b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hoy-xp.con { border-color: rgba(34, 211, 238, .35); box-shadow: inset 0 0 22px -10px rgba(34, 211, 238, .55); }
.hoy-racha b i { font-style: normal; display: inline-block; margin-right: 2px; filter: grayscale(1) opacity(.55); }
.hoy-racha.viva { border-color: rgba(251, 191, 36, .4); }
.hoy-racha.viva b i { filter: none; animation: llama 1.8s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes llama { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.14) rotate(3deg); } }

/* Tu personaje: nivel, rango y lo que falta para subir (tócalo y lo ves). */
.hoy-jugador { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--border-hi); background: linear-gradient(100deg, rgba(var(--panel-rgb), .16), rgba(34, 211, 238, .06)); color: var(--text); font: inherit; text-align: left;
  transition: transform var(--dur-1) var(--ease-spring), border-color var(--dur-2), box-shadow var(--dur-2); }
.hoy-jugador:hover { border-color: rgba(var(--panel-rgb), .6); box-shadow: 0 10px 26px -16px rgba(var(--panel-rgb), .9); }
.hoy-jugador:active { transform: scale(.98); }
.hoy-jugador-img { flex: none; width: 46px; height: 46px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--sunk-50);
  box-shadow: 0 0 0 2px var(--rango-c, #cd7f32), 0 6px 16px -8px rgba(0, 0, 0, .6); }
.hoy-jugador-img img { width: 100%; height: 100%; object-fit: cover; }
.hoy-jugador-txt { flex: 1; min-width: 0; display: grid; gap: 5px; }
.hoy-jugador-txt b { font-size: var(--fs-sm); font-weight: 750; }
.hoy-jugador-txt small { font-size: 11px; color: var(--muted); font-weight: 600; }
.hoy-xpbar { display: block; height: 8px; border-radius: 99px; background: var(--sunk-50); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.hoy-xpbar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); box-shadow: 0 0 12px rgba(34, 211, 238, .45); animation: barraLlena 1.2s var(--ease-out) both .3s; }
@keyframes barraLlena { from { width: 0; } }
.hoy-jugador-ir { flex: none; font-size: 22px; line-height: 1; color: var(--muted); }

/* --- La misión de ahora: el borde de luz gira despacio --- */
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.quest.hoy-mision { margin-top: 12px; padding: 18px 18px 18px 20px; isolation: isolate; }
.quest.hoy-mision::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: -1;
  background: conic-gradient(from var(--giro), transparent 0 58%, rgba(129, 140, 248, .95) 72%, rgba(34, 211, 238, .95) 84%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: giroBorde 7s linear infinite; }
@keyframes giroBorde { to { --giro: 360deg; } }
.quest.hoy-mision.donefx::after, .quest.hoy-cumplido::after { display: none; }
.hoy-mision-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hoy-mision-cuenta { flex: none; font-size: 11px; font-weight: 750; color: var(--muted); padding: 3px 9px; border-radius: 99px; border: 1px solid var(--border-hi); background: var(--sunk-50); }
.quest.hoy-mision .qt { margin-top: 10px; }
.quest.hoy-cumplido { background: linear-gradient(135deg, rgba(52, 211, 153, .12), rgba(34, 211, 238, .05)), var(--surface-2); }
.quest.hoy-cumplido::before { background: linear-gradient(180deg, #34d399, #22d3ee); box-shadow: 0 0 16px rgba(52, 211, 153, .7); }

/* El caminito de la misión en su nivel (las piedritas del mundo). */
.hoy-camino { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--sunk-50); border: 1px solid var(--border); }
.hoy-camino-pasos { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hoy-camino-pasos i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-hi); background: transparent; }
.hoy-camino-pasos i.hecho { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 8px rgba(52, 211, 153, .55); }
.hoy-camino-pasos i.tuyo { width: 15px; height: 15px; border-color: rgb(var(--panel-rgb)); background: rgba(var(--panel-rgb), .4); box-shadow: 0 0 0 4px rgba(var(--panel-rgb), .18); animation: subpasoLate 1.6s ease-in-out infinite; }
.hoy-camino-barra { position: relative; flex: 1; min-width: 120px; height: 8px; border-radius: 99px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.hoy-camino-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--ok); }
.hoy-camino-barra em { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgb(var(--panel-rgb)); box-shadow: 0 0 0 4px rgba(var(--panel-rgb), .22); animation: subpasoLate 1.6s ease-in-out infinite; }
.hoy-camino-nivel { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; border-radius: 7px; transform: rotate(45deg); background: var(--grad); box-shadow: 0 0 14px rgba(124, 131, 255, .55); }
.hoy-camino-nivel b { transform: rotate(-45deg); font-size: 11.5px; font-weight: 850; color: var(--on-accent); }
.hoy-camino small { flex-basis: 100%; font-size: 11.5px; color: var(--muted); font-weight: 650; }

/* --- Tus hábitos: fichas grandes de un toque --- */
.hoy-habitos .chips-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.hoy-habitos .hchip { position: relative; justify-content: flex-start; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; border-radius: 16px; text-align: left; line-height: 1.25; }
.hoy-habitos .h-check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-hi); display: grid; place-items: center;
  transition: background var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease-spring); }
.hoy-habitos button.hchip:hover .h-check { border-color: var(--accent); transform: scale(1.08); }
.hoy-habitos .hchip.done { background: rgba(52, 211, 153, .08); }
.hoy-habitos .hchip.done .h-check { background: var(--ok); border-color: var(--ok); animation: chequeo .45s var(--ease-spring) both; }
.hoy-habitos .hchip.done .h-check::after { content: "✓"; color: var(--on-accent); font-size: 13px; font-weight: 900; line-height: 1; }
@keyframes chequeo { from { transform: scale(.4); } }
.hoy-habitos .h-nombre { flex: 1; min-width: 0; display: grid; gap: 3px; font-weight: 700; }
.hoy-habitos .h-nombre small { font-size: 11px; font-weight: 600; color: var(--muted); }
.hoy-habitos .hchip.done .h-nombre { color: var(--text); }
.hoy-habitos .hchip.at-risk::after { position: absolute; top: 9px; right: 9px; }

/* Una línea que lleva a un sitio (p. ej. tu agenda, si hoy no hay nada). */
.hoy-fila { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); text-decoration: none; font-size: var(--fs-sm); }
.hoy-fila span:nth-child(2) { flex: 1; }
.hoy-fila b { color: var(--accent-2); font-weight: 700; }
.hoy-fila:hover { border-color: var(--border-hi); }

@media (prefers-reduced-motion: reduce) {
  .hoy-entra, .hoy-anillo .luz, .hoy-xpbar i, .hoy-racha.viva b i, .quest.hoy-mision::after, .hoy-camino-pasos i.tuyo, .hoy-camino-barra em, .hoy-habitos .hchip.done .h-check { animation: none; }
}

/* ============================================================
   LOS RANGOS (dueño, 2026-10-09: «darle más diseño… una animación cool de
   llegaste a tal rango… mejor edición gráfica»). Las insignias las dibuja
   rangos.js; aquí, el panel «Tu rango» y la ceremonia de pantalla completa.
   El metal sale de --rg-luz / --rg-base / --rg-sombra (.rango-*).
   ============================================================ */
.rg-ins { display: block; overflow: visible; }
.rg-ins .rg-brillo { transform-box: view-box; animation: rgBrillo 4.2s ease-in-out infinite; }
.rg-ins .rg-ins-rayos { transform-box: view-box; transform-origin: 60px 58px; animation: rgGira 40s linear infinite; }
.rg-ins .rg-halo { animation: rgLate 3.2s ease-in-out infinite; transform-box: view-box; transform-origin: 60px 58px; }
@keyframes rgBrillo { 0%, 58% { transform: translateX(-20px) skewX(-18deg); } 100% { transform: translateX(210px) skewX(-18deg); } }
@keyframes rgGira { to { transform: rotate(360deg); } }
@keyframes rgLate { 50% { opacity: .55; transform: scale(1.06); } }

/* --- El panel: oscuro, el metal de tu rango encendido --- */
.rg-panel { position: relative; display: grid; gap: var(--sp-3); overflow: hidden;
  background: radial-gradient(80% 70% at 12% 0%, color-mix(in srgb, var(--rango-c) 22%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--surface) 70%, #000), var(--surface));
  border-color: color-mix(in srgb, var(--rango-c) 30%, var(--border)); }
.rg-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(115deg, transparent 0 14px, color-mix(in srgb, var(--rango-c) 5%, transparent) 14px 15px); }
.rg-panel > * { position: relative; }
.rg-actual { display: flex; align-items: center; gap: 14px; }
.rg-actual-ins { flex: none; display: grid; place-items: center; width: 120px; height: 120px; padding: 0; border: 0; border-radius: 28px; background: none; cursor: pointer; perspective: 520px; color: inherit; }
.rg-actual-ins:focus-visible { outline: 2px solid var(--rango-c); outline-offset: 4px; }
.rg-actual-ins .rg-ins { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s var(--ease-out);
  filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--rango-c) 40%, transparent)) drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
  animation: rgFlota 5s ease-in-out infinite; }
.rg-actual-ins:active .rg-ins { transform: scale(.94); }
@keyframes rgFlota { 50% { translate: 0 -4px; } }
.rg-actual-txt { min-width: 0; display: grid; gap: 2px; }
.rg-kicker { font-size: var(--fs-xs); letter-spacing: .24em; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.rg-nombre { margin: 0; font: 800 clamp(30px, 8vw, 40px)/1 var(--font-display); letter-spacing: -.03em;
  background: linear-gradient(100deg, var(--rg-luz), var(--rg-base) 45%, var(--rg-luz) 60%, var(--rg-base)); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: rgMetal 6s linear infinite; }
:root[data-theme="light"] .rg-nombre { background-image: linear-gradient(100deg, var(--rg-sombra), var(--rg-base) 45%, var(--rg-sombra) 60%, var(--rg-base)); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rg-nombre { background-image: linear-gradient(100deg, var(--rg-sombra), var(--rg-base) 45%, var(--rg-sombra) 60%, var(--rg-base)); }
}
@keyframes rgMetal { to { background-position: -220% 0; } }
.rg-lema { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }

.rg-sig { display: grid; gap: 10px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--border); }
.rg-sig-cab { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 650; }
.rg-sig-cab > span:nth-child(2) { flex: 1; }
.rg-sig-ins .rg-ins { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5)); }
.rg-sig-pct { font: 800 var(--fs-sm)/1 var(--font-display); padding: 5px 9px; border-radius: 99px; color: #0b0b10; background: var(--rango-c); }
.rg-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rg-req { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "ico txt num" "ico bar bar"; align-items: center; column-gap: 8px; row-gap: 5px; font-size: var(--fs-sm); }
.rg-req-ico { grid-area: ico; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-size: 12px; background: var(--sunk-50); border: 1px solid var(--border); }
.rg-req-txt { grid-area: txt; font-weight: 650; }
.rg-req-num { grid-area: num; font: 800 var(--fs-xs)/1 var(--font-display); color: var(--muted); }
.rg-req-bar { grid-area: bar; height: 6px; border-radius: 99px; background: var(--sunk-50); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.rg-req-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rg-sombra), var(--rango-c)); box-shadow: 0 0 10px color-mix(in srgb, var(--rango-c) 60%, transparent); animation: barraLlena 1.1s var(--ease-out) both .2s; }
.rg-req.listo .rg-req-ico { color: #0b0b10; background: var(--ok); border-color: transparent; font-weight: 900; }
.rg-req.listo .rg-req-num { color: var(--ok); }
.rg-tope { margin: 0; font-weight: 700; text-align: center; }

/* La escalera: los 6, del bronce a la leyenda. */
.rg-escalera { list-style: none; margin: 0; padding: 4px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; position: relative; }
.rg-escalera::before { content: ""; position: absolute; left: 8%; right: 8%; top: 27px; height: 2px; background: linear-gradient(90deg, var(--border-hi), var(--border)); }
.rg-escalera li { position: relative; display: grid; place-items: center; }
.rg-escalera button { display: grid; justify-items: center; gap: 4px; width: 100%; padding: 4px 0; border: 0; border-radius: 12px; background: none; color: var(--muted); font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-spring), color var(--dur-2); }
.rg-escalera button:hover { transform: translateY(-3px); color: var(--text); }
.rg-escalera button:focus-visible { outline: 2px solid var(--rango-c); outline-offset: 2px; }
.rg-escalera button[aria-pressed="true"] { color: var(--text); background: var(--sunk-50); }
.rg-escalera .bloq .rg-ins { filter: grayscale(1) brightness(.55) contrast(.9); opacity: .7; }
.rg-escalera .logrado .rg-ins { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.rg-escalera .actual button { color: var(--text); }
.rg-escalera .actual .rg-ins { filter: drop-shadow(0 0 10px var(--rango-c)); transform: scale(1.12); }
.rg-escalera .actual button::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rango-c); box-shadow: 0 0 8px var(--rango-c); }
.rg-detalle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
.rg-detalle.abierto { grid-template-rows: 1fr; }
.rg-detalle > * { overflow: hidden; }
.rg-det { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--rango-c) 35%, var(--border));
  background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--rango-c) 14%, transparent), transparent 70%), color-mix(in srgb, var(--bg) 50%, transparent); animation: fadeUp .3s ease both; }
.rg-det-ins { flex: none; }
.rg-det-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.rg-det-estado { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.rg-det-nombre { font: 800 var(--fs-lg)/1.1 var(--font-display); }
.rg-det-lema { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--muted); }
.rg-regla { margin: 0; }

/* El chip de tu rango en Hoy: la insignia en chiquito. */
.hoy-jugador-txt b .rg-ins { display: inline-block; vertical-align: -5px; margin-right: 4px; }

/* --- La ceremonia: «¡Llegaste a Oro!» (siempre de noche) --- */
.rg-sube { position: fixed; inset: 0; z-index: 9600; display: grid; place-items: center; padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px)); overflow: hidden;
  color: #fff; opacity: 0; transition: opacity .35s ease; }
.rg-sube.entra { opacity: 1; }
.rg-sube.sale { opacity: 0; transition-duration: .3s; }
.rg-sube-fondo { position: absolute; inset: 0; cursor: pointer;
  background: radial-gradient(55% 42% at 50% 40%, color-mix(in srgb, var(--rango-c) 34%, transparent), transparent 72%),
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--rg-sombra) 55%, transparent), transparent 70%), rgba(3, 4, 9, .94);
  backdrop-filter: blur(8px); }
.rg-sube-in { position: relative; display: grid; justify-items: center; gap: 10px; width: min(440px, 100%); text-align: center; pointer-events: none; }
.rg-sube-in > * { pointer-events: auto; }
.rg-sube-kicker { margin: 0; font: 800 12px/1 var(--font-display); letter-spacing: .5em; text-transform: uppercase; color: var(--rg-luz); text-shadow: 0 0 18px var(--rango-c); }
.rg-sube-ins { position: relative; display: grid; place-items: center; width: 260px; height: 250px; margin: -10px 0; }
.rg-sube-ins .rg-ins { position: relative; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--rango-c) 70%, transparent)) drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); }
.rg-sube-rayos { position: absolute; left: 50%; top: 50%; width: 820px; height: 820px; margin: -410px 0 0 -410px; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rango-c) 26%, transparent) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 60%); mask: radial-gradient(circle, #000 0 18%, transparent 60%);
  transition: opacity 1s ease .55s; animation: rgGira 28s linear infinite; }
.rg-sube.entra .rg-sube-rayos { opacity: 1; }
.rg-sube-onda { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; border: 3px solid var(--rg-luz); opacity: 0; box-shadow: 0 0 24px var(--rango-c), inset 0 0 24px var(--rango-c); }
.rg-sube-destello { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 12%, color-mix(in srgb, var(--rg-luz) 70%, transparent) 30%, transparent 66%); }
.rg-sube-chispas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.rg-sube-chispas i { position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: var(--rg-luz); box-shadow: 0 0 10px var(--rango-c), 0 0 2px #fff; }
.rg-sube-titulo { margin: 4px 0 0; font: 800 clamp(30px, 8.5vw, 44px)/1.05 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.rg-sube-titulo span { background: linear-gradient(100deg, var(--rg-luz), var(--rg-base) 40%, #fff 52%, var(--rg-base) 64%, var(--rg-luz)); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: rgMetal 3.4s linear infinite; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--rango-c) 55%, transparent)); }
.rg-sube-lema { margin: 0; max-width: 30ch; font-size: var(--fs-md); line-height: 1.4; color: rgba(255, 255, 255, .78); }
.rg-sube-logros { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rg-sube-logros li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 750;
  background: rgba(255, 255, 255, .07); border: 1px solid color-mix(in srgb, var(--rango-c) 45%, transparent); }
.rg-sube-ok { margin-top: 10px; min-width: 180px; }

/* La secuencia: cae la insignia → destello y onda → chispas → el nombre. */
.rg-sube.entra .rg-sube-kicker { animation: rgEntra .6s .1s var(--ease-out) both; }
.rg-sube.entra .rg-sube-ins .rg-ins { animation: rgCae 1.05s .2s cubic-bezier(.2, 1.35, .35, 1) both, rgFlota 4.5s 1.8s ease-in-out infinite; }
.rg-sube.entra .rg-sube-destello { animation: rgDestello .9s .62s ease-out both; }
.rg-sube.entra .rg-sube-onda { animation: rgOnda 1.2s .66s cubic-bezier(.1, .7, .3, 1) both; }
.rg-sube.entra .rg-sube-onda.dos { animation-delay: .86s; }
.rg-sube.entra .rg-sube-chispas i { animation: rgChispa var(--t) .7s cubic-bezier(.12, .75, .3, 1) both; }
.rg-sube.entra .rg-sube-titulo { animation: rgEntra .7s 1s var(--ease-out) both; }
.rg-sube.entra .rg-sube-lema { animation: rgEntra .6s 1.2s var(--ease-out) both; }
.rg-sube.entra .rg-sube-logros { animation: rgEntra .6s 1.35s var(--ease-out) both; }
.rg-sube.entra .rg-sube-ok { animation: rgEntra .6s 1.5s var(--ease-out) both; }
@keyframes rgEntra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rgCae { 0% { opacity: 0; transform: scale(2.6) rotate(-16deg); filter: blur(10px) brightness(3); } 55% { opacity: 1; filter: blur(0) brightness(1.9); } 100% { opacity: 1; transform: none; } }
@keyframes rgDestello { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes rgOnda { 0% { opacity: .95; transform: scale(.35); } 100% { opacity: 0; transform: scale(5.5); } }
@keyframes rgChispa { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1.2); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(.3); } }

@media (prefers-reduced-motion: reduce) {
  .rg-ins .rg-brillo, .rg-ins .rg-ins-rayos, .rg-ins .rg-halo, .rg-actual-ins .rg-ins, .rg-nombre, .rg-req-bar i,
  .rg-sube *, .rg-sube.entra * { animation: none !important; }
  .rg-sube, .rg-sube-rayos, .rg-detalle { transition: none; }
}
html.is-away .rg-ins .rg-brillo, html.is-away .rg-ins .rg-ins-rayos, html.is-away .rg-ins .rg-halo, html.is-away .rg-actual-ins .rg-ins,
html.is-away .rg-nombre, html.is-away .rg-sube-rayos, html.is-away .rg-sube-titulo span { animation-play-state: paused; }

/* ============================================================
   LA PÁGINA DE TU META (dueño, 2026-10-09: «no me gustaron los colores del
   plan: con nuestra paleta»). Su cabecera, como la tarjeta principal de
   Tus partidas: una noche índigo con el título en degradado; lo demás, las
   tarjetas de siempre del tema. (data-meta lo pone el router en <html>.)
   ============================================================ */
:root[data-meta] #view .card.partida { color-scheme: dark; --text: #eef0ff; --muted: #a9b0dc; --border: rgba(165, 180, 252, .18); --sunk-50: rgba(124, 131, 255, .08); --sunk-60: rgba(7, 8, 24, .5);
  color: var(--text); border-color: rgba(165, 180, 252, .3);
  background: radial-gradient(90% 120% at 0% 0%, rgba(124, 131, 255, .3), transparent 58%), radial-gradient(80% 120% at 100% 100%, rgba(180, 92, 255, .22), transparent 60%), linear-gradient(180deg, #151a46, #080a1f) !important; }
:root[data-meta] .partida-kicker { color: #a5f3fc; letter-spacing: .3em; }
:root[data-meta] .partida-titulo { font-size: clamp(22px, 6vw, 30px); background: linear-gradient(100deg, #ffffff 0%, #c7d2fe 45%, #67e8f9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-meta] .partida-porque { border-left: 2px solid rgba(103, 232, 249, .5); padding-left: 10px; }
:root[data-meta] .pstat { text-align: left; padding: 11px 12px; background: linear-gradient(180deg, rgba(124, 131, 255, .16), rgba(124, 131, 255, .04)); }
:root[data-meta] .pstat span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }

/* ============================================================
   HÁBITOS CON VIDA (dueño, 2026-10-09: «así como dinero lo mejoraste
   gráficamente… arréglalos en diseño, más interactividad»). Cada hábito
   con su dibujito, su semana en un anillo y en puntos, su racha encendida
   y un registrar de un toque que celebra. Tokens del tema (claro y oscuro).
   ============================================================ */
.hb-ico { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: 21px; line-height: 1;
  background: linear-gradient(160deg, rgba(var(--panel-rgb), .18), rgba(var(--panel-2-rgb), .06)); border: 1px solid rgba(var(--panel-rgb), .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.hb-anillo { position: relative; flex: none; display: inline-grid; place-items: center; width: var(--t); height: var(--t); }
.hb-anillo svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.hb-anillo .fondo { fill: none; stroke: var(--border-hi); stroke-width: 5; opacity: .6; }
.hb-anillo .luz { fill: none; stroke: rgb(var(--panel-rgb)); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(var(--panel-rgb), .55)); animation: ringDraw 1.1s var(--ease-out) both; }
.hb-anillo.lleno .luz { stroke: var(--ok); filter: drop-shadow(0 0 8px var(--ok)); }
.hb-anillo b { position: relative; font: 800 calc(var(--t) * .3)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hb-anillo b small { font-size: .55em; color: var(--muted); font-weight: 700; }

/* El resumen de tu día de hábitos (como «Disponible hoy» en Dinero). */
.hb-resumen { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; overflow: hidden;
  background: radial-gradient(90% 120% at 0% 0%, rgba(var(--panel-rgb), .2), transparent 58%), radial-gradient(70% 90% at 100% 100%, rgba(var(--panel-2-rgb), .12), transparent 60%), var(--surface); }
.hb-kicker { font-size: var(--fs-xs); letter-spacing: .26em; text-transform: uppercase; font-weight: 800; color: rgb(var(--panel-rgb)); filter: brightness(var(--title-bright, 1)); }
.hb-res-titulo { margin: 4px 0 4px; font: 800 clamp(24px, 6.6vw, 32px)/1.05 var(--font-display); letter-spacing: -.025em; }
.hb-res-txt .conf { margin: 0; }
.hb-res-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hb-res-tiles > span { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--sunk-50); border: 1px solid var(--border); }
.hb-res-tiles i { grid-row: span 2; font-style: normal; font-size: 20px; }
.hb-res-tiles b { font: 800 var(--fs-lg)/1 var(--font-display); letter-spacing: -.02em; }
.hb-res-tiles b small { font-size: .6em; color: var(--muted); }
.hb-res-tiles small { font-size: 11px; color: var(--muted); font-weight: 650; line-height: 1.25; }

/* Las sugerencias: fichas con su dibujito. */
.hb-sug-lista { display: grid; gap: 8px; }
.hb-sug { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 16px; background: var(--sunk-50); border: 1px solid var(--border); transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out); }
.hb-sug:hover { border-color: rgba(var(--panel-rgb), .45); transform: translateY(-1px); }
.hb-sug .hb-ico { width: 38px; height: 38px; font-size: 19px; border-radius: 12px; }
.hb-sug-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hb-sug-txt b { font-size: var(--fs-sm); }
.hb-ritmo { width: fit-content; padding: 1px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; color: rgb(var(--panel-rgb)); background: rgba(var(--panel-rgb), .1); border: 1px solid rgba(var(--panel-rgb), .3); }
.hb-sug-txt p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.hb-adoptar { flex: none; align-self: center; }

/* Cada hábito. */
.hb-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@media (min-width: 760px) { .hb-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .hb-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb-card { display: grid; gap: 10px; align-content: start; animation: fadeUp .45s var(--ease-out) both; animation-delay: calc(var(--hb-i, 0) * 60ms); }
.hb-card.en-racha { background: radial-gradient(110% 90% at 100% 0%, rgba(251, 146, 60, .12), transparent 60%), var(--surface); }
.hb-card.hecho { border-color: color-mix(in srgb, var(--ok) 42%, transparent); background: radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--ok) 12%, transparent), transparent 60%), var(--surface); }
.hb-card.archivado { opacity: .7; }
.hb-cab { display: flex; align-items: center; gap: 12px; }
.hb-nombre { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hb-nombre b { font-size: var(--fs-md); font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.hb-nombre span { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.hb-semana { display: flex; align-items: center; gap: 5px; }
.hb-semana i { flex: 1; max-width: 34px; height: 8px; border-radius: 99px; background: var(--sunk-60); box-shadow: inset 0 0 0 1px var(--border); }
.hb-semana i.on { background: linear-gradient(90deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); box-shadow: 0 0 10px rgba(var(--panel-rgb), .5); }
.hb-semana span { margin-left: 4px; font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.hb-datos { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-datos > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: var(--fs-xs); color: var(--muted); background: var(--sunk-50); border: 1px solid var(--border); }
.hb-datos b { color: var(--text); font-family: var(--font-display); }
.hb-racha i { font-style: normal; filter: grayscale(1) opacity(.5); }
.hb-racha.viva { color: #fdba74; border-color: rgba(251, 146, 60, .4); }
.hb-racha.viva i { filter: none; animation: llama 1.8s ease-in-out infinite; transform-origin: 50% 90%; display: inline-block; }
.hb-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hb-registrar { flex: 1 1 160px; min-height: 46px; font-size: var(--fs-md); }
.hb-registrar.marcando { animation: hbMarca .5s var(--ease-spring) both; }
@keyframes hbMarca { 40% { transform: scale(.94); } 100% { transform: scale(1); } }
.hb-hecho { flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 14px; font-weight: 800;
  color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.hb-hecho i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--on-accent); background: var(--ok); animation: chequeo .45s var(--ease-spring) both; }
.hb-crear h3 { display: flex; align-items: center; gap: 10px; }
.hb-crear h3 .hb-ico { width: 34px; height: 34px; font-size: 18px; border-radius: 11px; }
@media (prefers-reduced-motion: reduce) {
  .hb-card, .hb-anillo .luz, .hb-racha.viva i, .hb-registrar.marcando, .hb-hecho i { animation: none; }
}

/* ============================================================
   YO, ORDENADO (dueño, 2026-10-09: «arréglalos en diseño»). Veinte tarjetas
   seguidas eran una pared: ahora van en tres capítulos (tu compañero y tú,
   cómo te ayudo, tu cuenta) y cada una con su dibujito, como en Dinero.
   ============================================================ */
.yo-seccion { display: flex; align-items: center; gap: 12px; margin: var(--sp-6, 32px) 2px 0; font: 800 var(--fs-xs)/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.yo-seccion::before, .yo-seccion::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-hi)); }
.yo-seccion::after { background: linear-gradient(90deg, var(--border-hi), transparent); }
.yo-seccion span { flex: none; }
.card h3:has(> .yo-ico) { display: flex; align-items: center; gap: 0; }
.yo-ico { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 11px; border-radius: 11px; font-size: 17px; line-height: 1;
  background: linear-gradient(160deg, rgba(var(--panel-rgb), .2), rgba(var(--panel-2-rgb), .06)); border: 1px solid rgba(var(--panel-rgb), .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
:root[data-view="me"] #view > .card { transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out); }
:root[data-view="me"] #view > .card:hover { border-color: rgba(var(--panel-rgb), .38); }

/* ============================================================
   ENTRENAR Y APRENDER, VIVOS (dueño, 2026-10-09: «mejora visualmente como
   mejoraste Dinero, pero a estos más dinamismo y mejor visibilidad»).
   Cada uno con su color (Entrenar, coral y naranja: energía; Aprender,
   violeta y cian), una cabecera con su anillo que se llena al aparecer,
   las etapas o niveles en segmentos que laten, la misión de hoy destacada
   y la semana en fichas. Las piezas las dibuja vivo.js.
   ============================================================ */
.vv-cabecera { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 16px; overflow: hidden;
  background: radial-gradient(90% 130% at 0% 0%, rgba(var(--panel-rgb), .24), transparent 58%), radial-gradient(80% 120% at 100% 100%, rgba(var(--panel-2-rgb), .16), transparent 60%), var(--card-solid) !important;
  border-color: rgba(var(--panel-rgb), .32); animation: fadeUp .5s var(--ease-out) both; }
.vv-cabecera > * { position: relative; }
.vv-luz { position: absolute !important; width: 220px; height: 220px; left: -60px; top: -70px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--panel-rgb), .35), transparent 65%); filter: blur(6px); animation: vvRespira 5s ease-in-out infinite; }
@keyframes vvRespira { 50% { transform: scale(1.15); opacity: .7; } }
.vv-anillo { position: relative; display: grid; place-items: center; width: var(--t); height: var(--t); flex: none; }
.vv-anillo svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.vv-anillo .fondo { fill: none; stroke: var(--border-hi); opacity: .5; }
.vv-anillo .luz { fill: none; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(var(--panel-rgb), .7)); animation: vvLlena 1.3s var(--ease-out) both .15s; }
@keyframes vvLlena { from { stroke-dasharray: 0 var(--largo, 400); } }
.vv-centro { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; max-width: 82%; }
.vv-centro b { font: 800 26px/1 var(--font-display); letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vv-centro b small { font-size: .55em; }
.vv-centro span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--muted); line-height: 1.2; }
.vv-cab-txt { min-width: 0; display: grid; gap: 4px; }
.vv-kicker { font-size: var(--fs-xs); letter-spacing: .26em; text-transform: uppercase; font-weight: 800; color: rgb(var(--panel-rgb)); filter: brightness(var(--title-bright, 1)); }
.vv-titulo { margin: 0; font: 800 clamp(20px, 5.6vw, 26px)/1.1 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.vv-sub { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.vv-sub b { color: var(--text); font-family: var(--font-display); }
.vv-segs { display: flex; gap: 4px; margin-top: 4px; }
.vv-segs i { flex: 1; height: 7px; border-radius: 99px; background: var(--sunk-60); box-shadow: inset 0 0 0 1px var(--border); }
.vv-segs i.on { background: linear-gradient(90deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); box-shadow: 0 0 10px rgba(var(--panel-rgb), .5); }
.vv-segs i.ya { background: rgba(var(--panel-rgb), .35); animation: vvLate 1.6s ease-in-out infinite; }
@keyframes vvLate { 50% { background: rgba(var(--panel-rgb), .75); box-shadow: 0 0 12px rgba(var(--panel-rgb), .7); } }
.vv-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.vv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 750; background: var(--sunk-50); border: 1px solid var(--border);
  animation: chipIn .4s var(--ease-out) both; }
.vv-chip:nth-child(2) { animation-delay: .08s; }
.vv-chip:nth-child(3) { animation-delay: .16s; }
.vv-chip i { font-style: normal; }
.vv-chip.vivo { border-color: rgba(var(--panel-rgb), .45); background: rgba(var(--panel-rgb), .1); }
.vv-chip.vivo i { display: inline-block; animation: llama 1.8s ease-in-out infinite; transform-origin: 50% 90%; }

/* La misión de hoy, destacada. */
.vv-mision { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: start; overflow: hidden;
  border-color: rgba(var(--panel-rgb), .4) !important; box-shadow: 0 18px 40px -26px rgba(var(--panel-rgb), .9); }
.vv-mision::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); }
.vv-mision-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; font-size: 26px;
  background: linear-gradient(150deg, rgba(var(--panel-rgb), .3), rgba(var(--panel-2-rgb), .12)); border: 1px solid rgba(var(--panel-rgb), .4);
  box-shadow: 0 10px 24px -12px rgba(var(--panel-rgb), .9); animation: vvSalta 2.6s ease-in-out infinite; }
@keyframes vvSalta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.vv-mision-txt { min-width: 0; }
.vv-mision-txt h3 { margin: 2px 0 6px; font-family: var(--font-display); }
.vv-min { display: inline-block; margin-left: 4px; padding: 2px 9px; border-radius: 99px; font: 750 var(--fs-xs)/1.4 var(--font-body); color: rgb(var(--panel-rgb)); background: rgba(var(--panel-rgb), .12); vertical-align: 2px; }
.vv-mision .lrn-actions { grid-column: 1 / -1; }
.vv-cta { flex: 1 1 200px; min-height: 50px; font-size: var(--fs-md); }
.vv-bloques li { animation: fadeUp .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }

/* La semana en fichas. */
.vv-semana { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 10px; }
.vv-dia { position: relative; display: grid; gap: 3px; padding: 11px 12px; border-radius: 14px; background: var(--sunk-50); border: 1px solid var(--border);
  animation: fadeUp .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); transition: transform .2s var(--ease-out), border-color .2s; }
.vv-dia:hover { transform: translateY(-2px); border-color: rgba(var(--panel-rgb), .45); }
.vv-dia b { font: 800 var(--fs-sm)/1 var(--font-display); text-transform: capitalize; color: rgb(var(--panel-rgb)); }
.vv-dia span { font-size: var(--fs-xs); font-weight: 650; line-height: 1.3; }
.vv-dia small { font-size: 11px; color: var(--muted); font-weight: 700; }
.vv-dia.hoy { border-color: rgba(var(--panel-rgb), .7); background: linear-gradient(160deg, rgba(var(--panel-rgb), .2), rgba(var(--panel-2-rgb), .06)); box-shadow: 0 10px 26px -14px rgba(var(--panel-rgb), .9); }
.vv-dia em { position: absolute; top: 8px; right: 9px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent); background: var(--grad); padding: 2px 7px; border-radius: 99px; }

/* Entrenar y Aprender: pestañas con el color de la sección y tarjetas con su brillo. */
:root[data-view="fitness"] .money-tabs button.on, :root[data-view="learning"] .money-tabs button.on {
  color: var(--on-accent); background: linear-gradient(100deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); border-color: transparent; box-shadow: 0 8px 20px -10px rgba(var(--panel-rgb), .9); }
:root[data-view="fitness"] #view .card:not(.vv-cabecera):not(.vv-mision), :root[data-view="learning"] #view .card:not(.vv-cabecera):not(.vv-mision) {
  border-color: color-mix(in srgb, rgb(var(--panel-rgb)) 18%, var(--border)); }
:root[data-view="fitness"] #view .card h3, :root[data-view="learning"] #view .card h3 { font-family: var(--font-display); }
:root[data-view="fitness"] .money-bar i, :root[data-view="learning"] .money-bar i { background: linear-gradient(90deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); box-shadow: 0 0 12px rgba(var(--panel-rgb), .5); }
:root[data-view="fitness"] .lrn-title, :root[data-view="learning"] .lrn-title { font-family: var(--font-display); background: linear-gradient(100deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 760px) {
  .vv-cabecera { grid-template-columns: auto minmax(0, 1fr) auto; }
  .vv-chips { grid-column: auto; flex-direction: column; align-items: flex-end; }
}

/* HÁBITOS, MÁS VISIBLES (dueño, 2026-10-09: «mejor visibilidad también a
   hábitos»): cada hábito con SU color (se distinguen de un vistazo), el
   botón de registrar con brillo y la tarjeta que se levanta al pasar. */
.hb-card { --hb-c: var(--panel-rgb); border-color: rgba(var(--hb-c), .28); background: radial-gradient(110% 90% at 100% 0%, rgba(var(--hb-c), .13), transparent 60%), var(--surface);
  transition: transform .2s var(--ease-out), border-color .2s, box-shadow .2s; }
.hb-card:hover { transform: translateY(-3px); border-color: rgba(var(--hb-c), .55); box-shadow: 0 18px 40px -24px rgba(var(--hb-c), .9); }
.hb-card:nth-child(6n + 1) { --hb-c: 124, 131, 255; }
.hb-card:nth-child(6n + 2) { --hb-c: 34, 211, 238; }
.hb-card:nth-child(6n + 3) { --hb-c: 180, 92, 255; }
.hb-card:nth-child(6n + 4) { --hb-c: 52, 211, 153; }
.hb-card:nth-child(6n + 5) { --hb-c: 251, 146, 60; }
.hb-card:nth-child(6n + 6) { --hb-c: 244, 114, 182; }
.hb-card .hb-ico { background: linear-gradient(160deg, rgba(var(--hb-c), .3), rgba(var(--hb-c), .08)); border-color: rgba(var(--hb-c), .45); box-shadow: 0 8px 20px -10px rgba(var(--hb-c), .9); }
.hb-card .hb-anillo .luz { stroke: rgb(var(--hb-c)); filter: drop-shadow(0 0 7px rgba(var(--hb-c), .7)); }
.hb-card .hb-semana i.on { background: rgb(var(--hb-c)); box-shadow: 0 0 10px rgba(var(--hb-c), .6); }
.hb-card .hb-nombre b { font-size: var(--fs-lg); }
.hb-card.hecho { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.hb-registrar { position: relative; overflow: hidden; box-shadow: 0 12px 28px -12px rgba(var(--hb-c, var(--panel-rgb)), .9); }
.hb-registrar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); background-size: 250% 100%; background-position: 160% 0; animation: ptLustre 4s ease-in-out infinite 1s; }
.hb-resumen .hb-anillo .luz { filter: drop-shadow(0 0 10px rgba(var(--panel-rgb), .8)); }

@media (prefers-reduced-motion: reduce) {
  .vv-cabecera, .vv-luz, .vv-anillo .luz, .vv-segs i.ya, .vv-chip, .vv-chip.vivo i, .vv-mision-ico, .vv-bloques li, .vv-dia, .hb-registrar::after { animation: none; }
}
html.is-away .vv-luz, html.is-away .vv-segs i.ya, html.is-away .vv-mision-ico, html.is-away .hb-registrar::after { animation-play-state: paused; }

/* ============================================================
   LA PRUEBA DE CANTO (canto.js): elegir tu voz, la nota en grande y una
   aguja de afinación en vivo (verde al centro = afinado).
   ============================================================ */
.cv-voces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 4px; }
.cv-voz { display: grid; gap: 3px; padding: 12px 8px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--sunk-50); color: var(--text); font: inherit; cursor: pointer; text-align: center;
  transition: border-color .15s, transform .15s, background .15s; }
.cv-voz b { font-family: var(--font-display); }
.cv-voz small { font-size: 10.5px; color: var(--muted); line-height: 1.25; }
.cv-voz.on { border-color: rgb(var(--panel-rgb)); background: rgba(var(--panel-rgb), .12); transform: translateY(-1px); }
.cv-nota { text-align: center; }
.cv-puntos { display: flex; justify-content: center; gap: 6px; margin: 4px 0 12px; }
.cv-puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--sunk-60); box-shadow: inset 0 0 0 1px var(--border-hi); }
.cv-puntos i.on { background: var(--ok); box-shadow: none; }
.cv-puntos i.ya { background: rgb(var(--panel-rgb)); box-shadow: 0 0 10px rgba(var(--panel-rgb), .8); }
.cv-nombre { font: 800 54px/1 var(--font-display); letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: capitalize; animation: pjSube .6s var(--ease-out) both; }
.cv-estado { margin: 10px 0 14px; font-weight: 750; color: var(--muted); min-height: 1.4em; }
.cv-estado.canta { color: var(--text); animation: vvLate 1.1s ease-in-out infinite; }
.cv-medidor { position: relative; height: 34px; border-radius: 99px; background: linear-gradient(90deg, rgba(251, 113, 133, .25), var(--sunk-60) 35%, var(--sunk-60) 65%, rgba(251, 113, 133, .25)); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.cv-zona { position: absolute; left: 37.5%; width: 25%; top: 0; bottom: 0; background: color-mix(in srgb, var(--ok) 22%, transparent); border-left: 1px dashed color-mix(in srgb, var(--ok) 60%, transparent); border-right: 1px dashed color-mix(in srgb, var(--ok) 60%, transparent); }
.cv-aguja { position: absolute; top: 4px; bottom: 4px; left: 50%; width: 6px; margin-left: -3px; border-radius: 99px; background: var(--muted); opacity: .35; transition: left .08s linear, background .15s, opacity .15s; }
.cv-aguja.oye { opacity: 1; background: #fb7185; box-shadow: 0 0 12px #fb7185; }
.cv-aguja.oye.bien { background: var(--ok); box-shadow: 0 0 14px var(--ok); }
.cv-pista { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .cv-nombre, .cv-estado.canta { animation: none; } .cv-aguja { transition: none; } }

/* ============================================================
   TU IMAGEN, CATALOGADA (belleza.js): la tarjeta en «Tú» y la ventana de
   las fotos. Tonos de rosa y lavanda (la imagen tiene su color).
   ============================================================ */
.bz { --bz-rgb: 244, 114, 182; display: grid; gap: 12px;
  background: radial-gradient(90% 120% at 0% 0%, rgba(var(--bz-rgb), .16), transparent 58%), radial-gradient(80% 120% at 100% 100%, rgba(167, 139, 250, .12), transparent 60%), var(--card-solid) !important;
  border-color: rgba(var(--bz-rgb), .3); }
.bz-cab { display: flex; align-items: center; gap: 12px; }
.bz-cab h3 { margin: 2px 0 0; font-family: var(--font-display); }
.bz-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; font-size: 22px; background: linear-gradient(150deg, rgba(var(--bz-rgb), .35), rgba(167, 139, 250, .2)); border: 1px solid rgba(var(--bz-rgb), .45); }
.bz-k { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: rgb(var(--bz-rgb, 244, 114, 182)); }
.bz-que { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bz-que li { padding: 9px 12px; border-radius: 12px; background: var(--sunk-50); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 650; }
.bz-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bz-acc .btn:first-child { flex: 1 1 200px; }
.bz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.bz-tile { display: grid; gap: 6px; align-content: start; padding: 13px 14px; border-radius: 16px; background: var(--sunk-50); border: 1px solid var(--border); animation: fadeUp .4s var(--ease-out) both; }
.bz-tile .bz-k { color: rgb(244, 114, 182); }
.bz-tile b { font: 800 var(--fs-lg)/1.1 var(--font-display); }
.bz-tile p { margin: 0; font-size: var(--fs-sm); line-height: 1.45; }
.bz-tile ul, .bz-tile ol { margin: 2px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--fs-sm); }
.bz-mini { color: var(--muted); font-size: var(--fs-xs) !important; }
.bz-monk { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: 4px 0; }
.bz-monk i { height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.bz-monk i.tu { transform: scale(1.15); box-shadow: 0 0 0 2px var(--text), 0 6px 14px -6px rgba(0, 0, 0, .6); }
.bz-paleta { display: flex; gap: 6px; margin: 4px 0; }
.bz-paleta i { flex: 1; height: 34px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 6px 14px -8px rgba(0, 0, 0, .6); animation: fadeUp .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.bz-ranuras { display: grid; gap: 8px; margin: 6px 0 12px; }
.bz-ranura { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1.5px dashed var(--border-hi); background: var(--sunk-50); cursor: pointer; transition: border-color .15s, background .15s; }
.bz-ranura:hover { border-color: rgba(244, 114, 182, .6); }
.bz-ranura.lista { border-style: solid; border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.bz-ranura input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bz-mini-img { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; font-size: 24px; background: var(--card-solid); border: 1px solid var(--border); }
.bz-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.bz-r-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bz-r-txt small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.bz-ok { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; color: var(--on-accent); background: var(--grad); }
.bz-ranura.lista .bz-ok { background: var(--ok); }
@media (prefers-reduced-motion: reduce) { .bz-tile, .bz-paleta i { animation: none; } }

/* ============================================================
   EN 3D (dueño, 2026-10-09: «mejora bien las que faltan, Ejercicio,
   Aprender y Hábitos: añade mejores cosas, más 3D, más interactivo»).
   Hecho con CSS 3D (vivo.js), sin librerías: un piso isométrico con
   bloques (tapa y caras con su luz), una escalera de tus etapas o
   niveles, tus últimos 14 días en barras de bloque, tus hábitos en
   órbita, fichas que se inclinan hacia el dedo y tarjetas de hábito que
   se voltean. Se gira de lado con el dedo; lo vertical sigue siendo para
   desplazarse. Quien pide menos movimiento lo ve quieto.
   ============================================================ */
.v3-escena { position: relative; margin: 0; height: 196px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: 18px; overflow: hidden;
  background: radial-gradient(70% 80% at 50% 62%, rgba(var(--panel-rgb), .16), transparent 70%), linear-gradient(180deg, transparent, var(--sunk-50)); }
.v3-escena.agarrado { cursor: grabbing; }
.v3-camara { position: absolute; inset: 0 0 34px; perspective: 900px; perspective-origin: 50% 30%; --giro: 0deg; }
.v3-piso { position: absolute; left: 50%; top: 66%; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(calc(-34deg + var(--giro))); transition: transform .5s var(--ease-out); }
.v3-escena.agarrado .v3-piso { transition: none; }
.v3-suelo { position: absolute; width: 330px; height: 150px; left: -165px; top: -75px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--panel-rgb), .28), rgba(var(--panel-rgb), .08) 60%, transparent),
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(var(--panel-rgb), .12) 21px 22px), repeating-linear-gradient(90deg, transparent 0 21px, rgba(var(--panel-rgb), .12) 21px 22px);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.v3-bloque { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--d); transform-style: preserve-3d; transform-origin: 50% 50% 0;
  --c-tapa: rgba(var(--panel-rgb), .9); --c-sur: rgba(var(--panel-rgb), .62); --c-este: rgba(var(--panel-2-rgb), .45);
  transform: scaleZ(.03); transition: transform .8s var(--ease-spring, cubic-bezier(.3, 1.4, .5, 1)); transition-delay: calc(var(--i, 0) * 55ms); cursor: pointer; outline: none; }
.v3-escena.visto .v3-bloque { transform: scaleZ(1); }
.v3-bloque > i { position: absolute; display: block; backface-visibility: visible; }
.v3-tapa { inset: 0; transform: translateZ(var(--h)); border-radius: 3px; background: var(--c-tapa); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.v3-sur, .v3-norte { left: 0; width: var(--w); height: var(--h); transform-origin: 0 0; transform: rotateX(90deg); }
.v3-sur { top: 100%; background: linear-gradient(0deg, var(--c-sur), color-mix(in srgb, var(--c-sur) 70%, #000)); }
.v3-norte { top: 0; background: color-mix(in srgb, var(--c-sur) 60%, #000); }
.v3-este, .v3-oeste { top: 0; width: var(--h); height: var(--d); transform-origin: 0 0; transform: rotateY(-90deg); }
.v3-este { left: 100%; background: linear-gradient(90deg, var(--c-este), color-mix(in srgb, var(--c-este) 55%, #000)); }
.v3-oeste { left: 0; background: color-mix(in srgb, var(--c-este) 50%, #000); }
.v3-bloque:hover .v3-tapa, .v3-bloque:focus-visible .v3-tapa { filter: brightness(1.25); }
.v3-bloque.elegido .v3-tapa { box-shadow: inset 0 0 0 2px #fff, 0 0 18px rgba(var(--panel-rgb), .9); }

/* La escalera: lo subido, encendido; el de hoy, con luz que late; lo que falta, de cristal. */
.v3-escalon.hecho { --c-tapa: linear-gradient(135deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); }
.v3-escalon.hoy { --c-tapa: linear-gradient(135deg, #fff, rgb(var(--panel-rgb)) 70%); --c-sur: rgba(var(--panel-rgb), .85); }
.v3-escalon.hoy .v3-tapa { animation: v3Late 1.8s ease-in-out infinite; }
@keyframes v3Late { 50% { box-shadow: inset 0 0 0 1px #fff, 0 0 26px rgba(var(--panel-rgb), 1); } }
.v3-escalon.falta { --c-tapa: color-mix(in srgb, var(--text) 9%, transparent); --c-sur: color-mix(in srgb, var(--text) 6%, transparent); --c-este: color-mix(in srgb, var(--text) 4%, transparent); }
.v3-escalon.falta .v3-tapa { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent); }
.v3-num { position: absolute; inset: 0; display: grid; place-items: center; font: 800 10px/1 var(--font-display); font-style: normal; color: rgba(255, 255, 255, .92);
  transform: translateZ(calc(var(--h) + .5px)); pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.v3-escalon.falta .v3-num { color: var(--muted); text-shadow: none; }
.v3-marca { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; pointer-events: none;
  transform: translateZ(var(--h)) rotateZ(calc(34deg - var(--giro))) rotateX(-58deg); }
.v3-marca b { position: absolute; left: -17px; bottom: 0; width: 34px; height: 34px; display: grid; place-items: center; font-size: 22px; line-height: 1;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), rgba(var(--panel-rgb), .5) 55%, rgba(var(--panel-rgb), .15));
  box-shadow: 0 0 22px rgba(var(--panel-rgb), .9); animation: v3Salta 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes v3Salta { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(-14px); } }

/* Los días: el color de la barra es lo que hiciste ese día. */
.v3-barra { --c-tapa: linear-gradient(135deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); }
.v3-barra[data-tipo="practica"], .v3-barra[data-tipo="fuerza"] { --c-tapa: linear-gradient(135deg, #22d3ee, #67e8f9); --c-sur: rgba(34, 211, 238, .6); --c-este: rgba(14, 116, 144, .6); }
.v3-barra[data-tipo="repaso"], .v3-barra[data-tipo="caminar"] { --c-tapa: linear-gradient(135deg, #fbbf24, #fde68a); --c-sur: rgba(251, 191, 36, .6); --c-este: rgba(180, 83, 9, .6); }
.v3-barra[data-tipo="prueba"], .v3-barra[data-tipo="movilidad"] { --c-tapa: linear-gradient(135deg, #f472b6, #fbcfe8); --c-sur: rgba(244, 114, 182, .6); --c-este: rgba(157, 23, 77, .6); }
.v3-barra[data-tipo="cardio"] { --c-tapa: linear-gradient(135deg, #34d399, #a7f3d0); --c-sur: rgba(52, 211, 153, .6); --c-este: rgba(4, 120, 87, .6); }
.v3-barra.nada { --c-tapa: color-mix(in srgb, var(--text) 10%, transparent); --c-sur: transparent; --c-este: transparent; }
.v3-barra.hoy .v3-tapa { box-shadow: inset 0 0 0 1.5px #fff, 0 0 16px rgba(var(--panel-rgb), .8); }

.v3-pie { position: absolute; left: 12px; right: 12px; bottom: 8px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; pointer-events: none; }
.v3-pie b { font: 800 var(--fs-xs)/1.2 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--panel-rgb)); filter: brightness(var(--title-bright, 1)); }
.v3-info { font-size: var(--fs-xs); font-weight: 700; color: var(--text); opacity: .85; text-transform: none; }

/* La cabecera con su escena debajo. */
.vv-cabecera.con-escena .vv-cab-escena { grid-column: 1 / -1; margin: -2px -6px 0; }
@media (min-width: 760px) { .vv-cabecera.con-escena .vv-cab-escena { grid-column: 1 / 3; } }
.vv-tarjeta-escena { padding-bottom: 12px; }
.vv-tarjeta-escena h3 { margin-bottom: 6px; }
.vv-leyenda { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--muted); }
.vv-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: linear-gradient(135deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); }
.vv-leyenda i.cian { background: #22d3ee; } .vv-leyenda i.ambar { background: #fbbf24; } .vv-leyenda i.rosa { background: #f472b6; } .vv-leyenda i.verde { background: #34d399; }

/* Fichas (como las de Dinero) que se inclinan hacia el dedo. */
.vv-fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--sp-3, 12px); }
@media (min-width: 760px) { .vv-fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vv-ficha { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 14px 14px 13px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--panel-rgb), .16), transparent 60%), var(--card-solid); border: 1px solid color-mix(in srgb, rgb(var(--panel-rgb)) 22%, var(--border));
  box-shadow: 0 16px 34px -24px rgba(var(--panel-rgb), .8); transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s var(--ease-out), border-color .2s; animation: fadeUp .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
.vv-ficha.inclinada { transition: transform .06s linear; border-color: rgba(var(--panel-rgb), .5); }
.vv-ficha::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(160px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, .14), transparent 60%); }
.vv-ficha.inclinada::after { opacity: 1; }
.vv-ficha-ico { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 4px; border-radius: 12px; font-size: 18px;
  background: linear-gradient(150deg, rgba(var(--panel-rgb), .3), rgba(var(--panel-2-rgb), .1)); border: 1px solid rgba(var(--panel-rgb), .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.vv-ficha.vivo .vv-ficha-ico { animation: llama 1.8s ease-in-out infinite; transform-origin: 50% 90%; }
.vv-ficha-k { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.vv-ficha-v { font: 800 clamp(22px, 6.4vw, 28px)/1.05 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vv-ficha-v small { font-size: .5em; font-weight: 750; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.vv-ficha > small { font-size: 11.5px; line-height: 1.35; color: var(--muted); font-weight: 600; }
.vv-ficha-barra { display: block; height: 6px; margin-top: 6px; border-radius: 99px; background: var(--sunk-60); overflow: hidden; }
.vv-ficha-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--panel-rgb)), rgb(var(--panel-2-rgb))); box-shadow: 0 0 10px rgba(var(--panel-rgb), .6); transform-origin: left; animation: vvBarra 1s var(--ease-out) both .2s; }
@keyframes vvBarra { from { transform: scaleX(0); } }

/* La misión de hoy: su dibujito es un cubo que gira despacio. */
.vv-mision[data-vv-inclina] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease-out); }
.vv-mision.inclinada { transition: transform .06s linear; }
.vv-cubo { position: relative; width: 52px; height: 52px; perspective: 260px; flex: none; }
.vv-cubo-giro { position: absolute; inset: 0; transform-style: preserve-3d; animation: vvCubo 9s linear infinite; }
.vv-cubo-giro > i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 24px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(var(--panel-rgb), .55), rgba(var(--panel-2-rgb), .3)); border: 1px solid rgba(var(--panel-rgb), .6); box-shadow: inset 0 0 14px rgba(255, 255, 255, .12); }
.vv-cubo-giro > i:nth-child(1) { transform: translateZ(26px); }
.vv-cubo-giro > i:nth-child(2) { transform: rotateY(90deg) translateZ(26px); }
.vv-cubo-giro > i:nth-child(3) { transform: rotateY(180deg) translateZ(26px); }
.vv-cubo-giro > i:nth-child(4) { transform: rotateY(-90deg) translateZ(26px); }
@keyframes vvCubo { from { transform: rotateX(-14deg) rotateY(0deg); } to { transform: rotateX(-14deg) rotateY(360deg); } }

/* Hábitos en órbita. */
.v3-orbita-caja { position: relative; grid-column: 1 / -1; height: 218px; margin: -4px -8px 0; perspective: 900px; perspective-origin: 50% 40%; }
.v3-orbita { position: absolute; inset: 0; transform-style: preserve-3d; }
.v3-orbita-plano { position: absolute; left: 50%; top: 52%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(70deg); }
.v3-orbita-aro { position: absolute; width: 250px; height: 250px; left: -125px; top: -125px; border-radius: 50%; border: 1.5px solid rgba(var(--panel-rgb), .5);
  box-shadow: 0 0 24px rgba(var(--panel-rgb), .35), inset 0 0 30px rgba(var(--panel-rgb), .2); }
.v3-orbita-aro.dos { width: 168px; height: 168px; left: -84px; top: -84px; border-style: dashed; border-color: rgba(var(--panel-2-rgb), .45); box-shadow: none; animation: v3Gira 40s linear infinite reverse; }
.v3-orbita-giro { position: absolute; left: 0; top: 0; transform-style: preserve-3d; animation: v3Gira 32s linear infinite; }
@keyframes v3Gira { to { transform: rotateZ(360deg); } }
.v3-sat-giro { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotateZ(var(--a)) translateX(125px); }
.v3-sat { position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); color: inherit;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--text) 22%, transparent), color-mix(in srgb, var(--text) 6%, transparent) 70%), var(--card-solid);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .7); animation: v3Contra 32s linear infinite; }
@keyframes v3Contra { from { transform: rotateZ(calc(-1 * var(--a))) rotateX(-70deg); } to { transform: rotateZ(calc(-1 * var(--a) - 360deg)) rotateX(-70deg); } }
.v3-sat b { font-size: 21px; line-height: 1; filter: grayscale(.55) opacity(.8); }
.v3-sat.hecho { border-color: color-mix(in srgb, var(--ok) 70%, transparent); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), color-mix(in srgb, var(--ok) 55%, transparent) 60%, color-mix(in srgb, var(--ok) 20%, transparent)), var(--card-solid);
  box-shadow: 0 0 22px color-mix(in srgb, var(--ok) 70%, transparent); }
.v3-sat.hecho b { filter: none; }
.v3-sat i { position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font: 900 11px/1 var(--font-body); font-style: normal; color: var(--on-accent); background: var(--ok); }
.v3-sat:not(.hecho)::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid rgba(var(--panel-rgb), .55); animation: v3Onda 2.2s ease-out infinite; }
@keyframes v3Onda { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.v3-orbita-caja:hover .v3-orbita-giro, .v3-orbita-caja:hover .v3-sat, .v3-orbita-caja:focus-within .v3-orbita-giro, .v3-orbita-caja:focus-within .v3-sat { animation-play-state: paused; }
.v3-nucleo { position: absolute; left: 50%; top: 52%; width: 108px; height: 108px; transform: translate(-50%, -50%); display: grid; place-items: center; pointer-events: none; }
.v3-nucleo-bola { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .75), rgb(var(--panel-rgb)) 38%, rgba(var(--panel-2-rgb), .8) 72%, rgba(var(--panel-2-rgb), .35));
  box-shadow: 0 0 40px rgba(var(--panel-rgb), .7), 0 0 90px rgba(var(--panel-2-rgb), .35), inset -10px -14px 24px rgba(0, 0, 0, .35); animation: vvRespira 4.5s ease-in-out infinite; }
.v3-nucleo-txt { position: relative; display: grid; justify-items: center; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.v3-nucleo-txt b { font: 800 34px/1 var(--font-display); letter-spacing: -.04em; }
.v3-nucleo-txt b small { font-size: .5em; opacity: .8; }
.v3-nucleo-txt span { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; opacity: .9; }
.hb-card.resalta { animation: hbResalta 1.2s var(--ease-out); }
@keyframes hbResalta { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px rgb(var(--hb-c, var(--panel-rgb))), 0 0 40px rgba(var(--hb-c, var(--panel-rgb)), .6); } }

/* Cada hábito, una tarjeta que se voltea: al frente lo de hoy; detrás, su historia. */
.hb-volteo { position: relative; perspective: 1100px; }
.hb-volteo-in { display: grid; transform-style: preserve-3d; transition: transform .7s var(--ease-spring, cubic-bezier(.3, 1.3, .5, 1)); }
.hb-volteo.volteada .hb-volteo-in { transform: rotateY(180deg); }
.hb-cara { grid-area: 1 / 1; display: grid; gap: 10px; align-content: start; backface-visibility: hidden; -webkit-backface-visibility: hidden; min-width: 0; }
.hb-cara.atras { transform: rotateY(180deg); align-content: space-between; }
.hb-girar { position: absolute; top: 0; right: 0; }
.hb-cab .hb-girar { position: static; }
.hb-voltear { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font-size: 15px; cursor: pointer; color: var(--text);
  background: var(--sunk-50); border: 1px solid var(--border); transition: transform .3s var(--ease-out), border-color .2s; }
.hb-voltear:hover { border-color: rgba(var(--hb-c, var(--panel-rgb)), .55); transform: rotate(-25deg); }
.hb-historia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hb-historia > span { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 12px 6px; border-radius: 14px; background: var(--sunk-50); border: 1px solid var(--border); }
.hb-historia b { font: 800 24px/1 var(--font-display); letter-spacing: -.03em; }
.hb-historia small { font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.hb-historia i { font-style: normal; font-size: 17px; }
.hb-atras-tit { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hb-atras-tit b { font: 800 var(--fs-md)/1.2 var(--font-display); overflow-wrap: anywhere; }
.hb-card[data-vv-inclina] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease-out), border-color .2s; }
.hb-card.inclinada { transition: transform .06s linear; }

@media (prefers-reduced-motion: reduce) {
  .v3-bloque { transform: none !important; transition: none; }
  .v3-escalon.hoy .v3-tapa, .v3-marca b, .v3-orbita-giro, .v3-sat, .v3-orbita-aro.dos, .v3-sat::after, .v3-nucleo-bola, .vv-cubo-giro, .vv-ficha, .vv-ficha-barra i { animation: none !important; }
  .v3-piso, .hb-volteo-in { transition: none; }
}
.money-tabs .tab-ico { font-size: 14px; line-height: 1; margin-right: 6px; }
.v3-escalon.falta .v3-norte, .v3-escalon.falta .v3-oeste, .v3-barra.nada .v3-norte, .v3-barra.nada .v3-oeste { background: transparent; }
.v3-escalon.falta .v3-cara { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent); }
.hb-voltear-txt { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font: 750 var(--fs-xs)/1.4 var(--font-body); cursor: pointer;
  color: rgb(var(--hb-c, var(--panel-rgb))); background: rgba(var(--hb-c, var(--panel-rgb)), .1); border: 1px solid rgba(var(--hb-c, var(--panel-rgb)), .35); transition: background .2s, transform .2s var(--ease-out); }
.hb-voltear-txt:hover { background: rgba(var(--hb-c, var(--panel-rgb)), .2); transform: translateY(-1px); }
.hb-atras-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hb-atras-pie .habit-hora { flex: 1 1 170px; margin: 0; }
.hb-cara.atras { gap: 9px; }
.hb-historia > span { padding: 9px 6px; }
.hb-cara.frente { align-content: space-between; }

/* ============================================================
   TU HORARIO (horario.js) Y SUS BLOQUES EN LA AGENDA (dueño, 2026-10-10:
   «de qué hora a qué hora… agendarlo todos los días… con excepciones si
   quiere quitar el sábado o el domingo… la agenda conectada con todo»).
   ============================================================ */
.hz { display: grid; gap: 12px; margin: 6px 0 2px; }
.hz-horas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
.hz-campo { display: grid; gap: 4px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hz-campo input { width: 100%; min-height: 50px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--border-hi); background: var(--sunk-50); color: var(--text);
  font: 800 22px/1 var(--font-display); letter-spacing: -.02em; text-align: center; }
.hz-flecha { padding-bottom: 14px; color: var(--muted); font-weight: 800; }
.hz-durs, .hz-atajos { display: flex; flex-wrap: wrap; gap: 6px; }
.hz-dur, .hz-atajo { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--sunk-50); color: var(--text); font: 750 var(--fs-xs)/1.2 var(--font-body); cursor: pointer; transition: border-color .15s, background .15s, transform .15s var(--ease-out); }
.hz-dur:hover, .hz-atajo:hover { border-color: var(--border-hi); transform: translateY(-1px); }
.hz-dur.sel { color: var(--on-accent); background: var(--grad); border-color: transparent; }
.hz-total { margin: -4px 0 0; font-size: var(--fs-sm); font-weight: 750; color: var(--accent, var(--text)); min-height: 1.2em; }
.hz-k { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.hz-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.hz-dia { aspect-ratio: 1; max-height: 48px; border-radius: 14px; border: 1px solid var(--border-hi); background: var(--sunk-50); color: var(--muted); font: 800 var(--fs-md)/1 var(--font-display); cursor: pointer;
  transition: background .15s, color .15s, transform .2s var(--ease-spring, ease); }
.hz-dia.on { color: var(--on-accent); background: var(--grad); border-color: transparent; box-shadow: 0 8px 18px -10px rgba(124, 131, 255, .9); }
.hz-dia:active { transform: scale(.92); }
.hz-atajo { font-size: 11.5px; color: var(--muted); }
.hz-fila { margin: 0 0 var(--sp-3, 12px); }
.hz-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 9px 14px; border-radius: 99px; cursor: pointer; text-align: left;
  border: 1px solid color-mix(in srgb, rgb(var(--panel-rgb, 124, 131, 255)) 40%, var(--border)); background: rgba(var(--panel-rgb, 124, 131, 255), .08); color: var(--text); font: 700 var(--fs-sm)/1.3 var(--font-body); }
.hz-chip b { color: rgb(var(--panel-rgb, 124, 131, 255)); font-weight: 800; }
.hz-chip.vacio { width: 100%; justify-content: space-between; border-style: dashed; padding: 12px 16px; }
.td-horario-btn { margin-top: 4px; }

/* Los bloques de tu horario en la agenda: con rayitas, para distinguirlos de una cita. */
.agc-bloque { --ev: #7c83ff; position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 4px 7px 4px 10px; border-radius: 8px; text-decoration: none; color: var(--text);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ev) 20%, var(--bg-2)) 0 8px, color-mix(in srgb, var(--ev) 13%, var(--bg-2)) 8px 16px);
  box-shadow: inset 3px 0 0 var(--ev), 0 0 0 1px color-mix(in srgb, var(--ev) 35%, var(--bg-2)); transition: box-shadow .15s; }
.agc-bloque:hover { z-index: 2; box-shadow: inset 3px 0 0 var(--ev), 0 0 0 1px var(--ev), 0 8px 20px -10px rgba(0, 0, 0, .55); }
.agc-bloque.t-aprender { --ev: #a78bfa; }
.agc-bloque.t-entrenar { --ev: #fb7185; }
.agc-bloque-t { display: flex; gap: 5px; align-items: center; font-size: var(--fs-xs); font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-bloque-t i { font-style: normal; }
.agc-bloque.corto { flex-direction: row; align-items: center; padding-top: 0; padding-bottom: 0; }
.agc-bloque-m { font-size: 10.5px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--text) 82%, transparent); }
.agc-m-ev.bloque { --ev: #7c83ff; background: color-mix(in srgb, var(--ev) 14%, transparent); }
.agc-m-ev.bloque::before { display: none !important; }
.agc-m-ev.bloque.t-aprender { --ev: #a78bfa; } .agc-m-ev.bloque.t-entrenar { --ev: #fb7185; }
.ag-hoy-bloque { --ev: #7c83ff; --ev-fondo: color-mix(in srgb, var(--ev) 14%, var(--bg-2)); }
.ag-hoy-bloque.t-aprender { --ev: #a78bfa; } .ag-hoy-bloque.t-entrenar { --ev: #fb7185; }
.ag-hoy-bloque + .ag-hoy-bloque { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .hz-dia, .hz-dur, .hz-atajo { transition: none; } }

/* Yo en pestañas (dueño, 2026-10-14): una sección a la vez. */
.yo-panel[hidden] { display: none !important; }
.yo-panel > :first-child { margin-top: 0; }
.yo-tabs { margin-bottom: var(--sp-3, 12px); }
.dueno-volver { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--muted); text-decoration: none; font-weight: 650; }
.dueno-volver:hover { color: var(--text); }
.dueno-regalo-form { display: grid; gap: 10px; }
@media (min-width: 760px) { .dueno-regalo-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dueno-regalo-form .money-form-err, .dueno-regalo-form > .btn { grid-column: 1 / -1; } }
.dueno-sub { margin: 4px 0 8px; font-size: var(--fs-sm); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

/* Tu menú de la semana, día por día (Pro; dueño, 2026-10-14). */
.menu-dias { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.menu-dias::-webkit-scrollbar { display: none; }
.menu-dias button { flex: 1 0 auto; min-width: 44px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-weight: 650; text-transform: capitalize; position: relative; cursor: pointer; }
.menu-dias button.on { background: var(--accent, #7c5cff); border-color: transparent; color: #fff; }
.menu-dias button i { position: absolute; top: 3px; right: 5px; font-size: 7px; font-style: normal; color: var(--ok, #2fbf71); }
.menu-dias button.on i { color: #fff; }
.menu-dia[hidden] { display: none !important; }
.comida-desglose .money-row b { white-space: nowrap; }

/* Lo que comes hoy: tu barra de calorías (dueño, 2026-10-14). */
.comida-dia .cd-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.comida-dia .cd-num { color: var(--muted); font-size: var(--fs-sm, .9rem); }
.comida-dia .cd-num b { color: var(--text); font-size: 1.15rem; }
.cd-barra { height: 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: 8px 0 6px; }
.cd-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2fbf71, #7bd88f); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.cd-barra.casi i { background: linear-gradient(90deg, #f5b942, #f59e0b); }
.cd-barra.pasada i { background: linear-gradient(90deg, #f87171, #ef4444); }
.cd-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.cd-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.cd-lista li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.cd-der { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.cd-der small { color: var(--muted); }
.cd-sub { margin: 14px 0 6px; font-size: var(--fs-sm, .9rem); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.cd-menu .money-row { align-items: center; gap: 10px; }
.cd-comi { white-space: nowrap; flex: 0 0 auto; }
.cd-form textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px; }
.cd-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cd-foto { cursor: pointer; }
.cd-out:empty { display: none; }
.cd-out { margin-top: 10px; }
.cd-prev { margin-top: 10px; }
.cd-prev img { display: block; max-width: 160px; max-height: 160px; border-radius: 12px; object-fit: cover; }
.cd-veredicto { padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.cd-veredicto.si { border-color: rgba(47,191,113,.5); }
.cd-veredicto.no { border-color: rgba(239,68,68,.5); }
.cd-veredicto p { margin: 4px 0; }

/* Tu estrategia de marca y contenido (dueño, 2026-10-14). */
.marca-pos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.marca-pos > div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.marca-pos small { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.marca-pos p { margin: 4px 0 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .marca-pos { grid-template-columns: 1fr; } }
.marca-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
.marca-item:last-child { border-bottom: 0; }
.marca-item p { margin: 4px 0; }
.marca-item ul { margin: 4px 0 0; padding-left: 18px; }
.marca-debate { margin-top: 14px; padding: 14px; border-radius: 16px; border: 1px dashed var(--border); background: var(--surface-2); }
.marca-debate h4 { margin: 0 0 4px; }
.marca-dec { border: 0; padding: 0; margin: 12px 0 0; }
.marca-dec legend { font-weight: 650; margin-bottom: 6px; }
.marca-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-op { position: relative; cursor: pointer; }
.chip-op input { position: absolute; opacity: 0; pointer-events: none; }
.chip-op span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.chip-op input:checked + span { background: var(--accent, #7c5cff); color: #fff; border-color: transparent; }
.chip-op input:focus-visible + span { outline: 2px solid var(--accent, #7c5cff); outline-offset: 2px; }
.marca-idea { display: grid; gap: 6px; margin-top: 12px; }
.marca-idea textarea { width: 100%; box-sizing: border-box; resize: vertical; }

/* Cómo se hace cada misión y las metas cortas del nivel (dueño, 2026-10-14). */
.mision-como { margin-top: 6px; }
.mision-como summary { cursor: pointer; color: var(--accent, #7c5cff); font-size: var(--fs-sm, .9rem); font-weight: 650; list-style: none; }
.mision-como summary::-webkit-details-marker { display: none; }
.mision-como summary::before { content: '▸ '; }
.mision-como[open] summary::before { content: '▾ '; }
.mision-como p { margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); line-height: 1.5; overflow-wrap: anywhere; }
.modal-como { margin: 8px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.modal-como p { margin: 6px 0; line-height: 1.5; }
.metas-cortas { margin-top: 12px; }
.metas-cortas ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }

/* Un horario distinto para algún día, y la cita de tu horario (dueño, 2026-10-14). */
.hz-pordia { margin-top: 4px; }
.hz-pordia summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 750; color: var(--accent, var(--text)); }
.hz-pordia-lista { display: grid; gap: 6px; margin-top: 8px; }
.hz-pd { display: grid; grid-template-columns: minmax(70px, auto) minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.hz-pd[hidden] { display: none; }
.hz-pd-dia { font-size: var(--fs-sm); font-weight: 750; text-transform: capitalize; }
.hz-pd input { min-width: 0; min-height: 40px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--border-hi); background: var(--sunk-50); color: var(--text); font: 650 var(--fs-sm)/1 var(--font-body); }
.agc-det-misiones { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.agc-det-misiones ul { margin: 6px 0 0; padding-left: 18px; }

/* La pestaña Comida: tu anillo del día (dueño, 2026-10-14). */
.cm-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
@media (max-width: 520px) { .cm-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } .cm-lado { width: 100%; text-align: left; } }
.cm-anillo { position: relative; width: 168px; height: 168px; }
.cm-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cm-pista { fill: none; stroke: var(--surface-2); stroke-width: 12; }
.cm-lleno { fill: none; stroke: #2fbf71; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1), stroke .3s; filter: drop-shadow(0 4px 10px rgba(47,191,113,.35)); }
.cm-casi .cm-lleno { stroke: #f59e0b; filter: drop-shadow(0 4px 10px rgba(245,158,11,.35)); }
.cm-pasado .cm-lleno { stroke: #ef4444; filter: drop-shadow(0 4px 10px rgba(239,68,68,.35)); }
.cm-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cm-centro b { font: 800 2rem/1 var(--font-display, inherit); color: var(--text); }
.cm-centro small { color: var(--muted); margin-top: 4px; }
.cm-lado h3 { margin: 4px 0; }
.cm-macro { margin-top: 8px; }
.cm-macro-cab { display: flex; justify-content: space-between; font-size: var(--fs-sm, .9rem); color: var(--muted); }
.cm-macro-cab b { color: var(--text); }
.cm-macro-barra { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.cm-macro-barra i { display: block; height: 100%; border-radius: inherit; transition: width .6s; }
.cm-macro.p i { background: #7c5cff; } .cm-macro.c i { background: #38bdf8; } .cm-macro.g i { background: #f5b942; }
.cm-linea { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.cm-momento { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; position: relative; padding: 6px 0; }
.cm-momento::before { content: ''; position: absolute; left: 18px; top: 40px; bottom: -6px; width: 2px; background: var(--border); }
.cm-momento:last-child::before { display: none; }
.cm-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); font-size: 18px; }
.cm-momento.hecho .cm-ico { border-color: rgba(47,191,113,.6); box-shadow: 0 0 0 3px rgba(47,191,113,.15); }
.cm-momento-txt { display: grid; gap: 6px; min-width: 0; }
.cm-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.cm-item > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.cm-item.toca { border-style: dashed; background: transparent; }
.cm-acceso { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cm-acceso p { margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) { .cm-lleno, .cm-macro-barra i { transition: none; } }

/* Lo que investigué de tu meta (la ficha del terreno, 2026-10-14). */
.ficha-rutas { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ficha-etapas { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.ficha-hechos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ficha-hecho { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.ficha-hecho > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ficha-hecho .chip { flex: 0 0 auto; white-space: nowrap; }
.ficha-hecho.no_confirmado, .ficha-hecho.no_encontrado, .ficha-hecho.estimacion { border-style: dashed; }
.ficha-pend { opacity: .75; }
.ficha-fuentes { margin: 0; padding-left: 18px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.ficha-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; flex: 0 0 auto; }
.cm-prep { color: var(--muted); display: inline-block; margin-top: 3px; line-height: 1.4; }