*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--t1); overflow: hidden; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
/* Accesibilidad (auditoría UX · WCAG 2.4.7): anillo de foco visible SOLO para navegación por
   teclado. No aparece con mouse/touch (:focus-visible) y no pisa los border-color de :focus de
   los inputs (outline es una capa aparte). Quick win de la auditoría 2026-07-04. */
:focus-visible { outline: 2px solid var(--g2); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
:root {
  --bg:#F4F4F0; --w:#FFF; --br:#E5E5DF; --br2:#D0D0C8;
  /* ── LECTURA (FASE 3, 2026-07-28) ─────────────────────────────────────────────────────
     Los tokens semánticos (--or/--bl/--rd) tienen DOS oficios que se pisan: pintan TEXTO sobre
     un tinte claro y también rellenan botones y badges. En oscuro se aclaran para poder leerse
     como texto, y ahí la letra blanca encima deja de leerse (medido: «Entrenar otra vez» daba
     2.19:1, la mitad de lo que pide WCAG). La regla ahora es explícita: TODO relleno declara su
     tinta, y todo texto sobre un tinte usa su variante legible — como el verde, que ya tenía
     --gt desde siempre y por eso era el único que pasaba.
     Los valores están medidos, no elegidos a ojo (script en la bitácora de la FASE 3). */
  --on-or:#0D1F17;   /* blanco sobre naranja da 3.09 en claro y 2.19 en oscuro: no sirve */
  --on-bl:#FFFFFF;   /* blanco sobre el azul claro-tema: 4.59 ✔ */
  --on-rd:#FFFFFF;
  --on-yl:#0D1F17;   /* el amarillo es CLARO en los dos temas → tinta oscura siempre (10.26 y
                        10.80). Blanco encima daba 1.67 y 1.59: el peor par de toda la app. */
  --sr-sec:#856813;  /* rótulo de sección de las habitaciones («¿POR QUÉ ESTE PLAN?», «TUS
                        MACROS») sobre --bg → 4.78. El dorado de la habitación OSCURA medía
                        1.92 aquí: se diseñó para fondo oscuro y no tenía variante de tema. */
  --rd-fill:#C1121F; /* el rojo de marca con blanco encima da 4.17; este da 6.22 */
  --ort:#9A3412;     /* texto naranja SOBRE --orl → 6.19 (el token crudo daba 2.84) */
  --blt:#14507A;     /* texto azul SOBRE --bll → 7.06 */
  --rdt:#A3121F;     /* texto rojo SOBRE --rdl → 6.52 */
  --ylt:#7A5C00;     /* texto amarillo SOBRE --yll → 5.79 (faltaba: los 3 banners amarillos
                        llevaban este mismo hex ESCRITO A MANO y por eso no cambiaban de tema) */
  --t1:#1A1A1A; --t2:#636363; --t3:#6C6C6C;
  --g:#0A7C5B; --g2:#13B583; --gl:#D3F4E8; --gt:#06402E;
  --emerald-hdr:linear-gradient(115deg,#0A1A12,#0E3A2C 58%,#10593F);
  --or:#E76F51; --orl:#FDE8E0; --bl:#457B9D; --bll:#E0EBF4;
  --yl:#E9C46A; --yll:#FEF6DE; --rd:#E63946; --rdl:#FCE4E6;
  --r:12px; --rsm:8px; --rlg:18px;
  --sh:0 2px 10px rgba(0,0,0,.06); --sh2:0 6px 28px rgba(0,0,0,.10);
  --accent3:#10E0A0; --surface:var(--bg);
  /* Tinta SOBRE las superficies esmeralda (v503). Se declaran UNA vez, como --emerald-hdr:
     esa superficie es oscura en los DOS temas, así que un valor por tema sería mentira. */
  --on-emerald:#FFFFFF; --on-accent3:#06251A;
  /* Tokens de GRÁFICA (cohesión C6, avi-v351): los SVG dibujados a mano usaban hex fijos
     (#0A7C5B/#E76F51) idénticos en ambos temas → en oscuro la línea verde quedaba apagada.
     En claro estos tokens SON los colores de siempre (cero cambio); en oscuro suben al verde
     menta --gt y al coral claro --or del tema. OJO: var() NO vale en ATRIBUTOS SVG
     (fill="var(...)" es inválido y cae a negro) → siempre style="fill:var(...)". */
  --chart-g:var(--g); --chart-or:var(--or);
  /* Movimiento (FASE 0 · primitiva #1, avi-v329) — tokens únicos de easing/duración
     para todo el sistema. Animar SOLO transform/opacity (guía Vercel), nunca transition:all.
     --ease-out: salida rápida con asentamiento suave (Emil, el "snap" que se siente premium). */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.4,0,.2,1);
  --dur-fast:160ms; --dur:220ms;
  /* Escala tipográfica (FASE 0 · primitiva #3, avi-v331) — la "regla" del ritmo.
     Destilada de los tamaños REALES dominantes de AVI (13/12/11 son el 43% de 425 usos).
     Base 13px = body. Las fases de superficie ajustan cada pantalla a estos peldaños;
     hoy solo tokeniza las primitivas de texto (no-op exacto). NO barrer los 425 a ciegas. */
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px;
  --fs-lg:16px; --fs-xl:18px; --fs-2xl:22px; --fs-3xl:26px; --fs-4xl:30px;
}
/* dark mode automático (sistema) — no aplica si el usuario eligió "Claro" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:  #0D1F17;
    --w:   #152A1E;
    --br:  #1F3D2A;
    --br2: #2D4F38;
    --t1:  #E8F4EC;
    --t2:  #8FAF98;
    --t3:  #669B74;
    --gl:  #103328;
    --gt:  #5FE3B0;
    --yll:#2a2512; --orl:#2e1c15; --bll:#13273a; --rdl:#33161a;
    --yl:#F2C94C; --or:#F0997F; --bl:#7FB2E8; --rd:#FF6B73;
    --accent3:#10E0A0; --surface:#152A1E;
  /* En oscuro los tokens ya son claros: la tinta de los rellenos se invierte y el texto sobre
     tinte se lee bien con el token crudo (medido: 7.4 / 6.84 / 5.98). */
  --on-or:#0D1F17; --on-bl:#0D1F17; --on-rd:#0D1F17; --on-yl:#0D1F17; --rd-fill:var(--rd);
  /* En oscuro el dorado SÍ se lee (9.52): este es el valor exacto que producía el
     `color-mix(--sr-gold 78%, --t2)` de antes, medido con la sonda. Oscuro no cambia. */
  --sr-sec:#D4C175;
  --ort:var(--or); --blt:var(--bl); --rdt:var(--rd); --ylt:var(--yl);
    --chart-g:var(--gt); /* líneas de gráfica en menta brillante sobre fondo oscuro */
    --sh:  0 2px 10px rgba(0,0,0,.25);
    --sh2: 0 6px 28px rgba(0,0,0,.40);
  }
  :root:not([data-theme="light"]) ~ * .li,
  :root:not([data-theme="light"]) ~ * .inp,
  html:not([data-theme="light"]) .li,
  html:not([data-theme="light"]) .inp,
  html:not([data-theme="light"]) .sel,
  html:not([data-theme="light"]) .tarea,
  html:not([data-theme="light"]) .gm-sinput,
  html:not([data-theme="light"]) .mta {
    background: var(--w); color: var(--t1); border-color: var(--br2);
  }
  /* OJO (bug v311, reporte Camilo 2026-07-10): estos ::placeholder van en su PROPIA regla.
     Un renombrado viejo dejó un selector colgando y los fusionó con el background de
     #avi-loading → la foto del loading aparecía RECORTADA dentro de cada input (Chrome
     sí pinta background en ::placeholder). Jamás volver a mezclar estas dos reglas. */
  html:not([data-theme="light"]) .li::placeholder,
  html:not([data-theme="light"]) .inp::placeholder,
  html:not([data-theme="light"]) .gm-sinput::placeholder { color: var(--t3); }
  html:not([data-theme="light"]) #avi-loading { background: linear-gradient(180deg,rgba(6,9,10,.34) 0%,rgba(6,9,10,.08) 32%,rgba(6,9,10,.10) 55%,rgba(6,9,10,.72) 86%,rgba(6,9,10,.96) 100%),url('media/loading-bg.jpg') center/cover no-repeat #06090A; }
}
/* dark mode manual — forzado por el toggle de la app */
:root[data-theme="dark"] {
  --bg:  #0D1F17;
  --w:   #152A1E;
  --br:  #1F3D2A;
  --br2: #2D4F38;
  --t1:  #E8F4EC;
  --t2:  #8FAF98;
  --t3:  #669B74;
  --gl:  #1A3A26;
  --gt:  #5FE3B0;
  --yll:#2a2512; --orl:#2e1c15; --bll:#13273a; --rdl:#33161a;
  --yl:#F2C94C; --or:#F0997F; --bl:#7FB2E8; --rd:#FF6B73;
  --accent3:#10E0A0; --surface:#152A1E;
  /* En oscuro los tokens ya son claros: la tinta de los rellenos se invierte y el texto sobre
     tinte se lee bien con el token crudo (medido: 7.4 / 6.84 / 5.98). */
  --on-or:#0D1F17; --on-bl:#0D1F17; --on-rd:#0D1F17; --on-yl:#0D1F17; --rd-fill:var(--rd);
  /* En oscuro el dorado SÍ se lee (9.52): este es el valor exacto que producía el
     `color-mix(--sr-gold 78%, --t2)` de antes, medido con la sonda. Oscuro no cambia. */
  --sr-sec:#D4C175;
  --ort:var(--or); --blt:var(--bl); --rdt:var(--rd); --ylt:var(--yl);
  --chart-g:var(--gt); /* líneas de gráfica en menta brillante sobre fondo oscuro */
  --sh:  0 2px 10px rgba(0,0,0,.25);
  --sh2: 0 6px 28px rgba(0,0,0,.40);
}
html[data-theme="dark"] .li, html[data-theme="dark"] .inp,
html[data-theme="dark"] .sel, html[data-theme="dark"] .tarea,
html[data-theme="dark"] .gm-sinput,
html[data-theme="dark"] .mta {
  background: var(--w); color: var(--t1); border-color: var(--br2);
}
/* Placeholders en su PROPIA regla — ver nota del bloque auto-oscuro (bug v311). */
html[data-theme="dark"] .li::placeholder,
html[data-theme="dark"] .inp::placeholder,
html[data-theme="dark"] .gm-sinput::placeholder { color: var(--t3); }
html[data-theme="dark"] #avi-loading { background: linear-gradient(180deg,rgba(6,9,10,.34) 0%,rgba(6,9,10,.08) 32%,rgba(6,9,10,.10) 55%,rgba(6,9,10,.72) 86%,rgba(6,9,10,.96) 100%),url('media/loading-bg.jpg') center/cover no-repeat #06090A; }
/* light mode manual — fuerza claro aunque el sistema esté en oscuro */
:root[data-theme="light"] {
  --bg:#F4F4F0; --w:#FFF; --br:#E5E5DF; --br2:#D0D0C8;
  /* ── LECTURA (FASE 3, 2026-07-28) ─────────────────────────────────────────────────────
     Los tokens semánticos (--or/--bl/--rd) tienen DOS oficios que se pisan: pintan TEXTO sobre
     un tinte claro y también rellenan botones y badges. En oscuro se aclaran para poder leerse
     como texto, y ahí la letra blanca encima deja de leerse (medido: «Entrenar otra vez» daba
     2.19:1, la mitad de lo que pide WCAG). La regla ahora es explícita: TODO relleno declara su
     tinta, y todo texto sobre un tinte usa su variante legible — como el verde, que ya tenía
     --gt desde siempre y por eso era el único que pasaba.
     Los valores están medidos, no elegidos a ojo (script en la bitácora de la FASE 3). */
  --on-or:#0D1F17;   /* blanco sobre naranja da 3.09 en claro y 2.19 en oscuro: no sirve */
  --on-bl:#FFFFFF;   /* blanco sobre el azul claro-tema: 4.59 ✔ */
  --on-rd:#FFFFFF;
  --on-yl:#0D1F17;   /* el amarillo es CLARO en los dos temas → tinta oscura siempre (10.26 y
                        10.80). Blanco encima daba 1.67 y 1.59: el peor par de toda la app. */
  --sr-sec:#856813;  /* rótulo de sección de las habitaciones («¿POR QUÉ ESTE PLAN?», «TUS
                        MACROS») sobre --bg → 4.78. El dorado de la habitación OSCURA medía
                        1.92 aquí: se diseñó para fondo oscuro y no tenía variante de tema. */
  --rd-fill:#C1121F; /* el rojo de marca con blanco encima da 4.17; este da 6.22 */
  --ort:#9A3412;     /* texto naranja SOBRE --orl → 6.19 (el token crudo daba 2.84) */
  --blt:#14507A;     /* texto azul SOBRE --bll → 7.06 */
  --rdt:#A3121F;     /* texto rojo SOBRE --rdl → 6.52 */
  --ylt:#7A5C00;     /* texto amarillo SOBRE --yll → 5.79 (faltaba: los 3 banners amarillos
                        llevaban este mismo hex ESCRITO A MANO y por eso no cambiaban de tema) */
  --t1:#1A1A1A; --t2:#636363; --t3:#6C6C6C;
  --gl:#D3F4E8; --gt:#06402E;
  --sh:0 2px 10px rgba(0,0,0,.06); --sh2:0 6px 28px rgba(0,0,0,.10);
}
html[data-theme="light"] .li, html[data-theme="light"] .inp,
html[data-theme="light"] .sel, html[data-theme="light"] .tarea,
html[data-theme="light"] .gm-sinput,
html[data-theme="light"] .mta {
  background: #FFF; color: #1A1A1A; border-color: #D0D0C8;
}
::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--br2);border-radius:2px}

/* ── SCREENS ── */
.screen{display:none;height:100vh;height:100dvh;overflow:hidden}
.screen.on{display:flex}

/* ════ LOGIN ════ */
#s-login{align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(145deg,#06402E,#0A7C5B,#52B788);overflow-y:auto;padding:16px 0}
.lcard{background:var(--w);border-radius:20px;padding:36px 32px;width:100%;max-width:380px;box-shadow:var(--sh2);margin:auto}
.llogo{font-size:26px;font-weight:800;color:var(--gt);margin-bottom:3px}
.lsub{font-size:13px;color:var(--t2);margin-bottom:24px}
.llbl{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--t2);margin-bottom:5px}
.li{width:100%;padding:10px 13px;border:1.5px solid var(--br);border-radius:var(--rsm);font-family:inherit;font-size:16px;color:var(--t1);outline:none;transition:border-color .15s;margin-bottom:12px;background:var(--w)}
.li:focus{border-color:var(--g2)}
.lerr{background:var(--rdl);color:var(--rdt);border-radius:var(--rsm);padding:9px 13px;font-size:13px;font-weight:500;margin-bottom:12px;display:none}
.lerr.on{display:block}
.lbtn{width:100%;padding:12px;background:var(--g);color:white;border:none;border-radius:var(--rsm);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s}
.lbtn:hover{background:var(--g2)}
.lhint{font-size:11px;color:rgba(255,255,255,.6);text-align:center;margin-top:14px;line-height:1.7}

/* ════ COACH ════ */
#s-coach{flex-direction:column}

/* ── COACH TOPBAR (mobile) ── */
.coach-topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--emerald-hdr);border-bottom:1px solid rgba(16,224,160,.20);
  padding:0 16px;padding-top:env(safe-area-inset-top);height:calc(52px + env(safe-area-inset-top));flex-shrink:0;position:sticky;top:0;z-index:200;box-shadow:0 6px 22px rgba(6,20,15,.28);
}
.coach-topbar-left{display:flex;align-items:center;gap:10px}
.coach-topbar-logo{font-size:18px;font-weight:800;color:#fff}
.coach-topbar-page{font-size:13px;color:rgba(255,255,255,.8);font-weight:500}
.coach-topbar .menu-btn{color:#fff;background:rgba(255,255,255,.14);border-color:transparent}
.coach-topbar #topbar-page{color:rgba(255,255,255,.82)!important}
.coach-topbar .btn.bg{background:rgba(255,255,255,.14);color:#fff;border-color:transparent}
.menu-btn{
  width:36px;height:36px;border-radius:var(--rsm);border:1.5px solid var(--br);
  background:var(--w);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:17px;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);flex-shrink:0;
}
.menu-btn:hover{background:var(--bg);border-color:var(--br2)}

/* ── DRAWER (slides in from left on mobile) ── */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:300;
  display:none;backdrop-filter:blur(2px);
}
.drawer-overlay.on{display:block}
.sidebar{
  position:fixed;top:0;left:-230px;height:100vh;height:100dvh;width:220px;
  background:var(--w);border-right:1px solid var(--br);
  display:flex;flex-direction:column;padding:16px 10px;
  padding-top:max(16px,env(safe-area-inset-top));
  z-index:400;transition:left .25s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.sidebar.open{left:0}
.sblogo{font-size:18px;font-weight:800;color:var(--gt);padding:3px 8px 16px}
.sblogo small{display:block;font-size:11px;color:var(--t3);font-weight:400;margin-top:1px}
.sbsect{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--t3);padding:0 8px;margin:12px 0 4px}
.sbi{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:var(--rsm);font-size:14px;font-weight:500;color:var(--t2);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);margin-bottom:3px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.sbi:hover{background:var(--bg);color:var(--t1)}
.sbi.on{background:var(--gl);color:var(--gt);font-weight:700}
.sbi .ic{font-size:18px;width:22px;text-align:center}
.sbi .bdg{margin-left:auto;background:var(--or);color:var(--on-or);font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
.sbbot{margin-top:auto;padding-top:12px;border-top:1px solid var(--br)}
/* Elementos tappables que NO son <button> nativo (div/span con onclick): sin esto, en
   el WebView de Android el toque sobre su texto dispara el menú de selección ("buscar en
   Google…") y se traga el clic. Mismo fix que .sbi, aplicado a toda la "chrome" tocable. */
.cntab,.cbnav-item,.sbout,.cli,.sescard-h,.prof-collapse,.gloss-term,.wu-ex-row,.pex-row,.nutri-card,.profrm,.rp,.back{
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.sbuser{display:flex;align-items:center;gap:9px;padding:8px}
.av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:white;flex-shrink:0}
.sbname{font-size:13px;font-weight:700}
.sbrole{font-size:11px;color:var(--t3)}
.sbout{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--rsm);font-size:13px;color:var(--t3);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);margin-top:3px}
.sbout:hover{background:var(--rdl);color:var(--rdt)}

/* ── COACH BOTTOM NAV (mobile) ── */
.coach-bottom-nav{
  display:flex;background:var(--w);border-top:1px solid var(--br);
  flex-shrink:0;position:sticky;bottom:0;z-index:100;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.cbnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:9px 4px;cursor:pointer;font-size:11px;font-weight:600;
  color:var(--t3);gap:3px;border-top:2px solid transparent;transition:color var(--dur-fast) var(--ease-out),border-top-color var(--dur-fast) var(--ease-out);
}
.cbnav-item .cnic{font-size:20px;line-height:1}
.cbnav-item.on{color:var(--gt);border-top-color:var(--gt)}

.main{flex:1;overflow-y:auto;overflow-x:hidden;}
.panel{display:none;padding:16px}
.panel.on{display:block;animation:fadeIn .18s ease}
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:10px;flex-wrap:wrap}
.ptitle{font-size:19px;font-weight:800;letter-spacing:-.3px}
.psub{font-size:var(--fs-base);color:var(--t2);margin-top:2px}

/* ── CARDS ── */
/* ── FASE 0 · primitiva #2 (avi-v330): sistema de elevación de 3 niveles ──
   N0 fondo (--bg) · N1 tarjeta (--w + borde --br2 + --sh) · N2 modal (--w + --sh2, sin borde).
   El borde de tarjeta usa --br2 (no --br): en claro #E5E5DF apenas separaba del fondo crema
   (audit H5); #D0D0C8 la define con nitidez y en oscuro da un canto verde claro coherente.
   Los divisores INTERNOS (.ch) siguen en --br a propósito: exterior fuerte, interior suave.
   Las tarjetas de componente (.qw-card/.sescard/.nutri-card…) suben en su fase de superficie. */
.card{background:var(--w);border:1px solid var(--br2);border-radius:var(--rlg);box-shadow:var(--sh)}
.ch{padding:13px 18px;border-bottom:1px solid var(--br);display:flex;align-items:center;justify-content:space-between}
.ctitle{font-size:var(--fs-base);font-weight:700}
.cb{padding:15px 18px}

/* ── GRIDS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Reventón clásico de CSS Grid: una columna `1fr` tiene min-width:auto, así que si dentro hay
   algo más ancho que su hueco (un nombre de rutina largo con letra grande), la columna CRECE y
   se lleva la rejilla fuera de la pantalla. Medido en FASE 3: la ficha del asesorado llegaba a
   406px con `data-fs="xl"` en un teléfono de 390. Dejar encoger a los hijos lo cierra sin
   tocar el diseño de dos columnas. */
.g2>*{min-width:0}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}

/* ── STAT MINI ── */
.sm{background:var(--w);border:1px solid var(--br);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)}
.smv{font-size:32px;font-weight:800;letter-spacing:-1.5px}
.sml{font-size:12px;color:var(--t2);margin-top:2px}
/* v583 · la nota que explica una cifra que se lee mal el día 6 de cada mes (renovaciones
   pendientes / en gracia). Va DEBAJO de la etiqueta y en tono de aviso, no de dato: la cifra
   grande no cambia, solo deja de parecer un derrumbe. `--ort` es la variante legible de --or
   (los tokens crudos son para RELLENAR: encima de su propio tinte no se leen, regla de v453). */
.smn{font-size:10.5px;line-height:1.35;color:var(--ort);margin-top:4px;font-weight:600}
/* Tarjeta de stat TOCABLE (abre su habitación-reporte). Reset de <button> + affordance. */
.sm-tap{position:relative;display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.sm-tap:hover{border-color:var(--g2);box-shadow:0 5px 16px -6px rgba(0,0,0,.2)}
.sm-tap:active{transform:scale(.97)}
.sm-chev{position:absolute;top:9px;right:11px;font-size:15px;font-weight:700;color:var(--t3);line-height:1}
/* ── Habitación-reporte del coach: filas de asesorado ── */
.crep-row{display:flex;align-items:center;gap:11px;padding:11px 2px;border-top:1px solid var(--br);cursor:pointer;transition:background .12s}
.crep-row:first-of-type{border-top:none}
.crep-row:hover{background:var(--bg)}
.crep-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}
.crep-mid{flex:1;min-width:0}
.crep-nm{font-size:14px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crep-meta{font-size:11.5px;color:var(--t2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crep-right{flex-shrink:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.crep-amt{font-size:15px;font-weight:800;font-family:'JetBrains Mono',monospace}
.crep-badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
/* v520 · la nota del bloque «no tienes cómo avisarles»: explica POR QUÉ no llega y qué hacer.
   Tokens del sistema (--yll/--yl/--ylt son los mismos de los otros tres avisos amarillos),
   nada hardcodeado — la regla de contraste de v453 vive en esos tokens. */
.crep-note{margin:0 12px 10px;padding:9px 11px;background:var(--yll);border:1px solid var(--yl);
  border-radius:var(--rsm);font-size:12px;line-height:1.5;color:var(--ylt)}
.crep-empty{text-align:center;color:var(--t2);font-size:14px;line-height:1.6;padding:34px 20px}
.crep-empty-ic{font-size:40px;margin-bottom:10px}
/* ── Entrenamientos rápidos: botón de entrada en "Hoy" + biblioteca ── */
.qw-entry{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font-family:inherit;cursor:pointer;margin-bottom:12px;padding:11px 13px;border-radius:var(--r);border:1.5px dashed var(--br2);background:linear-gradient(135deg,var(--gl),var(--w));color:var(--t1);transition:border-color .12s,transform .12s,box-shadow .12s}
.qw-entry:hover{border-color:var(--g2);box-shadow:0 5px 16px -8px rgba(0,0,0,.22)}
.qw-entry:active{transform:scale(.99)}
.qw-entry-ic{font-size:22px;flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--gl);border-radius:11px}
/* F2 (v306): con SVG de marca dentro, los chips de entrada/tarjetas QW se tintan como .ic-chip */
.qw-entry-ic .avic,.qw-card-ic .avic{color:var(--g2)}
.qw-entry-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.qw-entry-tx b{font-size:13.5px;font-weight:800;color:var(--gt)}
.qw-entry-tx small{font-size:11.5px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qw-entry-chev{font-size:20px;font-weight:700;color:var(--gt);flex-shrink:0}
.qw-intro{font-size:13px;color:var(--t2);line-height:1.55;background:var(--gl);border:1px solid var(--br);border-radius:var(--r);padding:12px 14px;margin-bottom:14px}
.qw-card{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;font-family:inherit;cursor:pointer;margin-bottom:11px;padding:14px;border-radius:var(--r);border:1px solid var(--br);background:var(--w);box-shadow:var(--sh);transition:border-color .12s,transform .12s,box-shadow .12s}
.qw-card:hover{border-color:var(--g2);box-shadow:0 6px 18px -8px rgba(0,0,0,.24)}
.qw-card:active{transform:scale(.985)}
.qw-card-ic{font-size:26px;flex-shrink:0;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--gl);border-radius:13px}
.qw-card-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.qw-card-nm{font-size:15px;font-weight:800;color:var(--t1)}
.qw-card-meta{font-size:11.5px;font-weight:700;color:var(--gt)}
.qw-card-desc{font-size:12.5px;color:var(--t2);line-height:1.45}
.qw-card-tag{align-self:flex-start;margin-top:4px;font-size:10.5px;font-weight:700;color:var(--t3);background:var(--bg);border:1px solid var(--br);border-radius:20px;padding:2px 9px}
.qw-card-go{font-size:22px;font-weight:700;color:var(--t3);flex-shrink:0;align-self:center}
/* ── Hábitos de hoy (v300): 💧 agua — tarjeta compacta sobre el entreno ── */
.hb-card{background:var(--w);border:1px solid var(--br);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;box-shadow:var(--sh)}
.hb-row{display:flex;align-items:center;gap:10px}
.hb-ic{font-size:22px;flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--bll);border-radius:11px}
.hb-info{flex:1;min-width:0}
.hb-title{font-size:13px;font-weight:800;color:var(--t1)}
.hb-sub{font-size:11.5px;color:var(--t2);margin-top:1px}
.hb-sub b{color:var(--blt);font-size:13px}
.hb-bar{height:6px;background:var(--bll);border-radius:99px;overflow:hidden;margin-top:6px}
.hb-fill{height:100%;background:var(--bl);border-radius:99px;transition:width .3s}
.hb-fill.met{background:var(--g2)}
.hb-btn{flex-shrink:0;height:42px;border-radius:11px;border:1.5px solid var(--br2);background:transparent;color:var(--t2);font-size:17px;font-weight:800;cursor:pointer;padding:0;font-family:inherit;transition:transform .1s}
.hb-btn:active{transform:scale(.94)}
.hb-minus{width:42px}
.hb-plus{width:54px;background:var(--bl);border-color:var(--bl);color:var(--on-bl)}
.hb-week{display:flex;gap:5px;margin-top:9px;padding-left:48px}
.hb-dot{width:8px;height:8px;border-radius:50%;background:var(--br2)}
.hb-dot.some{background:var(--bl);opacity:.45}
.hb-dot.full{background:var(--bl)}
/* Hábitos parte 2 (v362): 👟 pasos — misma tarjeta, acento VERDE para distinguir del agua azul */
/* El tope apaga con SU PROPIA clase, nunca con `style.display`: el modo día 1 gestiona el
   display de estos mismos contenedores y los dos mecanismos se pisarían. */
.cap-off{display:none!important}

/* ══ EL TOPE DE TARJETAS (v505, dirección B) ══════════════════════════════════════════════
   Lo que no cabe hoy no desaparece: baja a una fila de UNA LÍNEA, sin peso visual, que la
   abre en el sitio. Misma gramática que «Ver el detalle de mis hábitos». */
.tod-more{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;margin-bottom:12px;
  padding:0 13px;background:transparent;border:1px dashed var(--br2);border-radius:12px;
  color:var(--t2);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.tod-more:active{border-color:var(--g2);color:var(--t1)}
.tod-more-ic{flex-shrink:0;display:inline-flex;color:var(--g2)}
.tod-more-tx{flex:1;min-width:0}
.tod-more-tx b{color:var(--t1);font-weight:800}
.tod-more-chev{flex-shrink:0;display:inline-flex;transition:transform var(--dur) var(--ease-out)}
.tod-more-chev.up{transform:rotate(180deg)}

/* ══ LA TIRA DE 3 CHIPS (v504, dirección B) ═══════════════════════════════════════════════
   Agua, pasos y plato dejan de ser una tarjeta de tres filas y ceden a una tira de una línea:
   el día tiene UNA promesa y es el entreno. Cada chip conserva la acción que ESE hábito
   necesita (el de agua suma un vaso de un toque: 8 personas y 71 días medidos, es el hábito
   con más adopción de la app). El detalle completo sigue existiendo, a un toque. */
.hb-strip{display:flex;gap:8px;margin-bottom:10px}
.hb-chip{flex:1;min-width:0;background:var(--w);border:1px solid var(--br);border-radius:14px;
  padding:10px 10px 11px;cursor:pointer;text-align:left;font-family:inherit;display:block;
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.hb-chip:active{transform:scale(.97)}
.hb-chip-ic{display:block;width:19px;height:19px;margin-bottom:7px;color:var(--blt)}
.hb-chip-v{display:block;font-size:15px;font-weight:800;color:var(--t1);line-height:1.1;font-variant-numeric:tabular-nums}
.hb-chip-v small{font-size:11px;font-weight:600;color:var(--t2)}
.hb-chip-l{display:block;font-size:10.5px;color:var(--t2);margin-top:2px;font-weight:600;line-height:1.25}
.hb-chip-bar{display:block;height:4px;border-radius:99px;background:var(--bll);margin-top:8px;overflow:hidden}
.hb-chip-bar i{display:block;height:100%;border-radius:99px;background:var(--bl);
  transition:width var(--dur) var(--ease-out)}
.hb-chip.s .hb-chip-ic{color:var(--gt)} .hb-chip.s .hb-chip-bar{background:var(--gl)} .hb-chip.s .hb-chip-bar i{background:var(--g2)}
.hb-chip.f .hb-chip-ic{color:var(--ort)} .hb-chip.f .hb-chip-bar{background:var(--orl)} .hb-chip.f .hb-chip-bar i{background:var(--or)}
.hb-chip.met{border-color:var(--g2)}
.hb-chip.met .hb-chip-bar i{background:var(--g2)}
.hb-more{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:38px;
  margin-bottom:12px;background:transparent;border:1px dashed var(--br2);border-radius:12px;
  color:var(--t2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.hb-more:active{border-color:var(--g2);color:var(--t1)}
.hb-more-chev{display:inline-flex;transition:transform var(--dur) var(--ease-out)}
.hb-more-chev.up{transform:rotate(180deg)}
.hb-sep{height:1px;background:var(--br);margin:12px 0}
.hb-ic.st{background:var(--gl);color:var(--g2)}
.hb-sub b.st{color:var(--gt);font-size:13px}
.hb-fill.st{background:var(--g2)}
.hb-dot.st.some{background:var(--g2);opacity:.45}
.hb-dot.st.full{background:var(--g2)}
/* Tarjeta de arranque del entreno (v447): «Hoy» llega colapsada y esto es lo primero que se ve.
   Tokens del sistema, nada hardcodeado; el botón usa la primitiva .btn del sistema. */
.start-card{padding:20px 18px;text-align:center}
.start-card-k{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.start-card-t{font-size:23px;font-weight:800;color:var(--t1);line-height:1.2;margin-bottom:5px}
.start-card-m{font-size:13px;color:var(--t2);margin-bottom:12px}
.start-card-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
.start-card-tags span{font-size:11px;font-weight:600;color:var(--gt);background:var(--gl);border-radius:99px;padding:4px 10px}
.start-card-go{width:100%;min-height:50px;font-size:16px}
.start-card-alt{width:100%;margin-top:8px}
/* Hábitos parte 3 (v442): 🍽️ comida — acento NARANJA, el tercer color de la tarjeta (agua azul,
   pasos verde). Mismos tokens del sistema, ninguno nuevo. */
.hb-ic.fl{background:var(--orl);color:var(--ort)}
.hb-fill.fl{background:var(--or)}
.hb-btn.fl{background:var(--orl);color:var(--ort);border-color:var(--or)}
.hb-entry{display:flex;gap:8px;margin-top:9px;padding-left:48px}
.hb-num{flex:1;min-width:0;height:42px;border-radius:11px;border:1.5px solid var(--br2);background:var(--surface);color:var(--t1);font-size:15px;font-weight:700;font-family:inherit;padding:0 12px;-moz-appearance:textfield}
.hb-num::-webkit-outer-spin-button,.hb-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hb-num:focus{outline:none;border-color:var(--g2)}
.hb-plus.st{background:var(--g);border-color:var(--g);color:white;width:auto;min-width:54px;padding:0 14px;white-space:nowrap}
/* Config de HIIT rápido (v301): el modal va ENCIMA de la biblioteca (.sroom z1400) */
#m-qwcfg{z-index:1500}
/* ── Íconos SVG de marca (v303, F1 — docs/plan-iconos-svg.md) ── */
.avic{display:inline-block;vertical-align:-2px;flex-shrink:0}
/* F3 (v307): íconos en títulos estáticos (aviIconizeStatic) — tinte de marca por defecto;
   .plain hereda el color del contenedor (botones de tema: el seleccionado pinta blanco). */
.t-ic{color:var(--g2)}
.t-ic.plain{color:inherit}
.streak-title .avic,.sroom-sec .avic{color:var(--g2)}
.sroom-stat-ic .avic{color:var(--sc,var(--g))}
.profav-cam .avic{color:#fff}
.ic-chip{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:var(--gl);color:var(--g2);border-radius:10px;flex-shrink:0}
.news-ico{flex-shrink:0;margin-top:1px;color:var(--g2);display:flex}
/* ── Novedades (v304): TOUR guiado a pantalla completa — la tarjeta plana de v302 murió ── */
.news-tour{position:fixed;inset:0;z-index:1600;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.news-tour.hidden{display:none}
.nt-card{position:relative;width:100%;max-width:350px;background:var(--w);border:1px solid var(--br);border-radius:var(--rlg);box-shadow:var(--sh2);padding:26px 22px 20px;text-align:center}
.nt-card.nt-in{animation:ntIn .28s cubic-bezier(.2,.85,.3,1)}
@keyframes ntIn{from{opacity:.3;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.nt-skip{position:absolute;top:12px;right:14px;border:none;background:transparent;color:var(--t3);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;padding:6px 8px;min-height:36px}
.nt-chip{width:64px;height:64px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:var(--gl);color:var(--g2);border-radius:20px}
.nt-pill{display:inline-block;font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--g2);background:var(--gl);border-radius:20px;padding:3px 11px;margin-bottom:8px}
.nt-title{font-size:18px;font-weight:800;color:var(--t1);letter-spacing:-.3px;margin-bottom:5px}
.nt-desc{font-size:12.5px;color:var(--t2);line-height:1.5;margin-bottom:14px}
.nt-steps{text-align:left;display:flex;flex-direction:column;gap:9px;margin-bottom:14px;background:var(--bg);border-radius:var(--r);padding:13px 14px}
.nt-step{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--t1);line-height:1.45}
.nt-stepnum{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--g2);color:white;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.nt-cta{display:inline-block;border:1.5px solid var(--g2);background:transparent;color:var(--g2);border-radius:10px;padding:9px 16px;font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit;margin-bottom:4px;min-height:38px}
.nt-footer{margin-top:6px}
.nt-dots{display:flex;gap:6px;justify-content:center;margin-bottom:12px}
.nt-dot{width:7px;height:7px;border-radius:50%;background:var(--br2);transition:background .2s,transform .2s}
.nt-dot.on{background:var(--g2);transform:scale(1.25)}
.nt-pulse{animation:ntPulse .9s ease 2}
@keyframes ntPulse{0%,100%{box-shadow:var(--sh)}50%{box-shadow:0 0 0 4px var(--bll),var(--sh)}}

/* ── PANEL DEL COACH — pulido Noir Esmeralda (paridad con el interior premium del asesorado) ── */
#s-coach .coach-topbar-logo{font-family:'Anton',sans-serif;font-weight:400;font-size:19px;letter-spacing:2.5px}
#s-coach .coach-topbar .btn svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#s-coach .sblogo>div{font-family:'Anton',sans-serif;font-weight:400;font-size:20px;letter-spacing:2px}
#s-coach .sblogo small{font-family:'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.2px}
#s-coach .sbsect{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:1.7px;color:var(--g2)}
#s-coach .sbi{position:relative}
#s-coach .sbi .ic svg{width:19px;height:19px;display:block;margin:0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#s-coach .sbi.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--g2);box-shadow:0 0 8px rgba(16,224,160,.55)}
#s-coach .ctitle{font-family:'Anton',sans-serif;font-weight:400;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gt)}
#s-coach .sm{position:relative;overflow:hidden}
#s-coach .sm::after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,rgba(16,224,160,.12),transparent 70%);pointer-events:none}
#s-coach .smv{font-family:'Anton',sans-serif;font-weight:400;font-size:30px;letter-spacing:.3px}
#s-coach .sml{text-transform:uppercase;letter-spacing:.5px;font-size:10.5px;font-weight:600}
#s-coach .cbnav-item{position:relative}
#s-coach .cbnav-item .cnic svg{width:23px;height:23px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#s-coach .cbnav-item.on .cnic svg{stroke-width:2.2}
#s-coach .cbnav-item.on{border-top-color:transparent}
#s-coach .cbnav-item.on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:2px;border-radius:2px;background:var(--g2);box-shadow:0 0 10px var(--g2)}
#s-coach .ph-eyebrow{font-family:'Anton',sans-serif;font-weight:400;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--g2);margin-bottom:3px}
#s-coach .ptitle{font-size:21px;letter-spacing:-.4px}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;min-width:36px;padding:8px 14px;border-radius:var(--rsm);font-family:inherit;font-size:var(--fs-base);font-weight:600;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);border:1.5px solid transparent;white-space:nowrap}
.btn:active{transform:scale(.97)}
.bp{background:var(--g);color:white;border-color:var(--g)}.bp:hover{background:var(--g2)}
.bg{background:transparent;color:var(--t2);border-color:var(--br2)}.bg:hover{background:var(--bg);color:var(--t1)}
.bo{background:var(--or);color:var(--on-or);border-color:var(--or)}.bo:hover{background:#d4624a}
.bd{background:var(--rdl);color:var(--rdt);border-color:var(--rd)44}.bd:hover{background:var(--rd-fill);color:var(--on-rd)}
/* Auditoría FASE 2 (2026-07-27): el botón pequeño medía 27px de alto — por debajo de los 36px
   que la propia doctrina del proyecto exige para cualquier cosa que se toque con el dedo, y
   aparecía así en 11 de las 12 pantallas («Entrenar otra vez», «Enviar», «Editar», «+ Registrar
   pago», «Suspender», los filtros de músculo…). Se mide con hit-testing en `_audit-pantallas`.
   Decisión del PO: subirlo en TODA la app. El ancho ya era amplio; solo faltaba alto. */
.bsm{padding:5px 11px;font-size:var(--fs-sm)}
/* Zona táctil mínima (FASE 0 · primitiva #4, avi-v332; renombrada .tap→.hit40 en v333 para
   NO colisionar con `.profav.tap`, un marcador viejo de cursor:pointer del avatar).
   Íconos-botón sin fondo (✕/borrar): expande el ÁREA de toque a ≥40px con un overlay ::after,
   SIN agrandar el ícono ni la altura de la fila (técnica WCAG 2.5.5). Úsalo cuando los vecinos
   NO son clickables (si lo fueran, el overlay les robaría toque). Botones VISIBLES (con fondo)
   suben su tamaño real, no usan esto. En filas densas (constructor) el cluster se rediseña. */
.hit40{position:relative}
.hit40::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,40px);height:max(100%,40px)}
.bfull{width:100%;justify-content:center}

/* ── TAGS ── */
.tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:var(--fs-xs);font-weight:600}
/* Etiqueta con el color del MÚSCULO: el tinte y el borde llevan el color del código (naranja =
   pecho, etc.) y el TEXTO lleva su versión oscurecida, que es la única que se lee sobre ese
   tinte en tema claro (medido: 7 de los 10 colores no llegaban al mínimo). En oscuro el tinte
   es oscuro y el color crudo PARECÍA leerse — pero medido no: se queda en 2.66-4.46 sobre el
   tinte al 8% encima de la tarjeta oscura, así que ahí va `--mcu` (mcInkUp, el color mezclado
   con blanco). Corregido el 2026-07-29; la nota anterior afirmaba lo contrario.
   Las TRES variables las escribe el render: --mc = color del músculo · --mct = su tinta oscura
   para claro · --mcu = su tinta aclarada para oscuro. */
.mc-chip{color:var(--mct)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mc-chip{color:var(--mcu,var(--mc))} }
:root[data-theme="dark"] .mc-chip{color:var(--mcu,var(--mc))}
:root[data-theme="light"] .mc-chip{color:var(--mct)}
.tg{background:var(--gl);color:var(--gt)}
.to{background:var(--orl);color:var(--ort)}
.tb{background:var(--bll);color:var(--blt)}
.ty{background:var(--yll);color:var(--t1)}
.tr{background:var(--rdl);color:var(--rdt)}

/* ── INPUTS ── */
.inp,.sel,.tarea{width:100%;padding:9px 12px;border:1.5px solid var(--br);border-radius:var(--rsm);font-family:inherit;font-size:16px;color:var(--t1);background:var(--w);outline:none;transition:border-color .15s}
.inp:focus,.sel:focus,.tarea:focus{border-color:var(--g2)}
.tarea{resize:vertical;min-height:68px;line-height:1.5}
.ilbl{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--t2);margin-bottom:4px}
.fg{margin-bottom:11px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* ── CLIENT ITEMS ── */
.cli{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--w);border:1px solid var(--br2);border-radius:var(--r);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);box-shadow:var(--sh);margin-bottom:7px}
.cli:hover{border-color:var(--g2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(45,106,79,.10)}
.cli:active{transform:scale(.985)}
/* Press-feedback FASE 0 (avi-v329): respeta a quien pidió menos movimiento. */
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}.cli:active{transform:none}}
/* El `color:white` es solo el RESPALDO: la tinta de verdad la pone `avcStyle(nombre)` en línea,
   porque depende del color del avatar (6 de los 8 de la paleta no se leen con blanco). Un sitio
   que pinte un avatar sin `avcStyle` hereda este blanco y, si tampoco pone fondo, queda
   invisible — pasó en las tarjetas de carga corporal. Al pintar un avatar: `avcStyle`, siempre. */
.cav{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:white;flex-shrink:0}
.cn{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm{font-size:12px;color:var(--t2);margin-top:2px}
.cli-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;line-height:1.25;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cav.ring{box-shadow:0 0 0 2.5px var(--w),0 0 0 5px var(--cring)}

/* ── ROUTINE CARDS ── */
.rc{background:var(--w);border:1px solid var(--br);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:7px}
.rch{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;transition:background .15s;user-select:none;position:relative}
/* v315 (estudio, mejora 4): foto del primer ejercicio de fondo, a TODA opacidad en el 46%
   derecho con degradado hacia la tarjeta — el texto SIEMPRE queda sobre fondo sólido (lección
   v311). Variante elegida por preview visual (la tímida al 40% de opacidad era una mancha). */
.rc-photo{position:absolute;top:0;right:0;bottom:0;width:46%;background-size:cover;background-position:right center;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 55%);mask-image:linear-gradient(90deg,transparent 4%,#000 55%)}
.rch>:not(.rc-photo){position:relative;z-index:1}
/* el chevron cae SOBRE la foto (oscura) → blanco con sombra para que no desaparezca */
.rc-photo~.rcchev{color:#EAF6EF;text-shadow:0 1px 4px rgba(0,0,0,.65)}
/* nombres largos: el texto no entra a la zona opaca de la foto (aviso Julián v315) */
.rc-photo~.rci{padding-right:20%}
.rch:hover{background:var(--bg)}
.rcnum{width:26px;height:26px;border-radius:50%;background:var(--gl);color:var(--gt);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}
.rcthumb{width:52px;height:52px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:19px;letter-spacing:.5px;color:#fff;text-transform:uppercase;background:linear-gradient(140deg,#10E0A0,#068F66);box-shadow:0 5px 16px rgba(16,224,160,.30)}
/* Rutina de HOY resaltada en oro (igual que el preview interior) */
.rc.rc-today{border-color:rgba(242,201,76,.55);box-shadow:0 8px 26px -12px rgba(242,201,76,.5)}
.rc.rc-today .rcthumb{background:linear-gradient(140deg,#F2C94C,#E0A52E);box-shadow:0 5px 16px rgba(242,201,76,.38);color:#241a05}
.rc-today-tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#241a05;background:#F2C94C;padding:3px 8px;border-radius:20px;margin-left:7px;vertical-align:middle}
.rcthumb.rest{background:linear-gradient(140deg,#3a4a44,#222c28);box-shadow:none;font-size:22px}
.rci{flex:1;min-width:0}
.rcname{font-size:15px;font-weight:800;line-height:1.2}
.rcmeta{font-size:11px;color:var(--t2);margin-top:1px}
.rcpills{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.rcpill{font-size:10.5px;font-weight:700;color:var(--t2);background:var(--bg);border:1px solid var(--br);border-radius:20px;padding:3px 9px;white-space:nowrap}
.rcchev{color:var(--t3);transition:transform .2s;font-size:12px}
/* PLANTILLAS a 390px (F4, 2026-07-28): la fila lleva ícono + nombre + 3 botones + chevron, y al
   nombre le quedaba una columna de ~140px. Con los nombres REALES del coach («Brazo y abdomen
   (plantilla)», 27 caracteres) el título salía partido en tres renglones. Los botones bajan a su
   propia línea y el nombre recupera el ancho entero. Solo aquí: la misma fila en las rutinas del
   asesorado lleva títulos cortos y quedó pulida en v339, no se toca.
   Queda: [📂 Nombre de la plantilla ▼] arriba, [Aplicar · editar · borrar] debajo. */
@media (max-width:430px){
  #tpl-list .rch{flex-wrap:wrap;row-gap:10px}
  #tpl-list .rch>.rcnum{order:0}
  #tpl-list .rch>.rci{order:1;flex:1 1 0;min-width:0}
  #tpl-list .rch>.rcchev{order:2}
  #tpl-list .rch>.tplacts{order:3;flex:1 1 100%;margin-right:0!important}
  #tpl-list .rch>.tplacts .btn:first-child{flex:1}
}
.rc.open .rcchev{transform:rotate(180deg)}
.rcbody{display:none;border-top:1px solid var(--br);padding:12px 14px;background:var(--bg)}
.rc.open .rcbody{display:block}
.exrow{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--w);border:1px solid var(--br);border-radius:12px;margin-bottom:8px;box-shadow:var(--sh);transition:border-color .15s,transform .12s}
.exrow:last-child{margin-bottom:0}
.exrow:hover{border-color:var(--br2)}
.exicon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0;overflow:hidden}
.exicon-img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;cursor:zoom-in}
/* Lightbox de imagen de ejercicio */
.exlb{position:fixed;inset:0;z-index:10000;background:rgba(6,9,10,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;animation:exlbIn .2s ease}
.exlb.on{display:flex}
.exlb img,.exlb video{max-width:100%;max-height:76vh;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.6);background:#0c0c0d}
.exlb-name{margin-top:16px;color:#fff;font-size:16px;font-weight:700;text-align:center;max-width:90%}
.exlb-hint{margin-top:6px;color:rgba(255,255,255,.5);font-size:12px}
.exlb-close{position:absolute;top:max(16px,calc(env(safe-area-inset-top) + 8px));right:18px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center}
@keyframes exlbIn{from{opacity:0}to{opacity:1}}
/* ══ PROGRESO (pestaña consolidada): header de sección + tarjetas de sesión premium ══ */
.prog-sech{font-family:'Anton',sans-serif;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--t2);margin:20px 2px 12px;display:flex;align-items:center;gap:9px}
.prog-sech::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--br2),transparent)}
.sescard{background:var(--w);border:1px solid var(--br);border-left:3px solid var(--g2);border-radius:var(--r);margin-bottom:9px;overflow:hidden;box-shadow:var(--sh)}
.sescard.done{border-left-color:var(--gt)}
.sescard-h{padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:7px}
.sescard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sescard-name{font-size:14.5px;font-weight:800;color:var(--t1);line-height:1.2}
.sescard-date{font-size:11px;color:var(--t3);margin-top:2px;font-family:'JetBrains Mono',monospace}
.sescard-sets{text-align:right;flex-shrink:0}
.sescard-sets b{font-family:'Anton',sans-serif;font-size:20px;line-height:1;color:var(--gt)}
.sescard-sets small{display:block;font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.sescard-pct{font-size:11px;font-weight:800}
.sescard-vol{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gt)}
/* ══ PERFIL → seguimiento premium (scoped, no afecta al coach) ══ */
#cn-profile .card{border-radius:16px}
#cn-profile .ctitle{font-family:'Anton',sans-serif;font-size:12px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:var(--gt)}
.prof-collapse{display:flex;align-items:center;gap:12px;border:1px solid var(--br2);border-left:3px solid var(--g);border-radius:16px;padding:14px 16px;margin-bottom:12px;cursor:pointer;background:linear-gradient(100deg,var(--gl),var(--w) 62%)}
.prof-collapse .pc-ic{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;font-size:18px;background:var(--w);border:1px solid var(--br2)}
.prof-collapse .pc-tx{flex:1}
.prof-collapse .pc-t{font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.5px;color:var(--t1)}
.prof-collapse .pc-s{font-size:11px;color:var(--t3);margin-top:2px}
.prof-collapse .pc-chev{font-size:12px;color:var(--gt);transition:transform .25s}
/* ══ Descanso del guiado MINIMIZADO a banner (pedido Camilo 2026-07-06) ══ */
.gm-rest-hint{margin-top:14px;font-size:12px;color:rgba(255,255,255,.55);text-align:center;padding:0 20px}
.gm-rest-overlay.gm-hold .gm-rest-hint{display:none} /* en isométrico no se minimiza — cancelar es explícito */
.gm-rest-overlay.gm-hold.gm-cardio .gm-rest-hint{display:block} /* el CARDIO sí se minimiza (largo) */
.gm-cardio .gm-rest-sec{font-size:44px;letter-spacing:-1px} /* mm:ss cabe en el círculo */
.gm-rest-mini{position:fixed;left:50%;transform:translateX(-50%);bottom:76px;z-index:960;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#1B4332,#2D6A4F);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:40px;padding:10px 10px 10px 18px;box-shadow:0 10px 28px rgba(0,0,0,.35);cursor:pointer}
.gm-rest-mini b{font-family:'JetBrains Mono',monospace;font-size:20px;line-height:1;min-width:34px;text-align:center}
.gm-rest-mini small{font-size:11px;opacity:.85;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.gm-rest-mini button{background:rgba(255,255,255,.16);border:none;color:#fff;font-family:inherit;font-size:12px;font-weight:700;padding:9px 14px;border-radius:24px;cursor:pointer;min-height:36px}

/* ══ GAMIFICACIÓN: nivel + logros (en pestaña Progreso) ══ */
/* (.gx-month y sus hijas — tarjeta del descuento por adherencia — ELIMINADAS 2026-07-06) */
.gx-lvl{background:radial-gradient(120% 90% at 85% 10%,rgba(16,224,160,.18),transparent 55%),linear-gradient(150deg,#0B1F18,#06120D);border-radius:18px;padding:18px;color:#fff;box-shadow:0 12px 32px rgba(6,20,15,.45);margin-bottom:12px}
.gx-ltop{display:flex;align-items:center;gap:15px}
.gx-ring{width:74px;height:74px;flex-shrink:0;position:relative}
.gx-ring .gx-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gx-ring .gx-num b{font-family:'Anton',sans-serif;font-size:26px;line-height:1}
.gx-ring .gx-num small{font-size:7.5px;letter-spacing:1.5px;color:#10E0A0;font-weight:800}
.gx-lname{flex:1;min-width:0}
.gx-lk{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#10E0A0}
.gx-lt{font-family:'Anton',sans-serif;font-size:26px;line-height:1;margin-top:3px}
.gx-ls{font-size:11px;color:rgba(255,255,255,.6);margin-top:5px}
.gx-prog{margin-top:14px}
.gx-pbar{height:8px;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden}
.gx-pfill{height:100%;background:linear-gradient(90deg,#068F66,#10E0A0);border-radius:6px}
.gx-plbl{display:flex;justify-content:space-between;margin-top:7px;font-size:11px;color:rgba(255,255,255,.7)}.gx-plbl b{color:#fff}
.gx-stats{display:flex;margin-top:15px;border-top:1px solid rgba(255,255,255,.1);padding-top:12px}
.gx-stat{flex:1;text-align:center;position:relative}
.gx-stat+.gx-stat::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.1)}
.gx-sv{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:700}.gx-sv .u{font-size:10px;color:#10E0A0}
.gx-sl{font-size:9px;color:rgba(255,255,255,.55);margin-top:3px}
.gx-title{font-size:13px;font-weight:800;margin:4px 2px 10px}
.gx-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}
.gx-badge{background:var(--w);border:1px solid var(--br);border-radius:13px;padding:11px 5px;text-align:center}
.gx-bic{width:38px;height:38px;margin:0 auto 6px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:linear-gradient(135deg,rgba(16,224,160,.18),rgba(16,224,160,.06));border:1.5px solid rgba(16,224,160,.3)}
.gx-bn{font-size:9px;font-weight:700;line-height:1.2;color:var(--t1)}
.gx-badge.lock .gx-bn{color:var(--t3)}
.gx-badge.lock .gx-bic{background:#f0f0ec;border-color:var(--br);filter:grayscale(1);opacity:.6}
.gx-badge.gold .gx-bic{background:linear-gradient(135deg,rgba(232,197,71,.25),rgba(232,197,71,.08));border-color:rgba(232,197,71,.45)}
/* Medallas de marca (v312): glifo de línea tintado según el chip */
.gx-bic .avic{color:#0FBF8A}
.gx-badge.gold .gx-bic .avic{color:#C9962B}
.gx-badge.lock .gx-bic .avic{color:#8a8a8a}
.exname{font-size:14px;font-weight:700;line-height:1.2}
/* Sin `text-transform:capitalize` (quitado 2026-07-27): existía como parche para que el SLUG
   crudo del músculo («pecho») no se viera en minúscula. Ahora el texto ya viene escrito para
   humanos desde `exMuscleText` (avi-core) y el capitalize lo estropeaba: «Cuádriceps y glúteo»
   salía como «Cuádriceps Y Glúteo». Se arregla el dato, no la vitrina. */
.exmet{font-size:11px;color:var(--t2);margin-top:3px}
/* Indicador de biserie (🔗) — antes heredaba los 11px diminutos de .exmet; se ve apretado y
   cuesta leerlo en plena rutina. Más grande, más peso y más contraste. Camilo 2026-06-29. */
.biset-tag{color:#A855F7;font-weight:800;font-size:13.5px;text-transform:none}
.exsets{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;text-align:right;flex-shrink:0;color:var(--t1)}
.exsets small{display:block;font-size:9.5px;color:var(--t3);font-weight:500;letter-spacing:.2px;margin-top:1px;text-transform:none}
/* Editorial de la semana (asesorado) — intro tipo revista con voz de coach */
.weekly-ed{background:linear-gradient(135deg,var(--gl),var(--w));border:1px solid var(--br);border-left:4px solid var(--g);border-radius:var(--r);padding:15px 17px;margin-bottom:14px;box-shadow:var(--sh)}
.we-kick{font-size:10.5px;font-weight:800;letter-spacing:2px;color:var(--gt);text-transform:uppercase;margin-bottom:7px}
.we-title{font-size:18px;font-weight:800;line-height:1.22;margin-bottom:8px;color:var(--t1)}
.we-body{font-size:13px;color:var(--t2);line-height:1.55}
.we-body b{color:var(--gt);font-weight:800}

/* ── MESSAGES ── */
.mthread{display:flex;flex-direction:column;gap:3px;padding:13px 14px;overflow-y:auto}
.mb{max-width:78%;padding:9px 13px;border-radius:13px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.mb.cs{background:var(--g);color:white;align-self:flex-end;border-bottom-right-radius:4px}
.mb.cl{background:var(--w);border:1px solid var(--br);color:var(--t1);align-self:flex-start;border-bottom-left-radius:4px}
.mt{font-size:10px;color:var(--t3);padding:0 4px 4px}
/* v646 · el entreno de hoy que acompaña a una respuesta rápida */
.mctx{max-width:78%;align-self:flex-start;margin:3px 0 2px;padding:7px 10px;border-radius:10px;background:var(--surface);border:1px dashed var(--br2);font-size:11.5px;line-height:1.45;color:var(--t2)}
.mctx.r{align-self:flex-end}
.mctx-h{font-weight:700;color:var(--t1)}
.mctx-l{overflow-wrap:anywhere}
/* v649 · foto o video dentro de la burbuja */
.mb.mb-media{padding:4px;max-width:70%}
.mmedia{font-size:12px;min-width:120px;min-height:60px;display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden}
.mmedia img,.mmedia video{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:10px;cursor:pointer;background:var(--br)}
.mattach{background:none;border:none;color:var(--gt);cursor:pointer;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:10px}
.mattach:active{transform:scale(.92)}
.mt.r{text-align:right}
.mrow{display:flex;gap:7px;padding:10px 14px;border-top:1px solid var(--br);align-items:flex-end}
/* v316 (estudio, mejora 6): respuestas rápidas del asesorado — un toque y sale el mensaje */
.mquick{display:flex;gap:7px;padding:9px 14px 0;border-top:1px solid var(--br);overflow-x:auto;scrollbar-width:none}
.mquick::-webkit-scrollbar{display:none}
.mquick button{flex-shrink:0;min-height:36px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--gt);background:var(--gl);border:1px solid var(--g2);border-radius:99px;padding:7px 13px;cursor:pointer}
.mquick button:active{transform:scale(.96)}
.mquick~.mrow{border-top:none}
/* ── El chat del asesorado OCUPA la pantalla (F4, 2026-07-28) ──────────────────────────────
   Medido a 390×844: la pestaña «Mensajes» ocupaba 0,4 pantallas — la conversación arriba en una
   cajita de 380px y el campo de escribir flotando a media pantalla, con el 60% de abajo vacío.
   Y no es un caso raro: de 23 asesorados, 11 no han cruzado NUNCA un mensaje y la mediana de los
   otros son 5. O sea, casi todos ven la pantalla flaca. Ahora la tarjeta se estira hasta abajo,
   el hilo scrollea por dentro y el compositor queda al pie, como en cualquier chat (y como el de
   pantalla completa del coach, .cchat, que ya funcionaba así). Los mensajes se apoyan ABAJO
   (margin-top:auto en el primero) para que la conversación crezca hacia arriba. */
/* height (no min-height): con min-height el panel CRECÍA con los mensajes y el que scrolleaba
   era el cuerpo entero — medido con 30 mensajes: el panel se iba a 2289px y el compositor se
   perdía abajo del todo. Con altura fija, el que scrollea es el hilo, que es lo que debe pasar. */
#cn-messages.on{display:flex;flex-direction:column;height:100%}
#cn-messages>.card{flex:1;display:flex;flex-direction:column;min-height:0}
#cn-msg-thread{flex:1;min-height:0}
#cn-msg-thread>:first-child{margin-top:auto}
/* Estado sin mensajes: se centra en el hueco en vez de quedar pegado arriba. */
.mempty{margin:auto;text-align:center;padding:22px 18px}
.mempty .eico{color:var(--g2);margin-bottom:10px}
.mempty .etxt{font-size:14.5px;font-weight:800;color:var(--t1);margin-bottom:5px}
.mempty .esub{font-size:12.5px;color:var(--t3);line-height:1.5;max-width:30ch;margin:0 auto}
.mta{flex:1;padding:8px 12px;border:1.5px solid var(--br);border-radius:var(--rsm);font-family:inherit;font-size:16px;color:var(--t1);background:var(--w);outline:none;resize:none;transition:border-color .15s;max-height:90px;line-height:1.4}
.mta:focus{border-color:var(--g2)}

/* ── EX LIBRARY ── */
.exgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.exc{background:var(--w);border:1.5px solid var(--br2);border-radius:var(--r);padding:13px;box-shadow:var(--sh);transition:border-color var(--dur-fast) var(--ease-out)}
.exc:hover{border-color:var(--g2)}

/* ── MODAL ── */
.mdbg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px);padding:20px}
.mdbg.on{display:flex}
.md{background:var(--w);border-radius:18px;padding:24px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--sh2);animation:mIn .2s ease}
.mdlg{max-width:660px}
@keyframes mIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
/* El foco de accesibilidad (Grupo D) enfoca el contenedor .md por programa (tabindex=-1) → sin
   anillo visible (no es navegación por teclado hacia él). */
.md:focus{outline:none}
@media (prefers-reduced-motion:reduce){.md{animation:none}}
.mdtitle{font-size:17px;font-weight:800;margin-bottom:16px}
.mdfooter{display:flex;gap:7px;justify-content:flex-end;margin-top:16px}

/* ── BACK ── */
.back{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--t2);cursor:pointer;margin-bottom:14px;transition:color .15s}
.back:hover{color:var(--gt)}

/* ── EMPTY ── */
.empty{text-align:center;padding:36px 16px}
.eico{font-size:36px;margin-bottom:10px}
.etxt{font-size:var(--fs-base);font-weight:600;color:var(--t2);margin-bottom:3px}
.esub{font-size:var(--fs-sm);color:var(--t3)}

/* ── TOAST ── */
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(50px);background:#1A1A1A;color:white;padding:10px 18px;border-radius:18px;font-size:13px;font-weight:500;z-index:9999;opacity:0;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);white-space:normal;width:max-content;max-width:calc(100vw - 32px);text-align:center;pointer-events:none;box-shadow:var(--sh2)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── PROGRESS BAR ── */
.pbar{height:5px;background:var(--br);border-radius:3px;overflow:hidden;margin-top:6px}
.pfill{height:100%;border-radius:3px;transition:width .5s ease}

/* ════ CLIENT VIEW ════ */
#s-client{flex-direction:column;background:var(--bg);overflow-y:auto}
.cntopbar{background:var(--emerald-hdr);border-bottom:1px solid rgba(16,224,160,.20);padding:13px 18px;padding-top:max(13px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:100;box-shadow:0 6px 22px rgba(6,20,15,.28)}
.cnlogo{font-size:17px;font-weight:800;color:#fff}
.cntopbar #cn-greet{color:rgba(255,255,255,.85)!important}
.cntopbar #cn-help-btn{background:rgba(255,255,255,.15)!important;color:#fff!important}
.cntopbar .btn.bg{background:rgba(255,255,255,.13);color:#fff;border-color:transparent}
/* Tinte esmeralda muy sutil arriba del cuerpo, para fundir el encabezado con el contenido */
.cnbody{background:linear-gradient(180deg,rgba(16,224,160,.06),var(--bg) 120px)}
.cntabs{display:flex;background:var(--w);border-top:1px solid var(--br);position:sticky;bottom:0;z-index:100;flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.cntab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 2px;cursor:pointer;transition:color var(--dur-fast) var(--ease-out),border-top-color var(--dur-fast) var(--ease-out);font-size:11px;font-weight:600;color:var(--t3);gap:3px;border-top:2px solid transparent}
.cntab .ctico{font-size:19px;line-height:1;display:inline-block;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.cntab .ctico svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cntab.on{color:var(--gt);border-top-color:var(--gt)}
.cntab.on .ctico{transform:scale(1.12) translateY(-1px)}
.cntab.on .ctico svg{stroke-width:2.2}
.cntab-badge{position:relative;display:inline-block}
.cntab-badge::after{content:attr(data-count);position:absolute;top:-4px;right:-8px;background:var(--rd-fill);color:var(--on-rd);font-size:9px;font-weight:800;padding:1px 4px;border-radius:10px;min-width:14px;text-align:center;line-height:14px;display:none}
.cntab-badge[data-count]:not([data-count="0"])::after{display:block}
.cnbody{flex:1;overflow-y:auto}
/* El botón flotante "Instalar app" (#install-banner, position:fixed bottom:84px) tapaba el
   final del contenido en las pantallas del asesorado (.cnbody) Y en el panel del coach (.main —
   tapaba la última tarjeta de prioritarios). Mientras está visible (solo si NO está instalada la
   app), reservar hueco al final del scroller para que la última tarjeta quede por encima.
   :has() → cero cambios a la lógica de instalación; degrada elegante si no hay soporte.
   (Perfil pase 2 avi-v335 → extendido al home del coach avi-v338.) */
body:has(#install-banner[style*="flex"]) .cnbody,
body:has(#install-banner[style*="flex"]) .main{padding-bottom:64px}
.cnp{display:none;padding:16px 15px 8px}
.cnp.on{display:block;animation:fadeIn .28s cubic-bezier(.22,.68,0,1.2)}

/* Today hero — foto libre ARRIBA y texto ABAJO (Camilo 2026-07-05: "que las letras
   no escondan la imagen"); mismo patrón del banner del coach. Degradado vertical:
   suave arriba (foto visible) → oscuro abajo (texto legible). */
.wohero{background:linear-gradient(180deg,rgba(8,26,19,.12) 0%,rgba(8,26,19,.30) 42%,rgba(6,17,12,.93) 78%,rgba(5,14,10,.97) 100%),url('media/brand/ob-1.jpg') center 20%/cover,linear-gradient(160deg,#0f3526,#0a2118 72%);border:1px solid var(--br2);border-radius:var(--rlg);padding:20px;color:white;margin-bottom:13px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(360px,95vw,470px)}
.wohero::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 88% -12%,rgba(16,224,160,.22),transparent 55%);pointer-events:none}
.woday{font-family:'Anton',sans-serif;font-size:12px;font-weight:400;letter-spacing:1.4px;text-transform:uppercase;color:#F2C94C;margin-bottom:5px;position:relative}
.woname{font-size:23px;font-weight:800;letter-spacing:-.3px;margin-bottom:8px;position:relative}
.wopills{display:flex;gap:6px;flex-wrap:wrap}
.wopill{background:rgba(255,255,255,.18);border-radius:20px;padding:3px 10px;font-size:12px;font-weight:600}
/* Saludo grande + racha (cabecera del "Hoy") */
/* 🔴 REPORTE DEL PO (25-ago): con 14 semanas de racha el letrero se salía de la pantalla y había
   que arrastrarla de lado para leerlo. Medido con su caso real (`_repro-racha-desborde.mjs`): el
   chip largo —«15 semanas seguidas entrenando»— mide 263 px con letra normal, 310 en «Grande» y
   368 en «Muy grande» (el contenedor lleva `zoom` con esas tallas), contra 360 de pantalla; y
   como la fila era de UN renglón y el chip tenía PROHIBIDO encoger (`flex-shrink:0`) y partirse
   (`white-space:nowrap`), lo que sobraba —de 29 a 163 px— se convertía en desplazamiento lateral.
   ⚠️ El desborde NO estaba en el documento sino en el contenedor interno, que es por lo que una
   sonda que mira `documentElement.scrollWidth` lo daba por sano.
   Arreglo: la fila puede envolver y el chip puede encoger y partir su texto. Si no cabe al lado
   del saludo, baja a su propio renglón — pantalla uniforme, nada que arrastrar. */
#cn-today-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 15px;flex-wrap:wrap}
.today-greet{min-width:0}
.today-greet .tg-hi{font-size:13px;color:var(--t2);line-height:1.1;margin-bottom:2px}
.today-greet .tg-name{font-size:25px;font-weight:800;letter-spacing:-.4px;line-height:1.12;color:var(--t1)}
.streak-chip{flex-shrink:1;min-width:0;max-width:100%;display:inline-flex;align-items:center;gap:5px;background:var(--gl);border:1px solid var(--g2);color:var(--gt);border-radius:22px;padding:8px 14px;font-size:13px;font-weight:700;white-space:normal;text-wrap:balance}
.streak-chip b{font-size:16px}
.streak-chip.streak-0{background:var(--bg);border-color:var(--br2);color:var(--t2);font-weight:600}

/* ══ EL HÉROE DE «HOY» — dirección B «El Compromiso» (v503) ═══════════════════════════════
   El PO eligió B de cuatro columnas puestas lado a lado: el día tiene UNA promesa. El saludo,
   la racha y el arranque del entreno —tres bloques separados hasta hoy— se funden en una sola
   superficie esmeralda a sangre. No inventa paleta: --emerald-hdr y --accent3 ya existían.
   El #10E0A0 vive AQUÍ y solo aquí: sobre este fondo mide 10,10:1; sobre blanco medía 1,72
   (auditoría de Isabella, verificado). No sacarlo del héroe. */
#cn-today-head.hero-on{display:block;margin:-16px -15px 15px}
.tod-hero{background:var(--emerald-hdr);color:var(--on-emerald);padding:18px 20px 22px;
  border-radius:0 0 26px 26px;box-shadow:0 10px 30px rgba(6,20,15,.30)}
.tod-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.hero-on .today-greet{min-width:0}
.hero-on .today-greet .tg-hi{color:rgba(255,255,255,.74)}
.hero-on .today-greet .tg-name{color:var(--on-emerald);font-size:20px;letter-spacing:-.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* En el HÉROE el chip es el corto («15 sems.», 100-139 px medidos) y comparte renglón con el
   nombre, que ya se recorta con puntos suspensivos: ahí SÍ va en una línea. Medido en las 6
   combinaciones de ancho y talla de letra: nunca desborda. */
.hero-on .streak-chip{background:rgba(255,255,255,.14);border-color:transparent;color:var(--on-emerald);
  font-size:12px;padding:7px 12px;white-space:nowrap;flex-shrink:0}
.hero-on .streak-chip b{font-size:14px}
.hero-on .streak-chip.streak-0{background:rgba(255,255,255,.10);color:rgba(255,255,255,.78)}
.tod-hero-k{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent3);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.tod-hero-t{font-weight:800;line-height:1.04;margin:0 0 8px}
/* El titular se escala por LARGO del nombre (heroTitleSize, avi-core): a 34 px un nombre real
   de 40 caracteres son cuatro líneas y el héroe se come la pantalla que venía a ordenar. */
.tod-hero-t[data-size="xl"]{font-size:34px;letter-spacing:-1px}
.tod-hero-t[data-size="lg"]{font-size:28px;letter-spacing:-.7px}
.tod-hero-t[data-size="md"]{font-size:24px;letter-spacing:-.5px}
.tod-hero-m{font-size:13px;color:rgba(255,255,255,.74);line-height:1.35;margin-bottom:16px}
.tod-hero-list{list-style:none;margin:0 0 20px;padding:0}
.thl{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.10)}
.thl-n{width:22px;flex-shrink:0;font-size:11px;font-weight:800;color:var(--accent3);font-variant-numeric:tabular-nums}
.thl-x{flex:1;min-width:0;font-size:14px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;overflow-wrap:break-word}
.thl-d{flex-shrink:0;font-size:12px;font-weight:600;color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums}
.thl-more{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.70);padding-left:34px}
.tod-hero-cta{width:100%;min-height:56px;border:0;border-radius:16px;background:var(--accent3);
  color:var(--on-accent3);font-family:inherit;font-size:17px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 8px 24px rgba(16,224,160,.28);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.tod-hero-cta:active{transform:scale(.975);box-shadow:0 4px 14px rgba(16,224,160,.22)}
.tod-hero-alt{width:100%;margin-top:10px;min-height:38px;background:transparent;border:0;
  color:rgba(255,255,255,.66);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .tod-hero-list .thl{opacity:0;transform:translateY(6px);animation:heroIn 320ms var(--ease-out) forwards}
  .tod-hero-list .thl:nth-child(1){animation-delay:40ms}
  .tod-hero-list .thl:nth-child(2){animation-delay:90ms}
  .tod-hero-list .thl:nth-child(3){animation-delay:140ms}
  .tod-hero-list .thl:nth-child(4){animation-delay:190ms}
  .tod-hero-list .thl:nth-child(5){animation-delay:240ms}
  .tod-hero-list .thl:nth-child(n+6){animation-delay:290ms}
}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}

/* ── Fotos de marca en pantallas ──
   (El saludo del "Hoy" es texto: una sola imagen por pantalla — la foto del coach
   saludando vive en la bienvenida .cwelcome, decisión de Camilo 2026-07-05.)
   Estado vacío (día de descanso): foto vertical de fondo + degradado + texto blanco centrado */
.avi-restbnr{position:relative;border-radius:var(--rlg);overflow:hidden;isolation:isolate;background:#0a1712}
.avi-restbnr .rb-bg{position:absolute;inset:0;background-size:cover;background-position:center 16%}
.avi-restbnr .rb-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,9,.12) 0%,rgba(6,12,9,.32) 48%,rgba(6,12,9,.93) 100%)}
.avi-restbnr .rb-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;gap:9px;min-height:clamp(360px,95vw,470px);padding:30px 18px 22px}
.avi-restbnr .rb-title{color:#fff;font-weight:800;font-size:16px;line-height:1.2;margin:0}
.avi-restbnr .rb-sub{color:rgba(255,255,255,.85);font-size:13px;line-height:1.5;margin:0;max-width:34ch}
/* Panel del coach: foto horizontal (coach-verde) + degradado lateral + título/botón */
.avi-coachbnr{position:relative;border-radius:var(--rlg);overflow:hidden;isolation:isolate;margin-bottom:16px;background:#0a1712}
.avi-coachbnr .cb-bg{position:absolute;inset:0;background-size:cover;background-position:center 15%}
.avi-coachbnr .cb-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,9,.16) 0%,rgba(6,12,9,.42) 55%,rgba(6,12,9,.88) 100%)}
.avi-coachbnr .cb-in{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:clamp(240px,76vw,340px);padding:20px 18px 16px}
#s-coach .avi-coachbnr .ph-eyebrow{color:#F2C94C}
.avi-coachbnr .ptitle{color:#fff}
/* Racha y constancia (Premium): 3 stats etiquetados + mensaje claro + calendario */
.streak-card{margin-bottom:14px}
.streak-title{font-size:13px;font-weight:800;color:var(--t1);margin-bottom:12px}
.streak-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.sstat{text-align:center;border-radius:var(--rsm);padding:13px 4px}
.sstat-g{background:var(--gl)} .sstat-y{background:var(--yll)} .sstat-b{background:var(--bll)}
.sstat-n{font-size:28px;font-weight:800;line-height:1}
.sstat-g .sstat-n{color:var(--g)} .sstat-y .sstat-n{color:var(--t1)} .sstat-b .sstat-n{color:var(--blt)}
.sstat-l{font-size:10px;color:var(--t2);font-weight:700;margin-top:4px;text-transform:uppercase;letter-spacing:.3px}
.streak-msg{font-size:13px;color:var(--t1);line-height:1.55;background:var(--bg);border-radius:var(--rsm);padding:11px 13px;margin-bottom:16px}
.streak-msg b{color:var(--gt)}
.cal-month{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.cal-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px}
.cal-dows span{text-align:center;font-size:10px;color:var(--t3);font-weight:700}
/* `minmax(0,1fr)` y no `1fr`: el mínimo automático de una pista `1fr` es su MIN-CONTENT, y las
   celdas VACÍAS del calendario (las del hueco antes del día 1 y después del último) llevan
   `aspect-ratio:1` sin contenido → su mínimo lo resuelve el navegador desde el ALTO de la fila y
   engordan la pista. Medido: celdas vacías de 100,8 px donde las de día median 44,8, y las 7
   columnas sumando 253,9 px dentro de una rejilla de 216,4. `min-width:0` en la celda NO alcanza:
   acota el ítem, no la PISTA. A tamaño normal esto no se veía (la última caía en 386 de 390 px),
   pero con letra grande la columna del DOMINGO quedaba cortada — días 2, 9, 16, 23 y 30 medio
   fuera de la pantalla. Salió al aplicar el zoom a las habitaciones (2026-08-08); el defecto ya
   estaba y solo le faltaban 4 px para asomar. */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
/* `width:100%` es load-bearing: sin él, una celda SIN contenido (los huecos del mes) deja sus dos
   ejes en `auto`, el grid la estira en alto y `aspect-ratio:1` le deriva el ANCHO del alto → se
   sale de su columna (medido: 100,8 px en una pista de 26,6). Con el ancho fijado al de la pista,
   el aspect-ratio deriva el ALTO, que es el orden correcto. Las celdas CON día nunca lo sufrieron
   porque su texto les daba un ancho de referencia. */
.cal-cell{width:100%;min-width:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border-radius:7px;color:var(--t3);background:var(--bg)}
.cal-cell.empty{background:transparent}
.cal-cell.future{background:transparent}
.cal-cell.trained{background:var(--g);color:#EAFBF4;font-weight:800}
.cal-cell.trained.t2{background:var(--g2);color:#06231a}
.cal-cell.today{outline:2px solid var(--or);outline-offset:1px}
.cal-cell.trained{cursor:pointer}
.sescard.flash{animation:sesflash 1.6s ease}
@keyframes sesflash{0%,100%{box-shadow:var(--sh)}28%{box-shadow:0 0 0 3px var(--g2)}}
.cal-legend{margin-top:10px;font-size:11px;color:var(--t2);display:flex;align-items:center;gap:7px}
.cal-legend i{width:13px;height:13px;border-radius:4px;background:var(--g);display:inline-block;flex-shrink:0}

/* Advanced stats (Premium): push/pull balance + muscle volume */
.adv-card{margin-bottom:14px}
.adv-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.adv-head .streak-title{margin-bottom:0}
.adv-win{display:flex;gap:4px;flex-shrink:0}
.adv-pill{border:1.5px solid var(--br2);background:var(--bg);color:var(--t2);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;min-height:36px;display:inline-flex;align-items:center;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.adv-pill.on{background:var(--g);border-color:var(--g);color:#EAFBF4}
.adv-sub{font-size:12px;color:var(--t2);line-height:1.5;margin-bottom:14px}
.adv-sub b{color:var(--t1)}
.adv-bal{margin-bottom:18px}
.adv-bal-bar{display:flex;height:30px;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--br)}
.adv-bal-seg{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;min-width:0;transition:width .4s ease}
.adv-bal-seg.push{background:#2f7f5b}
.adv-bal-seg.pull{background:#3a86c8}
.adv-bal-legend{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--t2);font-weight:600;margin-top:7px}
.adv-bal-legend .dot{width:9px;height:9px;border-radius:3px;display:inline-block;vertical-align:middle;margin-right:4px}
.adv-bal-legend .dot.push{background:#3ba776}
.adv-bal-legend .dot.pull{background:#3a86c8}
.adv-verdict{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--t1);line-height:1.5;background:var(--bg);border:1.5px solid var(--br);border-radius:var(--rsm);padding:10px 12px;margin-top:11px}
.adv-verdict span:first-child{flex-shrink:0;font-size:15px;line-height:1.2}
.adv-sech{font-size:11px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:11px}
.adv-bars{display:flex;flex-direction:column;gap:9px}
.adv-row{display:flex;align-items:center;gap:9px}
.adv-row-lbl{width:64px;flex-shrink:0;font-size:12px;font-weight:700;color:var(--t1);text-align:right}
.adv-row-track{flex:1;height:14px;background:var(--bg);border-radius:7px;overflow:hidden}
.adv-row-fill{height:100%;border-radius:7px;transition:width .4s ease;min-width:6px}
.adv-row-val{width:54px;flex-shrink:0;font-size:14px;font-weight:800;color:var(--t1);line-height:1}
.adv-row-val span{font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.3px;margin-left:3px}
.adv-foot{font-size:11px;color:var(--t3);line-height:1.5;margin-top:14px}
.adv-foot b{color:var(--t2)}
.adv-grp.can .adv-row{cursor:pointer;border-radius:7px;transition:background .12s}
.adv-grp.can .adv-row:hover{background:var(--bg)}
.adv-chev{font-size:9px;color:var(--t3);display:inline-block;transition:transform .2s}
.adv-sm{padding:8px 0 4px 14px;display:flex;flex-direction:column;gap:6px}
.adv-smrow{display:flex;align-items:center;gap:8px}
.adv-smrow-lbl{width:118px;flex-shrink:0;font-size:11px;color:var(--t2);text-align:right;line-height:1.2}
.adv-smrow-track{flex:1;height:9px;background:var(--bg);border-radius:5px;overflow:hidden}
.adv-smrow-fill{height:100%;border-radius:5px;opacity:.65}
.adv-smrow-val{width:22px;flex-shrink:0;font-size:12px;font-weight:700;color:var(--t1);text-align:right}

/* Plan selector (coach): 3 niveles de acceso */
.plan-control{background:var(--w);border:1px solid var(--br);border-radius:var(--r);padding:13px 14px;margin-bottom:12px}
.plan-control-h{font-size:11px;font-weight:800;color:var(--t3);letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px}
.plan-wants{font-size:12px;color:var(--ort);background:var(--orl);border-radius:var(--rsm);padding:9px 11px;line-height:1.45;margin-bottom:10px}
.planopts{display:flex;flex-direction:column;gap:7px}
.planopt{display:block;width:100%;text-align:left;background:var(--bg);border:1.5px solid var(--br2);border-radius:var(--rsm);padding:10px 12px;cursor:pointer;font-family:inherit;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.planopt:hover:not(.on){border-color:var(--g2);background:var(--gl)}
.planopt.on{border-color:var(--g);background:var(--gl);cursor:default}
.planopt-lbl{font-size:13px;font-weight:800;color:var(--t1)}
.planopt-sub{font-size:11px;color:var(--t2);margin-top:2px}

/* ── "Habitación" de detalle de sesión: aparece con scale+fade (premium, no slide) ── */
/* Mientras una habitación está abierta, el botón flotante "Instalar app" NO debe
   asomarse encima (su ✕ se veía como un círculo negro). !important gana aunque el
   evento beforeinstallprompt re-muestre el banner async con display:flex inline. */
body.sroom-open #install-banner,body.sroom-open #ios-install-banner{display:none!important}
/* En el LOGIN el banner flotante estorba: el propio #s-login ya trae su recuadro
   "Instala la app" (#install-hint) con las instrucciones por dispositivo. La píldora
   flotante se encimaba sobre ese recuadro (redundante + tapaba su título). Ocultarla
   mientras #s-login está activo; reaparece sola al entrar a las pantallas internas
   (showScreen quita .on del login), donde sí tiene sentido sobre el bottom-nav.
   #install-banner/#ios-install-banner van DESPUÉS de #s-login en el DOM → hermano ~. */
#s-login.on~#install-banner,#s-login.on~#ios-install-banner{display:none!important}
/* Con un chat de pantalla completa abierto (.cchat.on = chat del coach O DMs de comunidad ①),
   la píldora flotante se encimaba sobre el hilo/composer. Ocultarla mientras haya un .cchat
   abierto; reaparece sola al cerrarlo. Arregla ambos chats de una (defecto preexistente del
   chat del coach + el nuevo de comunidad). */
body:has(.cchat.on) #install-banner,body:has(.cchat.on) #ios-install-banner{display:none!important}
/* F13 (2026-07-26): en la PANTALLA DE FIN la píldora flotante se encimaba sobre «Compartir mi
   entreno» (visto en la captura a 360x640 del harness: el ✕ del banner asomaba sobre el botón).
   Misma clase que el login y los chats. Reaparece sola al cerrar el cierre. */
body:has(#workout-finish.on) #install-banner,body:has(#workout-finish.on) #ios-install-banner{display:none!important}
/* 2026-07-27 (estudio de interfaz, defecto 3 — MEDIDO con hit-testing, no supuesto): mientras
   el asesorado tiene el ENTRENO en pantalla, la píldora flotante no "tapaba" los campos: se
   quedaba con el TOQUE. A 390×844 se paraba sobre los campos KG/REPS de una serie (y sobre
   «Ver cómo se hace» / reordenar) → tocar para anotar el peso abría el instalador. Es el peor
   sitio posible: el registro de series es LA tarea de la app. El mismo encimado le pasaba a
   «Hacer esta rutina ahora» en la pestaña «Rutinas».
   La clase la pone/quita el guardián de app-6-extra CONTROL POR CONTROL (regla pura
   `pillStealsTap`) y solo en «Hoy» y «Rutinas»: instalar la app es el problema nº1 de adopción
   (a 15 de 16 no se les puede notificar), así que la píldora se conserva en el resto de «Hoy»,
   en Progreso, Perfil, Mensajes y Comunidad, y vuelve en cuanto deja de estorbar.
   Se oculta con visibility (no display) A PROPÓSITO: así conserva su caja y el guardián puede
   seguir midiendo dónde caería — con display:none el rect se vuelve 0 y la regla se apagaría a
   sí misma en bucle. `visibility:hidden` además la saca del hit-testing, que es justo el punto.
   El banner de iOS NO entra aquí: ese es una guía que el usuario ABRE a propósito. */
#install-banner{transition:opacity var(--dur) var(--ease-out)}
body.avi-train-onscreen #install-banner{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
.sroom{position:fixed;inset:0;z-index:1400;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transform:scale(.94);transform-origin:50% 42%;transition:opacity .24s ease,transform .34s cubic-bezier(.2,.85,.3,1);visibility:hidden;overscroll-behavior:contain}
.sroom.on{opacity:1;transform:none;visibility:visible}
.sroom-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:13px 16px;padding-top:max(13px,env(safe-area-inset-top));background:var(--bg);border-bottom:1px solid var(--br)}
.sroom-back{position:relative;background:var(--w);border:1.5px solid var(--br2);color:var(--t1);font-family:inherit;font-size:14px;font-weight:800;padding:7px 15px;border-radius:999px;cursor:pointer}
/* El pill mide 34 px de alto y la guia de Apple pide 44 para el dedo. Se agranda el AREA
   PULSABLE con un ::after invisible, no el boton: asi el diseño no cambia en ningun tema. */
.sroom-back::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.sroom-back:active{transform:scale(.96)}
.sroom-bar-t{font-size:13px;font-weight:700;color:var(--t2)}
.sroom-body{padding:16px 16px 34px;max-width:560px;margin:0 auto}
/* hero: tarjeta con gradiente de marca + anillo de progreso (profundidad) */
.sroom-hero{display:flex;align-items:center;gap:16px;background:linear-gradient(150deg,#0e3d2c 0%,#06231a 72%);border:1px solid rgba(16,224,160,.18);border-radius:20px;padding:17px 18px;margin-bottom:15px;box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06)}
.sroom-ring{position:relative;width:74px;height:74px;flex-shrink:0}
.sroom-ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.sroom-ring .sr-bg{fill:none;stroke:rgba(255,255,255,.13);stroke-width:6}
.sroom-ring .sr-fg{fill:none;stroke:#10E0A0;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(16,224,160,.5))}
.sroom.on .sroom-ring .sr-fg{transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1) .18s}
.sroom-ring-n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;color:#fff}
.sroom-ring-n small{font-size:11px;margin-left:1px;opacity:.8}
.sroom-hero-txt{min-width:0}
.sroom-date{font-size:12px;color:rgba(234,251,244,.7);font-weight:600}
.sroom-title{font-size:22px;font-weight:800;color:#fff;line-height:1.15;margin:3px 0 7px}
.sroom-hero-feel{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:rgba(234,251,244,.9);background:rgba(255,255,255,.09);padding:4px 11px;border-radius:999px}
/* tarjetas de estadística con capas y sombra */
.sroom-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.sroom-stat{position:relative;background:linear-gradient(168deg,var(--w),var(--bg));border:1px solid var(--br);border-radius:14px;padding:15px 8px 13px;text-align:center;box-shadow:0 5px 14px rgba(0,0,0,.14);min-width:0;overflow:hidden}
.sroom-stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--sc,var(--g));opacity:.9}
.sroom-stat-ic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;margin:0 auto 7px;background:color-mix(in srgb,var(--sc,var(--g)) 14%,transparent)}
.sroom-cmp{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;border-radius:var(--rsm);padding:9px 13px;margin-bottom:16px;line-height:1.35}
.sroom-cmp.up{background:var(--gl);color:var(--gt);border:1px solid var(--g2)}
.sroom-cmp.down{background:var(--orl);color:var(--ort);border:1px solid color-mix(in srgb,var(--or) 35%,transparent)}
.sroom-cmp.flat{background:var(--bg);color:var(--t2);border:1px solid var(--br)}
.sroom-cmp .sroom-cmp-ic{display:flex;align-items:center;flex-shrink:0}
.sroom-cmp .sroom-cmp-d{margin-left:auto;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;white-space:nowrap}
.sroom-stat-v{font-size:18px;font-weight:800;color:var(--t1);line-height:1.1;word-break:break-word}
.sroom-stat-l{font-size:9.5px;color:var(--t2);font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-top:4px}
.sroom-summary{background:var(--gl);border:1px solid var(--g2);border-radius:var(--r);padding:14px 16px;font-size:13.5px;line-height:1.62;color:var(--t1);margin-bottom:16px;box-shadow:0 4px 14px rgba(16,224,160,.08)}
.sroom-summary b{color:var(--gt);font-weight:800}
.sroom-sec{font-size:12px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;margin:6px 0 11px}
.sroom-pr{display:flex;align-items:center;gap:11px;background:linear-gradient(165deg,#FBF4DC,#F4E9C2);border:1px solid #EBDDA8;border-radius:var(--rsm);padding:11px 13px;margin-bottom:8px;box-shadow:0 4px 12px rgba(154,123,22,.14)}
.sroom-pr-ic{font-size:22px;flex-shrink:0;color:#e0a72e;display:flex}
.sroom-pr-n{font-size:13px;font-weight:800;color:#7a5e0e}
.sroom-pr-d{font-size:12px;color:#9A7B16;margin-top:1px}
.sroom-exs{margin-top:2px}
/* Habitación de EJERCICIO */
.exroom-hero{gap:14px}
.exroom-hero-ic{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.exroom-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.exroom-tags span{font-size:11px;font-weight:700;color:rgba(234,251,244,.92);background:rgba(255,255,255,.10);padding:3px 10px;border-radius:999px}
/* Heros con TINTE translúcido (récord/rutina/músculo/nutrición) — bug v311, reporte Camilo:
   el tinte reemplazaba el gradiente oscuro del hero y el título #fff quedaba ilegible en tema
   claro. El inline ahora pinta el tinte SOBRE var(--w) y el texto usa tokens del tema. */
.sroom-hero.hero-tint .sroom-title{color:var(--t1)}
.sroom-hero.hero-tint .exroom-tags span{color:var(--t1);background:color-mix(in srgb,var(--t1) 9%,transparent)}
.exroom-note{background:var(--w);border:1px solid var(--br);border-radius:14px;padding:14px 16px;font-size:13px;color:var(--t2);line-height:1.55;margin-bottom:16px}
.exroom-tech{background:var(--w);border:1px solid var(--br);border-radius:14px;padding:13px 15px;font-size:13px;color:var(--t1);line-height:1.6;margin-bottom:10px}
.exroom-tech-btn{width:100%;padding:12px;background:var(--gl);border:1px solid var(--g2);border-radius:12px;color:var(--gt);font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;margin-bottom:6px}
.exroom-tech-btn:active{transform:scale(.98)}
.exroom-hrow{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;background:var(--w);border:1px solid var(--br);border-radius:11px;margin-bottom:6px;font-size:12.5px;color:var(--t2)}
.exroom-hrow-v{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--t1)}
/* Habitación del MES */
.cal-month-door{cursor:pointer;display:inline-flex;align-items:center;gap:5px;background:var(--gl);border:1px solid var(--g2);border-radius:999px;padding:4px 12px;color:var(--gt)}
.cal-month-chev{font-size:14px;font-weight:800;line-height:1}
.mroom-cal{background:var(--w);border:1px solid var(--br);border-radius:14px;padding:13px 13px 11px;margin-bottom:16px}
.mroom-top{display:flex;align-items:center;gap:11px;background:var(--w);border:1px solid var(--br);border-radius:12px;padding:10px 13px;margin-bottom:7px;cursor:pointer}
.mroom-top:active{transform:scale(.99)}
.mroom-top-rk{width:24px;height:24px;border-radius:50%;background:var(--gl);color:var(--gt);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mroom-top-mid{flex:1;min-width:0}
.mroom-top-nm{font-size:13px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;overflow-wrap:break-word;margin-bottom:5px}
.mroom-top-track{height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.mroom-top-fill{height:100%;border-radius:3px}
.mroom-top-v{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;color:var(--t1);flex-shrink:0}
.mroom-top-v small{font-size:9px;color:var(--t3);margin-left:1px}
/* ══ Panel de MACROS del generador (.vmac) — DECISIÓN DEL PO, 2026-07-30 ══
   Es un TABLERO deliberadamente OSCURO en los DOS temas. Nació pintado para fondo oscuro
   (`color:white` sobre tintes al 10%) y dentro de una .card BLANCA era ilegible: el valor de
   Carbos medía 1.04:1 — invisible, no "poco legible". Se le ofreció al PO seguir el tema (como
   ya hacen las barras de macros del asesorado, que miden 4.97-16.12) y eligió CONSERVAR el look
   de tablero horneando su propia superficie.
   ⚠️ POR ESO los colores de aquí NO son tokens y no deben "arreglarse" a tokens: el panel no
   sigue el tema. Consecuencia obligatoria: TODO texto que caiga aquí dentro declara su color en
   este bloque. Un `var(--t1/--t2/--t3)` heredado se rompe en tema claro, que es exactamente el
   defecto que este panel viene a matar. El fondo es el mismo --w del tema oscuro (#152A1E), así
   que en oscuro el panel se ve igual que siempre. */
.vmac{background:#152A1E;border:1px solid #2D4F38;border-radius:14px;padding:12px;margin-bottom:14px}
.vmac-obj{background:linear-gradient(135deg,rgba(45,106,79,.15),rgba(82,183,136,.08));border:1.5px solid rgba(82,183,136,.3);border-radius:12px;padding:13px 14px}
.vmac-obj-t{font-size:12px;font-weight:800;color:#5FE3B0;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.vmac-kcal{font-size:24px;font-weight:900;color:#FFFFFF;margin-bottom:4px}
.vmac-lbl{font-size:12px;color:#10E0A0}
.vmac-obj+.vmac-h{margin-top:12px}
.vmac-h{font-size:11px;font-weight:800;color:#8FAF98;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
/* 🔴 v587 — un `1fr` tiene por mínimo automático el MIN-CONTENT, así que con la letra grande
   las tres tarjetas de macros no cabían y la rejilla se salía **35 px** de la ficha del coach.
   PREEXISTENTE: reproducido igual en HEAD limpio, y solo se ve con la tarjeta DESPLEGADA (la
   medición con la valoración colapsada daba 0 y escondía el defecto). Clase de v453.
   Medido después del arreglo, 6 combinaciones (360 y 390 px × normal/lg/xl): **0 px de
   desborde y las 3 columnas intactas**.
   ⚠️ Aquí basta `minmax(0,1fr)` en la PISTA: se probaron además `min-width:0` en la celda y
   `overflow-wrap:anywhere`, y ninguna de las dos movió una sola cifra — así que no se quedan
   (si no mueve nada, no es un arreglo: es una línea más que mantener, v482). Ojo, esto NO
   contradice a v453: allí hacía falta la segunda mitad porque las celdas eran vacías con
   `aspect-ratio`, y aquí el texto se ajusta solo por sus espacios. */
.vmac-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vmac-c{border-radius:10px;padding:10px;text-align:center}
.vmac-k{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.vmac-n{font-size:20px;font-weight:900;color:#FFFFFF}
.vmac-u{font-size:10px;color:#A9C6B1}
.vmac-c.prot{background:rgba(255,71,87,.14);border:1px solid rgba(255,71,87,.32)}
.vmac-c.prot .vmac-k{color:#FF8A93}
.vmac-c.carb{background:rgba(255,214,10,.14);border:1px solid rgba(255,214,10,.32)}
.vmac-c.carb .vmac-k{color:#FFD60A}
.vmac-c.fat{background:rgba(74,158,255,.14);border:1px solid rgba(74,158,255,.32)}
.vmac-c.fat .vmac-k{color:#8FC4FF}
/* Habitación de RÉCORD/PR */
.pr-row-door{cursor:pointer}
.pr-row-door:active{transform:scale(.99)}
.rr-hero-rec{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:26px;color:var(--ylt);line-height:1.1;margin:2px 0 4px}
.rr-hero-rec small{font-size:14px;color:var(--t2);font-weight:700}
.rr-timeline{position:relative;margin:2px 0 16px;padding-left:2px}
.rr-mile{display:flex;gap:12px;position:relative;padding-bottom:14px}
.rr-mile:not(:last-child)::before{content:'';position:absolute;left:10px;top:22px;bottom:0;width:2px;background:var(--br)}
.rr-mile-dot{width:22px;height:22px;border-radius:50%;background:var(--w);border:1.5px solid var(--br);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--t3);flex-shrink:0;z-index:1}
.rr-mile.cur .rr-mile-dot{background:#e0a72e22;border-color:#e0a72e;font-size:13px}
.rr-mile-body{flex:1;min-width:0;padding-top:1px}
.rr-mile-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rr-mile-val{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;color:var(--t1)}
.rr-mile.cur .rr-mile-val{color:var(--ylt)}
.rr-mile-tag{font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.4px}
.rr-mile.cur .rr-mile-tag{color:var(--ylt)}
.rr-mile-date{font-size:11.5px;color:var(--t2);margin-top:2px}
/* Habitación de RUTINA */
.rtr-sess{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--w);border:1px solid var(--br);border-radius:12px;padding:11px 13px;margin-bottom:7px;cursor:pointer}
.rtr-sess:active{transform:scale(.99)}
.rtr-sess-d{font-size:13px;font-weight:700;color:var(--t1)}
.rtr-sess-r{display:flex;align-items:center;gap:9px}
.rtr-sess-v{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;color:var(--t1)}
.rtr-up{font-size:11px;font-weight:700;color:var(--gt)}
.rtr-dn{font-size:11px;font-weight:700;color:var(--ort)}
.rtr-chev{color:var(--t3);font-size:16px;font-weight:800;line-height:1}
.adv-row-door{cursor:pointer}
.adv-row-door:active{transform:scale(.99)}
/* Habitación de MÚSCULO */
.msc-sub{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.msc-sub-lbl{font-size:12.5px;font-weight:600;color:var(--t2);width:88px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msc-sub-track{flex:1;height:8px;background:var(--bg);border-radius:4px;overflow:hidden}
.msc-sub-fill{height:100%;border-radius:4px}
.msc-sub-val{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:12.5px;color:var(--t1);width:24px;text-align:right}
.msc-ex{display:flex;align-items:center;gap:11px;background:var(--w);border:1px solid var(--br);border-radius:12px;padding:10px 13px;margin-bottom:7px;cursor:pointer}
.msc-ex:active{transform:scale(.99)}
.msc-ex-mid{flex:1;min-width:0}
.msc-ex-nm{font-size:13px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;overflow-wrap:break-word;margin-bottom:5px}
.msc-ex-track{height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.msc-ex-fill{height:100%;border-radius:3px}
.msc-ex-v{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;color:var(--t1);flex-shrink:0;text-align:right}
.msc-ex-v small{display:block;font-size:8.5px;color:var(--t3);font-weight:600}
/* Habitación de NUTRICIÓN */
.nutr-bar{display:flex;height:16px;border-radius:8px;overflow:hidden;margin-bottom:11px;background:var(--bg)}
/* 🔴 CADA SEGMENTO DECLARA SU TINTA, y el relleno vive AQUÍ, no en un `style=` del JS.
   `color:#fff` para los tres daba carbos 1.67/1.59, grasa 3.09/2.19 y proteína 2.23 en oscuro:
   los porcentajes de la barra eran ilegibles justo en la pantalla cuyos números repinta el
   dictamen de macros. Los tokens `--on-*` YA existían para esto (sus propios comentarios traen
   estas mismas cifras) y esta barra nunca se migró — el patrón de siempre: la regla nueva se
   aplicó donde ya había tokens y no donde había un hex escrito a mano.
   Al juntar relleno y tinta en la misma regla, elegir un color sin su tinta deja de ser posible. */
.nutr-seg{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;min-width:0}
.nutr-seg.prot{background:var(--bl);color:var(--on-bl)}
.nutr-seg.carb{background:var(--yl);color:var(--on-yl)}
.nutr-seg.fat{background:var(--or);color:var(--on-or)}
.nutr-acts{display:flex;gap:5px;margin-bottom:16px;flex-wrap:wrap}
.nutr-act{flex:1;min-width:60px;padding:9px 4px;border:1.5px solid var(--br2);border-radius:10px;background:transparent;color:var(--t2);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer}
.nutr-act.on{border-color:var(--gt);background:var(--gl);color:var(--gt)}
.nutr-meal{background:var(--w);border:1px solid var(--br);border-radius:12px;padding:10px 13px;margin-bottom:7px}
.nutr-meal-h{font-size:11px;font-weight:700;color:var(--gt);text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px}
.nutr-meal-t{font-size:13px;color:var(--t1);line-height:1.5}
.nutr-avoid{background:var(--rdl);border-radius:12px;padding:10px 13px;font-size:12.5px;color:var(--rdt);margin-top:8px;line-height:1.5}
.sroom.on .sroom-body>*{animation:roomUp .5s cubic-bezier(.2,.7,.3,1) both}
.sroom.on .sroom-body>*:nth-child(2){animation-delay:.05s}
.sroom.on .sroom-body>*:nth-child(3){animation-delay:.1s}
.sroom.on .sroom-body>*:nth-child(4){animation-delay:.15s}
.sroom.on .sroom-body>*:nth-child(n+5){animation-delay:.2s}
@keyframes roomUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sescard.door{cursor:pointer;transition:transform .12s,box-shadow .12s}
.sescard.door:active{transform:scale(.985)}
.sescard-arrow{font-size:22px;font-weight:700;color:var(--t3);line-height:1;margin-left:2px;flex-shrink:0}
@media (prefers-reduced-motion:reduce){
  .sroom{transition:opacity .2s ease;transform:none}
  .sroom.on .sroom-body>*,.sroom.on .sroom-ring .sr-fg{animation:none;transition:none}
}

/* ═══════════ HABITACIONES · PASE PREMIUM (avi-v224) ═══════════
   Refina las clases .sroom* compartidas → sube las 7 habitaciones de una.
   Marca verde + DORADO, serif display Fraunces, profundidad/glow, vidrio.
   Reglas posteriores = ganan en cascada sobre las originales de arriba.        */
/* El trío `--sr-gold` / `--sr-gold-2` / `--sr-gold-deep` se retiró el 2026-08-08: los dos
   últimos NUNCA tuvieron un solo uso, y el primero solo alimentaba `.sroom-sec`, que ahora va
   por `--sr-sec` (tinta con variante de tema). El dorado VISIBLE de la habitación no venía de
   estos tokens sino de los `rgba(231,198,107,…)` horneados en el héroe, que siguen ahí.
   Un token muerto no es inofensivo: yo mismo estuve a punto de construir sobre `--sr-gold-deep`
   creyendo que estaba en uso. */
:root{ --font-display:'Fraunces',Georgia,'Times New Roman',serif; }

/* Barra superior: pill "Volver" más fina y con peso */
.sroom-back{box-shadow:0 2px 9px rgba(0,0,0,.14);letter-spacing:.1px}
.sroom-bar-t{letter-spacing:.3px}

/* HÉROE: glow esmeralda radial + filo dorado + barrido de luz al abrir */
.sroom-hero{position:relative;overflow:hidden;border:1px solid rgba(231,198,107,.22);
  background:
    radial-gradient(125% 145% at 12% -8%, rgba(19,181,131,.24), transparent 56%),
    radial-gradient(95% 120% at 102% 0%, rgba(231,198,107,.12), transparent 52%),
    linear-gradient(155deg,#114836 0%,#0a2c20 56%,#061f17 100%);
  box-shadow:0 18px 42px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(19,181,131,.06)}
.sroom-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.12) 48%,transparent 60%);
  transform:translateX(-130%)}
.sroom.on .sroom-hero::after{animation:srShine 1.15s ease .38s 1}
@keyframes srShine{to{transform:translateX(130%)}}

/* Títulos y números clave en serif → editorial/lujo */
.sroom-title{font-family:var(--font-display);font-weight:600;font-size:25px;letter-spacing:-.012em}
.sroom-ring-n{font-family:var(--font-display);font-weight:600}
.sroom-ring-n small{font-family:'Plus Jakarta Sans',sans-serif}

/* Anillo: glow esmeralda más rico */
.sroom-ring .sr-fg{filter:drop-shadow(0 0 7px rgba(19,181,131,.62))}

/* TARJETAS STAT: vidrio esmerilado + filo superior degradado con glow */
.sroom-stat{
  background:linear-gradient(168deg, color-mix(in srgb,var(--w) 90%, transparent), color-mix(in srgb,var(--bg) 86%, transparent));
  border:1px solid color-mix(in srgb,var(--sc,var(--g)) 16%, var(--br));
  box-shadow:0 7px 20px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06)}
.sroom-stat::before{height:3px;opacity:1;
  background:linear-gradient(90deg,transparent, var(--sc,var(--g)) 22%, var(--sc,var(--g)) 78%, transparent);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--sc,var(--g)) 60%, transparent))}
.sroom-stat-ic{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc,var(--g)) 28%, transparent), 0 0 13px color-mix(in srgb,var(--sc,var(--g)) 16%, transparent)}
.sroom-stat-v{letter-spacing:-.01em}

/* SECCIONES: acento dorado sutil en el título (sin pseudo-elemento → cero riesgo de layout).
   🔴 La tinta va por TOKEN DE TEMA (`--sr-sec`), no por una mezcla del dorado de la habitación
   oscura: ese dorado se diseñó contra `#0D1F17` y aquí cae sobre `--bg`, que en tema CLARO es
   `#F4F4F0` → medía 1.92:1. Y no es un rótulo decorativo: es «¿POR QUÉ ESTE PLAN?», «TUS
   MACROS», «PLAN» y «EJEMPLOS» — los que dicen qué se está leyendo. Hallazgo de la auditoría
   del 2026-08-06; medido con `_verify-lote-contraste`. */
.sroom-sec{color:var(--sr-sec)}

/* RESUMEN: filo verde-dorado sutil */
.sroom-summary{box-shadow:0 6px 18px rgba(16,224,160,.10), inset 0 1px 0 rgba(255,255,255,.05)}

/* PR / RÉCORD: número serif + glow dorado más cálido */
.sroom-pr{box-shadow:0 7px 20px rgba(154,123,22,.24), inset 0 1px 0 rgba(255,255,255,.55)}
.sroom-pr-n{font-family:var(--font-display);font-weight:700;font-size:14.5px}

@media (prefers-reduced-motion:reduce){ .sroom.on .sroom-hero::after{animation:none} }

/* Exercise blocks client */
.cex-thumb{position:relative;width:50px;height:50px;border-radius:12px;overflow:hidden;flex-shrink:0;border:1px solid var(--br2);background:#000}
.cex-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cex-thumb-badge{position:absolute;left:3px;top:3px;min-width:17px;height:17px;padding:0 4px;border-radius:6px;background:rgba(6,18,11,.78);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.cex-reorder{display:flex;align-items:center;gap:3px;flex-shrink:0}
.cex-reorder button{position:relative;width:26px;height:26px;border-radius:7px;border:1px solid var(--br2);background:var(--bg);color:var(--t1);cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
/* Área táctil ~44px de alto sin agrandar el botón ni descuadrar la fila (letra grande, v261).
   Solo se expande en vertical: el gap entre ↑↓🔄 es horizontal, así no se solapan las zonas. */
.cex-reorder button::after{content:'';position:absolute;inset:-9px 0}
.cex-reorder button:hover:not(:disabled){border-color:var(--g2);color:var(--gt)}
.cex-reorder button:disabled{opacity:.28;cursor:default}

/* Set rows inside block */
.set-log-head{display:grid;grid-template-columns:28px 1fr 1fr 32px;gap:8px;padding:7px 14px 4px;align-items:center}
/* Área táctil efectiva 44px (mínimo recomendado móvil) sin agrandar el círculo visual */

/* ── Sets de calentamiento + Dropsets ── */
/* Deslizar una serie a la derecha → revela "🔻 Dropset" detrás y, al soltar, lo añade */
.setrow-wrap{position:relative;overflow:hidden}
.drop-reveal{position:absolute;inset:0;display:flex;align-items:center;padding-left:18px;gap:6px;font-size:12px;font-weight:800;letter-spacing:.3px;color:#fff;background:linear-gradient(90deg,#2563EB,#1D4ED8);opacity:0;transition:opacity .12s}
.setrow-wrap.revealing .drop-reveal{opacity:1}

.gm-rest-overlay.gm-hold #gm-rest-arc{stroke:#E8973A}
.gm-rest-overlay.gm-hold .gm-rest-sec{color:#E8973A}

/* Profile hero — foto de marca detrás + degradado (izq. sólido para el texto, der. deja ver al atleta) */
.profhero{position:relative;overflow:hidden;background:#0a1712;background-size:cover;background-position:center 20%;border-radius:var(--rlg);padding:20px;color:white;margin-bottom:13px;display:flex;align-items:center;gap:14px}
.profhero::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,64,46,.95) 0%,rgba(6,64,46,.82) 40%,rgba(10,124,91,.30) 100%);z-index:0}
.profhero>*{position:relative;z-index:1}
.profav{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;border:2px solid rgba(255,255,255,.4);flex-shrink:0;position:relative;overflow:visible}
.profav.tap{cursor:pointer}
.profav-img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.profav-cam{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--g);border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1}
.profrm{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.75);cursor:pointer}
.profrm:hover{color:#fff;text-decoration:underline}
.profname{font-size:19px;font-weight:800;margin-bottom:2px}
.profmeta{font-size:12px;opacity:.75}
.profpills{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.profpill{background:rgba(255,255,255,.15);border-radius:20px;padding:3px 9px;font-size:11px;font-weight:600}

/* PR celebration */
@keyframes prPop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes checkDone{0%{transform:scale(1)}35%{transform:scale(.75)}70%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0deg);opacity:1}100%{transform:translateY(60px) rotate(360deg);opacity:0}}
.pr-banner{background:linear-gradient(135deg,#06402E,#13B583);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;color:white;display:flex;align-items:center;gap:12px;animation:prPop .4s ease-out;box-shadow:0 4px 20px rgba(45,106,79,.4)}
.pr-trophy{font-size:28px;flex-shrink:0}
.pr-txt{flex:1;min-width:0}
.pr-title{font-size:13px;font-weight:800;letter-spacing:.3px}
.pr-detail{font-size:12px;opacity:.85;margin-top:2px}
.pr-new{font-size:11px;background:rgba(255,255,255,.2);padding:2px 8px;border-radius:20px;font-weight:700;margin-left:auto;flex-shrink:0;white-space:nowrap}
/* PR list in profile */
.pr-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--br)}
.pr-row:last-child{border-bottom:none}
.pr-ex-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 7px -2px rgba(0,0,0,.14);border:1px solid var(--br)}
.pr-ex-name{font-size:13px;font-weight:600;flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;overflow-wrap:break-word}
.pr-ex-val{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:800;color:var(--gt)}
.pr-ex-date{font-size:10px;color:var(--t3);margin-top:1px;text-align:right}
.collapse-more{display:block;width:100%;margin-top:8px;padding:8px;min-height:36px;background:transparent;border:none;border-top:1px dashed var(--br2);color:var(--gt);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:color .15s}
.collapse-more:hover{color:var(--gt)}
/* Tarjetas de macros tocables → abren la ficha educativa (openNutriInfo).
   🔴 POR QUÉ TIENEN FILO Y RELIEVE (2026-08-08, dictamen de Isabella): el PO reportó la
   habitación de nutrición como «una hoja de bloc». Medido, tenía razón y la causa no era el
   color sino el RANGO TONAL: las diez superficies de esa pantalla caían entre 1,02:1 y 1,10:1
   contra el fondo — nada se despegaba del papel. La habitación de Sesión abre con un bloque de
   13,66:1 contra ese mismo fondo, y por eso se lee como app.
   La corrección va en la clase COMPARTIDA con el Perfil (no en un estilo en línea de una sola
   pantalla): así las dos suben juntas y la cohesión queda por CONSTRUCCIÓN, no por copia — que
   es la razón por la que estas tarjetas se aplanaron en su día.
   El relleno pastel NO se toca: ese relleno es el color que el PO pide.
   `--nc` = acento del dato, lo declara cada tarjeta; si falta, cae al verde de marca. */
.nutri-card{position:relative;overflow:hidden;cursor:pointer;
  border:1px solid color-mix(in srgb, var(--nc,var(--g)) 26%, transparent);
  box-shadow:0 6px 18px -9px rgba(0,0,0,.22),
             inset 0 1px 0 color-mix(in srgb, var(--w) 55%, transparent);
  transition:transform .12s ease,box-shadow .12s ease}
/* `overflow:hidden` es obligatorio o el filo de 3px se sale del radio. */
.nutri-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--nc,var(--g)) 22%,var(--nc,var(--g)) 78%,transparent)}
/* El hover SUMA a la sombra base en vez de reemplazarla; si no, parece encogerse al tocar. */
.nutri-card:hover{box-shadow:0 9px 24px -9px rgba(0,0,0,.28),
             inset 0 1px 0 color-mix(in srgb, var(--w) 55%, transparent)}
.nutri-card:active{transform:scale(.97)}
/* Círculo de ícono — SOLO la fila titular de la habitación (el Perfil no lo lleva: sus tarjetas
   son la mitad de altas y el círculo las desbalancea). */
.nutri-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin:1px auto 6px;
  background:color-mix(in srgb, var(--nc,var(--g)) 16%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nc,var(--g)) 30%, transparent)}
.nutri-ic .avic{color:var(--nc,var(--g))}
/* 🔴 `--t2` sin `opacity`: la ⓘ es una AFORDANCIA (abre la ficha educativa) y medía 3,06-3,29
   en claro sobre los cuatro tintes, por debajo del mínimo. Con --t2 sube a 4,97-5,56 sin costo
   visual. Defecto anterior, en 8 tarjetas de DOS pantallas. Y `opacity` no es forma de apagar
   texto — eso ya está escrito en los gotchas. */
.nutri-i{position:absolute;top:5px;right:6px;font-size:11px;color:var(--t2);line-height:1}
.nutri-sec{margin-bottom:14px}
.nutri-h{font-size:12px;font-weight:800;color:var(--gt);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.nutri-p{font-size:13.5px;color:var(--t1);line-height:1.6}
/* La ficha: cuerpo scrolleable y botón "Entendido" siempre visible abajo */
#m-nutri-info .md{display:flex;flex-direction:column}
#m-nutri-body{overflow-y:auto;min-height:0;flex:1 1 auto}
#m-nutri-info .mdfooter{flex-shrink:0;margin-top:14px}
/* Weight log */
.wlog-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--br)}
.wlog-row:last-child{border-bottom:none}
.wlog-date{font-size:12px;color:var(--t2);flex:1}
.wlog-kg{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:800;color:var(--t1)}
.wlog-delta{font-size:11px;font-weight:700;padding:1px 6px;border-radius:10px}
.wlog-add{display:flex;gap:8px;padding:10px 0 4px}

.exinfo-btn{background:none;border:1.5px solid var(--br2);border-radius:50%;width:36px;height:36px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;line-height:1;transition:border-color .15s,background .15s}
.exinfo-btn:hover{background:var(--g);border-color:var(--g);color:white}
/* ── Exercise Detail Bottom Sheet ── */
.exdetail-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900;display:none;align-items:flex-end;backdrop-filter:blur(3px)}
.exdetail-bg.on{display:flex}
.exdetail-sheet{background:var(--w);border-radius:22px 22px 0 0;width:100%;max-height:88vh;overflow-y:auto;padding:0 0 32px;animation:sheetUp .3s cubic-bezier(.4,0,.2,1)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.exdetail-handle{width:36px;height:4px;background:var(--br2);border-radius:2px;margin:12px auto 0}
.exdetail-hero{display:flex;align-items:center;gap:14px;padding:18px 20px 14px}
.exdetail-bigicon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0}
.exdetail-title{font-size:18px;font-weight:800;color:var(--t1);line-height:1.2;margin-bottom:4px}
.exdetail-muscle{font-size:12px;font-weight:600;color:var(--g2);background:var(--gl);padding:3px 10px;border-radius:20px;display:inline-block}
.exdetail-divider{height:1px;background:var(--br);margin:0 20px}
.exdetail-section{padding:16px 20px 0}
.exdetail-slabel{font-family:'Anton',sans-serif;font-size:11px;font-weight:400;letter-spacing:1.2px;text-transform:uppercase;color:#F2C94C;margin-bottom:8px}
.exdetail-desc{font-size:14px;color:var(--t1);line-height:1.7;background:var(--bg);border:1px solid var(--br);border-radius:var(--r);padding:13px 15px}
.exdetail-coachtip{background:var(--gl);border:1px solid var(--br);border-left:3px solid var(--g);border-radius:var(--r);padding:12px 15px 13px}
/* Glosario tap-to-explain: términos técnicos resaltados que abren una explicación simple */
.gloss-term{color:var(--gt);border-bottom:1px dashed var(--g2);cursor:pointer;font-weight:600}
.gloss-term .gloss-i{font-size:.68em;vertical-align:super;opacity:.85;margin-left:1px}
.gloss-pop{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(2,10,7,.55);backdrop-filter:blur(2px);padding:24px}
.gloss-pop.on{display:flex}
.gloss-card{background:var(--w);border:1px solid var(--br);border-left:3px solid var(--g);border-radius:16px;padding:18px 18px 16px;max-width:340px;box-shadow:0 12px 40px rgba(0,0,0,.4);animation:tooltipPop .25s cubic-bezier(.4,0,.2,1)}
.gloss-card-t{font-family:'Anton',sans-serif;font-size:15px;letter-spacing:.4px;color:var(--gt);margin-bottom:7px}
.gloss-card-b{font-size:14px;line-height:1.6;color:var(--t1)}
.gloss-card-x{margin-top:14px;width:100%;padding:10px;background:var(--g);color:#fff;border:none;border-radius:10px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer}
.ctip-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ctip-av{width:24px;height:24px;border-radius:50%;background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ctip-av .ic{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2}
.ctip-role{font-family:'Anton',sans-serif;font-size:11px;font-weight:400;letter-spacing:1.2px;text-transform:uppercase;color:var(--gt)}
.ctip-text{font-size:13.5px;line-height:1.6;color:var(--t1)}
.exdetail-ytbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px;background:var(--g);color:white;border:none;border-radius:var(--r);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s;margin-top:14px}
.exdetail-ytbtn:hover{background:var(--g2)}
.exdetail-ytbtn .yticon{font-size:18px}
.exdetail-stats{display:flex;gap:8px;margin-bottom:4px}
.exdetail-stat{flex:1;background:var(--bg);border-radius:var(--rsm);padding:10px 12px;text-align:center;border:1px solid var(--br)}
.exdetail-stat-val{font-size:17px;font-weight:800;color:var(--gt);font-family:'JetBrains Mono',monospace}
.exdetail-stat-lbl{font-size:10px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
/* Detalle Aurora: hero de foto grande cuando el ejercicio tiene foto (fallback al ícono si no) */
.exdetail-hero.has-photo{display:block;gap:0;padding:0;position:relative}
.exdetail-hero.has-photo .exdetail-bigicon{width:100%;height:auto;aspect-ratio:16/11;border-radius:0!important;border:none!important;background:#000!important;overflow:hidden}
.exdetail-hero.has-photo .exdetail-bigicon img{width:100%;height:100%;object-fit:cover;border-radius:0;cursor:zoom-in}
.exdetail-hero.has-photo .exdetail-bigicon .exicon-vid{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.exdetail-hero.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,10,7,.92),rgba(2,10,7,.32) 45%,transparent 72%);pointer-events:none}
.exdetail-hero.has-photo .exdetail-herocap{position:absolute;left:18px;right:18px;bottom:13px;z-index:2}
.exdetail-hero.has-photo .exdetail-title{font-size:22px;color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.85)}
/* Loading overlay */
#avi-loading{position:fixed;inset:0;background:linear-gradient(180deg,rgba(6,9,10,.34) 0%,rgba(6,9,10,.08) 32%,rgba(6,9,10,.10) 55%,rgba(6,9,10,.72) 86%,rgba(6,9,10,.96) 100%),url('media/loading-bg.jpg') center/cover no-repeat #06090A;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:9vh;z-index:9999;transition:opacity .4s}
#avi-loading.fade{opacity:0;pointer-events:none}
.ld-logo{font-size:32px;font-weight:800;color:white;margin-bottom:8px}
.ld-sub{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:28px}
.ld-bar{width:180px;height:3px;background:rgba(255,255,255,.2);border-radius:10px;overflow:hidden}
.ld-fill{height:100%;background:white;border-radius:10px;width:0%;transition:width .3s ease}
.ld-msg{font-size:11px;color:rgba(255,255,255,.5);margin-top:10px;height:16px;transition:opacity .2s}
.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--g);display:inline-block;margin-left:6px;vertical-align:middle;opacity:0;transition:opacity .3s}
.sync-dot.on{opacity:1;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Volume chart */
.vchart{width:100%;overflow:hidden;border-radius:var(--rsm)}
.vchart-wrap{background:var(--w);border:1px solid var(--br);border-radius:var(--r);padding:14px 16px;margin-bottom:13px;box-shadow:var(--sh)}
.vchart-title{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}

/* ── ONBOARDING (full-bleed inmersivo) ── */
#onboarding{position:fixed;inset:0;z-index:800;background:#04080A;transition:opacity .4s;overflow:hidden}
#onboarding.fade-out{opacity:0;pointer-events:none}
#cn-help-btn{animation:helpPulse 1.5s ease 3}
@keyframes helpPulse{0%,100%{box-shadow:0 0 0 0 rgba(45,106,79,0)}50%{box-shadow:0 0 0 6px rgba(45,106,79,.20)}}
.ob-slides{position:absolute;inset:0;overflow:hidden}
.ob-track{display:flex;height:100%;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ob-slide{position:relative;min-width:100%;height:100%;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
/* Foto de marca a pantalla completa (cover) detrás del texto */
.ob-photo{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#04080A}
.ob-photo.has-img{background-image:var(--img)}
.ob-photo.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,10,.28) 0%,rgba(4,8,10,0) 30%,rgba(4,8,10,.45) 58%,rgba(4,8,10,.93) 100%)}
.ob-ic{display:none}
/* Texto sobre la foto, anclado abajo, dejando aire para dots + botones */
.ob-copy{position:relative;z-index:2;padding:0 28px 224px;text-align:left}
.ob-eyebrow{font-family:'Anton',sans-serif;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:#10E0A0;margin-bottom:10px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.ob-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:30px;font-weight:800;margin-bottom:12px;line-height:1.12;letter-spacing:-.5px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.ob-body{font-size:15px;line-height:1.65;color:rgba(242,245,244,.86);max-width:none;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.ob-body strong{color:#10E0A0;font-weight:700}
.ob-dots{position:absolute;left:0;right:0;bottom:150px;z-index:3;display:flex;justify-content:center;gap:8px;margin:0}
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);transition:width var(--dur) var(--ease-out),border-radius var(--dur) var(--ease-out),background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.ob-dot.on{width:24px;border-radius:4px;background:#10E0A0;box-shadow:0 0 12px rgba(16,224,160,.6)}
.ob-btns{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;gap:8px;padding:0 24px calc(26px + env(safe-area-inset-bottom));max-width:none}
.ob-next{width:100%;padding:16px;background:linear-gradient(135deg,#22F0AE,#068F66);color:#04130D;border:none;border-radius:15px;font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;transition:transform .1s;box-shadow:0 12px 34px rgba(16,224,160,.34),inset 0 1px 0 rgba(255,255,255,.4)}
.ob-next:active{transform:scale(.98)}
.ob-skip{background:none;border:none;color:rgba(242,245,244,.65);font-family:inherit;font-size:13px;cursor:pointer;padding:8px;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* ── FIN DE ENTRENAMIENTO (celebración full-bleed — pico emocional del día) ── */
#workout-finish{position:fixed;inset:0;z-index:900;display:none;background:#04080A;overflow:hidden}
#workout-finish.on{display:block;animation:wfFade .4s ease}
@keyframes wfFade{from{opacity:0}to{opacity:1}}
/* v605 — EL MISMO TRATAMIENTO QUE EL LIENZO COMPARTIBLE, o las dos se vuelven a separar (que es
   justo lo que el PO reportó de v603). Desde v605 el fondo es LA FOTO DE PERFIL de cada persona,
   así que llega de donde llegue —una selfie con luz amarilla, un espejo de gimnasio—: se
   desatura, se desenfoca y el degradado la tiñe del verde de AVI. Así cualquier foto entra en la
   paleta y ninguna compite con el texto. El `scale` compensa el borde que deja el desenfoque. */
.wf-photo{position:absolute;inset:0;background-size:cover;background-position:center top;background-color:#04080A}
.wf-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,10,.55) 0%,rgba(4,8,10,.55) 26%,rgba(4,8,10,.72) 56%,rgba(4,8,10,.97) 100%)}
/* 🔒 El tratamiento va por ID, SOLO al cierre de entreno: `.wf-photo` la comparten el aviso de
   upsell (#pu-photo) y la subida de nivel (#lu-photo), que llevan fotos de marca elegidas para
   verse NÍTIDAS y que nadie pidió cambiar. Acotar aquí es la diferencia entre arreglar una
   pantalla y tocar tres. */
#wf-photo{background-position:center;filter:grayscale(.88) blur(14px) brightness(.92);transform:scale(1.12)}
#wf-photo::after{background:linear-gradient(180deg,rgba(6,26,19,.58) 0%,rgba(6,26,19,.58) 26%,rgba(5,20,15,.74) 56%,rgba(4,9,6,.97) 100%)}
/* F13: con `justify-content:flex-end` el desbordamiento se va por ARRIBA, y ahí el scroll no
   llega (scrollTop no puede ser negativo): a 360x640 con las 3 tarjetas apiladas, el trofeo y
   «¡Lo lograste!» quedaban fuera de alcance (medido: maxScroll 0). Con `margin-top:auto` en el
   primer hijo se conserva el mismo aspecto cuando SOBRA espacio (el bloque se pega abajo) y el
   margen se colapsa a 0 cuando FALTA, así el contenido desborda hacia abajo y sí se puede leer. */
.wf-inner{position:absolute;inset:0;z-index:2;padding:60px 26px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;color:#fff;overflow-y:auto;overscroll-behavior:contain}
.wf-inner>.wf-trophy{margin-top:auto}
.wf-trophy{font-size:46px;margin-bottom:8px;filter:drop-shadow(0 6px 20px rgba(16,224,160,.5));animation:wfPop .5s cubic-bezier(.3,1.4,.5,1) both}
/* v597 — con foto, la misma ranura del trofeo lleva el retrato. `font-size:0` mata el hueco del
   emoji que ya no está (si no, el círculo arrastra 46px de línea vacía debajo) y el retrato hereda
   el `wfPop` y el resplandor del trofeo, así que entra igual de celebrado. El tamaño va en px y no
   en em a propósito: es una imagen, no texto, y con la letra en «Muy grande» no debe crecer y
   empujar el titular fuera (el defecto de v452). */
.wf-trophy.wf-crest-photo{font-size:0;line-height:0;margin-bottom:12px}
.wf-crest-img{width:84px;height:84px;border-radius:50%;object-fit:cover;display:block;border:3px solid #10E0A0;background:#0A2118}
@keyframes wfPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.wf-eyebrow{font-family:'Anton',sans-serif;font-size:13px;letter-spacing:2.6px;text-transform:uppercase;color:#10E0A0;margin-bottom:6px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.wf-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.5px;margin-bottom:6px;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.wf-sub{font-size:14px;color:rgba(242,245,244,.82);margin-bottom:18px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.wf-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:420px;margin-bottom:14px}
.wf-stat{background:rgba(4,8,10,.58);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px 8px;backdrop-filter:blur(6px)}
.wf-stat-val{font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:800;color:#10E0A0;line-height:1}
.wf-stat-lbl{font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:rgba(242,245,244,.7);margin-top:5px}
.wf-prs{width:100%;max-width:420px;margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.wf-pr{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(4,8,10,.62),rgba(4,8,10,.52));border:1px solid rgba(16,224,160,.35);border-radius:12px;padding:8px 11px;text-align:left}
.wf-pr-ico{font-size:17px;flex-shrink:0;color:#10E0A0;display:flex}
.wf-pr-name{font-size:12.5px;font-weight:800;line-height:1.15}
.wf-pr-det{font-size:11px;color:rgba(242,245,244,.92)}
.wf-feeling{width:100%;max-width:420px;margin-bottom:16px}
.wf-feeling-q{font-size:13px;font-weight:700;color:rgba(242,245,244,.92);margin-bottom:10px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.wf-faces{display:flex;justify-content:center;gap:8px}
.wf-face{flex:1;max-width:62px;font-size:25px;line-height:1;background:rgba(4,8,10,.5);border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:9px 0;cursor:pointer;opacity:.5;transition:opacity var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);-webkit-tap-highlight-color:transparent}
.wf-face.sel{opacity:1;background:rgba(16,224,160,.18);border-color:rgba(16,224,160,.6);transform:translateY(-3px) scale(1.06)}
.wf-feeling-lbl{font-size:11.5px;color:#10E0A0;font-weight:700;min-height:15px;margin-top:8px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
/* v325 (adopción push, palanca #1): ofrecer activar notificaciones al TERMINAR el entreno
   — momento de máximo compromiso. Tarjeta frost sobre la foto oscura del cierre. */
.wf-push{width:100%;max-width:420px;margin:0 0 12px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:13px 14px;text-align:left;display:flex;flex-direction:column;gap:9px;backdrop-filter:blur(6px)}
.wf-push-txt{font-size:12.5px;line-height:1.35;color:rgba(242,245,244,.9)}
.wf-push-txt b{display:block;font-size:13.5px;font-weight:800;color:#fff;margin-bottom:2px}
.wf-push-btns{display:flex;gap:8px}
.wf-push-btns button{flex:1;min-height:38px;padding:9px;border-radius:10px;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;border:0}
.wf-push-on{background:linear-gradient(135deg,#22F0AE,#068F66);color:#04130D}
.wf-push-later{background:rgba(255,255,255,.12);color:rgba(242,245,244,.85);border:1px solid rgba(255,255,255,.2)!important}
/* Compartir el entreno en el MURO de comunidad (v3-a #2+#3) — sobre el fondo oscuro de la pantalla de fin */
.wf-cshare{width:100%;max-width:420px;margin:0 0 12px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:13px 14px;text-align:left;display:flex;flex-direction:column;gap:9px;backdrop-filter:blur(6px)}
.wf-cshare-h{font-size:13.5px;font-weight:800;color:#fff}
.wf-cshare-sum{font-size:12.5px;color:rgba(242,245,244,.85);line-height:1.35}
.wf-cshare-note{width:100%;box-sizing:border-box;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:9px 11px;color:#fff;font-family:inherit;font-size:13px;line-height:1.4;resize:none}
.wf-cshare-note::placeholder{color:rgba(242,245,244,.5)}
.wf-cshare-count{font-size:11px;color:rgba(242,245,244,.6);text-align:right;margin-top:-4px}
.wf-cshare-btn{width:100%;min-height:42px;background:linear-gradient(135deg,#22F0AE,#068F66);color:#04130D;border:0;border-radius:11px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:transform .1s}
.wf-cshare-btn:active{transform:scale(.98)} .wf-cshare-btn:disabled{opacity:.6;cursor:default}
.wf-cshare-done{flex-direction:row;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:#22F0AE}
.wf-cshare-done svg{stroke:#22F0AE;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}
.wf-btn{width:100%;max-width:420px;padding:16px;background:linear-gradient(135deg,#22F0AE,#068F66);color:#04130D;border:none;border-radius:15px;font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;transition:transform .1s;box-shadow:0 12px 34px rgba(16,224,160,.34),inset 0 1px 0 rgba(255,255,255,.4)}
.wf-btn:active{transform:scale(.985)}
/* v313 (estudio, mejora 2): compartir — secundario sobre la foto, no compite con Continuar */
.wf-btn.wf-share{background:rgba(4,8,10,.58);color:#EAFBF4;border:1.5px solid rgba(16,224,160,.55);box-shadow:none;margin-bottom:10px;backdrop-filter:blur(6px)}
/* v314 (estudio, mejora 3): anclas de salto en Progreso — pegajosas al hacer scroll */
.prog-anchors{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;position:sticky;top:0;z-index:5;background:var(--bg)}
.prog-anchors button{flex-shrink:0;min-height:36px;font-family:inherit;font-size:12px;font-weight:700;color:var(--gt);background:var(--gl);border:1px solid var(--g2);border-radius:99px;padding:7px 14px;cursor:pointer}
.prog-anchors button:active{transform:scale(.97)}
/* v314 (estudio, mejora 5): micro-celebración al marcar una serie. CANDADO: el selector
   lleva .checked porque .gm-check.checked (más abajo) trae animation:checkDone y con igual
   especificidad ganaría por orden — el pop solo existe los 450ms de la marca (clase _gmPop). */
@keyframes gmPop{0%{transform:scale(1)}45%{transform:scale(1.32);box-shadow:0 0 0 7px rgba(16,224,160,.22)}100%{transform:scale(1)}}
.gm-check.checked.gm-pop{animation:gmPop .45s cubic-bezier(.2,.8,.3,1.2)}
@media (prefers-reduced-motion:reduce){.gm-check.checked.gm-pop{animation:none}}
/* ── MOMENTOS FULL-BLEED: upsell Premium + subida de nivel (reusan el molde .wf-*) ── */
#premium-upsell,#level-up{position:fixed;inset:0;z-index:905;display:none;background:#04080A;overflow:hidden}
#premium-upsell.on,#level-up.on{display:block;animation:wfFade .4s ease}
.wf-eyebrow.gold{color:#F2C94C}
.pu-bens{width:100%;max-width:420px;display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.pu-ben{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:13px;padding:10px 13px;text-align:left;backdrop-filter:blur(6px)}
.pu-ben-ico{font-size:19px;flex-shrink:0}
.pu-ben-tx{font-size:12.5px;font-weight:600;line-height:1.35;color:rgba(242,245,244,.94)}
.pu-ben-tx b{color:#10E0A0}
.pu-sentbox{width:100%;max-width:420px;background:linear-gradient(135deg,rgba(16,224,160,.22),rgba(16,224,160,.08));border:1px solid rgba(16,224,160,.4);border-radius:15px;padding:16px;font-size:13.5px;line-height:1.55;margin-bottom:18px;backdrop-filter:blur(6px);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.pu-skip{background:none;border:none;color:rgba(242,245,244,.6);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:12px;width:100%;max-width:420px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.lu-ring{width:118px;height:118px;border-radius:50%;border:3px solid rgba(16,224,160,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 16px;background:rgba(4,19,13,.55);backdrop-filter:blur(8px);box-shadow:0 0 44px rgba(16,224,160,.45),inset 0 0 22px rgba(16,224,160,.18);animation:wfPop .55s cubic-bezier(.3,1.4,.5,1) both}
.lu-num{font-family:'Anton',sans-serif;font-size:52px;line-height:1;color:#10E0A0;text-shadow:0 0 18px rgba(16,224,160,.7)}
.lu-lbl{font-size:9.5px;letter-spacing:2.2px;color:rgba(242,245,244,.75);margin-top:2px}
/* First-exercise tooltip */
.ex-tooltip{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#06402E,#0A7C5B);color:white;border-radius:var(--r);padding:11px 14px;margin-bottom:10px;font-size:13px;line-height:1.5;box-shadow:0 4px 16px rgba(45,106,79,.35);animation:tooltipPop .4s cubic-bezier(.4,0,.2,1)}
.ex-tooltip-icon{font-size:22px;flex-shrink:0}
.ex-tooltip-close{margin-left:auto;background:rgba(255,255,255,.2);border:none;border-radius:50%;width:34px;height:34px;color:white;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
@keyframes tooltipPop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ── CALENTAMIENTO ── */
.wu-card{background:var(--w);border:1.5px solid var(--br);border-radius:var(--r);overflow:hidden}
.wu-header{display:flex;justify-content:space-between;align-items:flex-start;padding:13px 14px 10px;cursor:pointer;user-select:none}
.wu-title{font-size:14px;font-weight:800;color:var(--t1);margin-bottom:5px}
.wu-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;border:1.5px solid var(--or);background:var(--orl);color:var(--ort);transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.wu-prog-txt{font-size:13px;font-weight:700;color:var(--t2);font-family:'JetBrains Mono',monospace;min-width:36px;text-align:right}
.wu-chev{font-size:12px;color:var(--t3);transition:transform .25s;margin-top:2px}
.wu-prog-bar{height:3px;background:var(--br);margin:0 14px 0}
.wu-prog-fill{height:100%;background:var(--g);border-radius:2px;width:0%;transition:width .3s}
.wu-body{display:none;padding:12px 14px 14px}
.wu-body.open{display:block}
/* Vista previa del calentamiento en la ficha del coach (renderDetailRoutines). Su cuerpo llevaba
   `display:none` EN LÍNEA y el toggle solo añade la clase `.open`: el estilo inline gana siempre,
   así que el coach hacía clic, la flecha giraba y NO se abría nada. Mismo patrón que .wu-body. */
.wup-body{display:none;padding:10px 12px}
.wup-body.open{display:block}
.wu-section-title{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.wu-ex-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--br);cursor:pointer;transition:opacity .2s}
.wu-ex-row:last-of-type{border-bottom:none}
.wu-ex-icon{font-size:20px;width:32px;text-align:center;flex-shrink:0}
.wu-ex-info{flex:1}
.wu-ex-name{font-size:13px;font-weight:700;color:var(--t1)}
.wu-ex-reps{font-size:11px;color:var(--t3);margin-top:1px}
/* Aviso «ojo con su zona» del calentamiento (v642): mismo lenguaje visual que el chip del editor
   del coach — naranja y no rojo, porque rojo significa roto/bloqueado y esto no lo está: se puede
   hacer igual, es la persona la que decide. Tinta `--ort` (la variante legible), nunca el token
   crudo como letra ni `opacity` sobre el texto. */
.wu-ex-warn{font-size:10.5px;font-weight:700;color:var(--ort);margin-top:2px;line-height:1.3}
.wu-warn-head{font-size:11px;font-weight:700;color:var(--ort);margin-top:4px;line-height:1.3}
.wu-check-btn{width:36px;height:36px;border-radius:50%;border:2px solid var(--br2);background:transparent;cursor:pointer;font-size:14px;font-weight:800;color:white;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);padding:0}
.wu-note{font-size:12px;color:var(--t3);background:var(--bg);border-radius:var(--rsm);padding:9px 12px;margin-bottom:10px;line-height:1.6}
.wu-apx-card{background:var(--bg);border:1px solid var(--br);border-radius:var(--rsm);padding:11px 13px;margin-bottom:8px}
.wu-apx-header{font-size:13px;font-weight:800;color:var(--t1);margin-bottom:8px}
.wu-apx-set{display:flex;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid var(--br)}
.wu-apx-set:last-child{border-bottom:none}
.wu-apx-pct{font-size:15px;font-weight:800;color:var(--gt);font-family:'JetBrains Mono',monospace;min-width:38px}
.wu-apx-info{font-size:12px;color:var(--t2)}

/* ── MODO GUIADO ── */
#guided-mode{position:fixed;inset:0;z-index:700;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
#guided-mode.hidden{display:none}
/* Guiado EMBEBIDO como pantalla de "Hoy" (unificación F2): fluye dentro de #cn-today-body,
   sin position:fixed, sin ✕, sin scroll interno propio (scrollea el tab). El rest-overlay hijo
   sigue position:fixed (modal a pantalla completa durante el descanso). */
#guided-mode.gm-embedded{position:static;inset:auto;z-index:auto;overflow:visible;background:transparent;display:block}
#guided-mode.gm-embedded .gm-topbar{padding:0 0 12px;border-bottom:none}
#guided-mode.gm-embedded .gm-close{display:none}
#guided-mode.gm-embedded .gm-body{overflow:visible;flex:none;padding:0;zoom:1}
#guided-mode.gm-embedded .gm-footer{position:static;border-top:none;background:transparent;padding:14px 0 4px}
.gm-topbar{display:flex;align-items:center;gap:12px;padding:14px 16px 10px;border-bottom:1px solid var(--br);flex-shrink:0}
.gm-close{width:36px;height:36px;border-radius:10px;background:var(--surface,var(--bg));border:1.5px solid var(--br2);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;flex-shrink:0;color:var(--t2)}
.gm-progress-wrap{flex:1}
.gm-progress-label{font-size:11px;color:var(--t3);font-weight:600;margin-bottom:4px;display:flex;justify-content:space-between}
.gm-progress-bar{height:6px;background:var(--br);border-radius:3px;overflow:hidden}
.gm-progress-fill{height:100%;background:linear-gradient(90deg,var(--g),var(--g2));border-radius:3px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.gm-body{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:14px}
.gm-ex-card{background:var(--w);border:2px solid var(--br);border-radius:18px;padding:18px;transition:border-color .3s}
.gm-ex-card.active{border-color:var(--g2);box-shadow:0 0 0 4px rgba(82,183,136,.1)}
.gm-ex-card.done{border-color:var(--g2);opacity:.6}
.gm-ex-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.gm-ex-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
/* Nombre con ancho mínimo legible (no se encoge hasta desaparecer) → cuando la letra está grande
   el grupo de herramientas se va a una 2ª línea en vez de salirse de la pantalla. Camilo 2026-07-03. */
.gm-ex-nm{flex:1 1 140px;min-width:120px}
.gm-ex-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.gm-ex-name{font-size:17px;font-weight:800;color:var(--t1);line-height:1.2}
.gm-ex-meta{font-size:12px;color:var(--t3);margin-top:3px}
.gm-sets{display:flex;flex-direction:column;gap:8px}
.gm-set-row{display:grid;grid-template-columns:32px 1fr 1fr auto;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--bg);border:1.5px solid var(--br);transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out)}
.gm-set-row.active-set{border-color:var(--g2);background:rgba(82,183,136,.06)}
.gm-set-row.set-done{background:var(--gl);border-color:var(--g2);opacity:.7}
.gm-set-num{width:28px;height:28px;border-radius:50%;background:var(--br);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--t3);transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.gm-set-row.active-set .gm-set-num{background:var(--g);color:white}
.gm-set-row.set-done .gm-set-num{background:var(--g);color:white}
.gm-sinput{background:var(--w);border:1.5px solid var(--br2);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:16px;font-weight:700;color:var(--t1);text-align:center;width:100%;-moz-appearance:textfield}
.gm-sinput::-webkit-outer-spin-button,.gm-sinput::-webkit-inner-spin-button{-webkit-appearance:none}
.gm-sinput:focus{outline:none;border-color:var(--g2)}
.gm-sinput[readonly]{background:transparent;border-color:transparent;color:var(--t2)}
.gm-sinput-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);text-align:center;margin-top:2px}
.gm-check{position:relative;width:38px;height:38px;border-radius:10px;border:2px solid var(--br2);background:transparent;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out);flex-shrink:0}
/* Área táctil 44px efectiva sin agrandar el cuadro visual (mín. móvil recomendado). */
.gm-check::after{content:'';position:absolute;inset:-3px;border-radius:12px}
.gm-check:hover{border-color:var(--g2)}
.gm-check.checked{background:var(--g);border-color:var(--g);color:white;animation:checkDone .3s cubic-bezier(.4,0,.2,1)}
/* Filas auxiliares del guiado: calentamiento (ámbar) + dropset (azul) */
.gm-set-row.gm-warm .gm-set-num.warm{background:rgba(232,151,58,.16);color:var(--ylt);font-size:15px}
.gm-set-row.gm-warm.set-done{background:rgba(232,151,58,.08);border-color:#E8973A55}
.gm-check.warm:hover{border-color:#E8973A}
.gm-check.warm.checked{background:#E8973A;border-color:#E8973A;color:var(--on-or)}
.gm-set-row.gm-drop .gm-set-num.drop{background:rgba(59,130,246,.16);color:var(--blt);font-size:15px}
.gm-set-row.gm-drop.set-done{background:rgba(59,130,246,.08);border-color:#3B82F655}
.gm-check.drop:hover{border-color:#3B82F6}
.gm-check.drop.checked{background:#2563EB;border-color:#2563EB;color:white}
/* Guiado: deslizar la serie → dropset (igual que la clásica). La fila debe quedar OPACA y
   por encima del reveal azul (que va detrás), revelándose solo al arrastrar. */
.setrow-wrap .gm-set-row{position:relative;touch-action:pan-y;will-change:transform;background:var(--bg)}
.setrow-wrap .gm-set-row.active-set{background:linear-gradient(0deg,rgba(82,183,136,.06),rgba(82,183,136,.06)),var(--bg)}
.setrow-wrap .gm-set-row.set-done{background:var(--gl)}
/* Rest overlay inside guided */
.gm-rest-overlay{position:fixed;inset:0;background:rgba(13,31,23,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:750;gap:8px}
.gm-rest-overlay.hidden{display:none}
.gm-go-flash{position:fixed;inset:0;background:var(--g);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:760;pointer-events:none;animation:goFlash .9s ease-out forwards}
@keyframes goFlash{0%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.04)}}
@keyframes aviTick{0%{transform:scale(1.14);opacity:.6}100%{transform:scale(1);opacity:1}}
.gm-rest-circle{width:160px;height:160px;position:relative;margin:8px 0}
.gm-rest-svg{transform:rotate(-90deg)}
.gm-rest-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gm-rest-sec{font-size:52px;font-weight:900;color:white;font-family:'JetBrains Mono',monospace;line-height:1}
.gm-rest-lbl{font-size:12px;color:var(--accent3,#5FE3B0);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.gm-rest-title{font-size:16px;font-weight:800;color:white;text-align:center}
.gm-rest-next{font-size:13px;color:var(--accent3,#5FE3B0);text-align:center;max-width:240px;line-height:1.5}
/* Respiración: recordatorio en el descanso + tarjeta al iniciar cada ejercicio */
.gm-rest-breath{font-size:13px;color:#fff;background:rgba(82,183,136,.16);border:1px solid rgba(82,183,136,.38);border-radius:12px;padding:9px 14px;max-width:290px;text-align:center;line-height:1.45;margin-top:6px}
.gm-start-card{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;padding:26px;background:rgba(6,9,10,.80);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
.gm-start-card.on{opacity:1}
.gsc-card{background:var(--w);border:1px solid var(--br);border-top:4px solid var(--g);border-radius:18px;padding:22px 20px 18px;max-width:360px;box-shadow:0 18px 50px rgba(0,0,0,.5);transform:translateY(12px);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.gm-start-card.on .gsc-card{transform:translateY(0)}
.gsc-ex{font-family:'Anton',sans-serif;font-size:20px;color:var(--t1);letter-spacing:.4px;margin-bottom:12px}
.gsc-h{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--gt);margin-bottom:7px}
.gsc-b{font-size:14.5px;line-height:1.62;color:var(--t1)}
.gsc-btn{margin-top:18px;width:100%;padding:13px;background:var(--g);color:#fff;border:none;border-radius:12px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer}
.gm-rest-ctl{display:flex;gap:10px;margin-top:14px}
.gm-rest-ctl-btn{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.24);border-radius:12px;padding:11px 20px;min-height:46px;color:white;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}
.gm-rest-ctl-btn:hover{background:rgba(255,255,255,.24)}
.gm-rest-overlay.gm-hold #gm-rest-pause,.gm-rest-overlay.gm-hold #gm-rest-add15{display:none}
.gm-rest-overlay.gm-rest-paused .gm-rest-sec{opacity:.5}
.gm-rest-skip{margin-top:12px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);border-radius:12px;padding:11px 28px;color:white;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}
.gm-rest-skip:hover{background:rgba(255,255,255,.18)}
/* Bottom action bar */
.gm-footer{padding:16px 18px;border-top:1px solid var(--br);flex-shrink:0;background:var(--bg)}
.gm-start-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--g),var(--g2));color:white;border:none;border-radius:14px;font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;transition:opacity .15s,transform .12s;letter-spacing:.3px}
.gm-start-btn:active{opacity:.85;transform:scale(.97)}
.gm-start-btn:disabled{background:var(--br2);cursor:not-allowed;opacity:.6}

/* No routine */
.noroutine{background:var(--gl);border:1.5px solid var(--g2);border-radius:var(--r);padding:18px;text-align:center;margin-bottom:12px}
/* ✅ "Ya entrenaste hoy" (v366) — colapsa el entrenamiento del día cuando ya entrenó */
.trained-card{background:var(--w);border:1px solid var(--br2);border-radius:var(--rlg);padding:22px 18px;text-align:center;box-shadow:var(--sh)}
.trained-card .tc-ic{width:56px;height:56px;border-radius:50%;background:var(--gl);color:var(--g);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.trained-card .tc-title{font-size:17px;font-weight:800;color:var(--t1);margin-bottom:6px}
.trained-card .tc-sub{font-size:13px;color:var(--t2);line-height:1.5;margin-bottom:16px}
.trained-card .tc-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ── RESPONSIVE ── */
@media(max-width:600px){
  .g2{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr}
  .exgrid{grid-template-columns:1fr}
  .ph{flex-direction:column;gap:8px}
  .ph .btn{align-self:flex-start}
}

/* Tablet (768px+) — centrar contenido como app móvil */
@media(min-width:601px) and (max-width:1023px){
  body{background:#1a1a1a}
  #app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;position:relative;box-shadow:0 0 60px rgba(0,0,0,.5)}
}

/* Desktop (1024px+) */
@media(min-width:1024px){
  body{background:#111;display:flex;align-items:center;justify-content:center}
  #app{width:430px;height:90vh;max-height:900px;border-radius:24px;overflow:hidden;position:relative;box-shadow:0 8px 60px rgba(0,0,0,.6)}
  .screens{border-radius:24px}
}

/* Accesibilidad: TAMAÑO DE TEXTO por dispositivo (ajuste fijo en el Perfil, NO pinch-zoom).
   La tipografía está en px fijos → se escala el CONTENIDO con `zoom`. CLAVE: el `zoom` se
   comporta DISTINTO según el motor web, y ningún CSS fijo sirve para los dos:
   - ESTANDARIZADO (Chrome/WebView ≥128, escritorio): `width:100% + zoom` YA llena exacto →
     compensar con width:calc(100%/zoom) deja un HUECO (encoge al ~71%). NO compensar.
   - LEGACY (WebViews viejos / Huawei sin Google): `zoom` escala también el ANCHO →
     `width:100% + zoom` DESBORDA y corta a la derecha → HAY que compensar con width:calc(100%/zoom).
   Por eso detectamos el motor en runtime (detectZoomWidthScaling en app-1-infra.js) y marcamos
   `html[data-zoomw="scale"]` SOLO en los legacy. El `zoom` (con sus factores) va SIEMPRE; la
   compensación de ancho/alto va SOLO bajo [data-zoomw="scale"]. Verificado: headless escritorio
   (std → comp dejaba 50% de hueco) + capturas Huawei (sin comp desbordaba). Camilo 2026-06-29. */
html[data-fs="lg"] .cnp, html[data-fs="lg"] #s-coach .panel, html[data-fs="lg"] .gm-body{ zoom:1.18; }
html[data-fs="xl"] .cnp, html[data-fs="xl"] #s-coach .panel, html[data-fs="xl"] .gm-body{ zoom:1.40; }
html[data-zoomw="scale"][data-fs="lg"] .cnp, html[data-zoomw="scale"][data-fs="lg"] #s-coach .panel, html[data-zoomw="scale"][data-fs="lg"] .gm-body{ width:calc(100%/1.18); transform-origin:left top; }
html[data-zoomw="scale"][data-fs="xl"] .cnp, html[data-zoomw="scale"][data-fs="xl"] #s-coach .panel, html[data-zoomw="scale"][data-fs="xl"] .gm-body{ width:calc(100%/1.40); transform-origin:left top; }
html[data-fs="lg"] .gm-body{ padding-bottom:86px; }
html[data-fs="xl"] .gm-body{ padding-bottom:96px; }
html[data-fs="lg"] .cnbody, html[data-fs="xl"] .cnbody{ padding-bottom:74px; }
html[data-fs="lg"] .cntabs, html[data-fs="xl"] .cntabs{ position:fixed; left:0; right:0; bottom:0; z-index:200; }
html[data-fs="lg"] .gm-footer, html[data-fs="xl"] .gm-footer{ position:fixed; left:0; right:0; bottom:0; z-index:720; }
/* HABITACIONES (`.sroom`): el `zoom` va en el CONTENEDOR INTERNO, nunca en `.sroom`.
   ⚠️ La auditoría lo reportó como «falta `.sroom` en la lista» y aplicarlo literal habría sido un
   error: `.sroom` es `position:fixed;inset:0`, así que un `zoom` ahí multiplica una caja que YA
   ocupa el viewport entero y la saca de la pantalla. Todo lo que está en la lista de arriba
   (`.cnp`, `#s-coach .panel`, `.gm-body`) es un contenedor INTERNO — `.sroom-body` y `.sroom-bar`
   son sus gemelos, y por eso el arreglo va ahí.
   Sin esto, quien puso la letra en «Muy grande» seguía leyendo las 7 habitaciones a 13 px: el
   ajuste de accesibilidad simplemente no llegaba (medido ×1.00 en lg y en xl, con `.cnp` de
   control creciendo ×1.18/×1.40 en la misma corrida).
   A diferencia de `.md` (v452) aquí NO hay que compensar la ALTURA: `.sroom` es un scroller
   (`overflow-y:auto`), así que lo que crece se alcanza scrolleando; lo que no se puede alcanzar
   es lo que desborda de un flex centrado sin scroll. El ANCHO sí es específico del motor y va con
   los demás bajo [data-zoomw="scale"] — son dos ejes distintos, que es justo lo que costó v452.
   Hallazgo 2 de la auditoría del 2026-08-06. Regresión: `_repro-sroom-fs.mjs`. */
html[data-fs="lg"] .sroom-body, html[data-fs="lg"] .sroom-bar{ zoom:1.18; }
html[data-fs="xl"] .sroom-body, html[data-fs="xl"] .sroom-bar{ zoom:1.40; }
html[data-zoomw="scale"][data-fs="lg"] .sroom-body, html[data-zoomw="scale"][data-fs="lg"] .sroom-bar{ width:calc(100%/1.18); transform-origin:left top; }
html[data-zoomw="scale"][data-fs="xl"] .sroom-body, html[data-zoomw="scale"][data-fs="xl"] .sroom-bar{ width:calc(100%/1.40); transform-origin:left top; }

/* CIERRE DE ENTRENO (`#workout-finish`): el ajuste de tamaño de texto tampoco llegaba aquí — y
   esta es la pantalla del pico emocional del día, la que lleva las cifras de SU entreno.
   El `zoom` va en `.wf-inner`, NUNCA en `#workout-finish`: es el mismo caso que `.sroom`
   (`position:fixed;inset:0` — un `zoom` ahí multiplica una caja que YA ocupa el viewport entero).
   `.wf-inner` es el gemelo de `.sroom-body`: el contenedor interno, y además el scroller
   (`overflow-y:auto`), así que lo que crece se alcanza scrolleando.
   ⚠️ `.wf-inner` es `inset:0`, o sea que su ANCHO Y SU ALTO salen de las insets, no de `width`.
   En un motor legacy (`zoom` escala también la caja) eso desborda por los DOS ejes, y el de abajo
   duele: `#workout-finish` es `overflow:hidden`, así que lo que sobresale por abajo no se puede
   alcanzar ni scrolleando y «Continuar →» —la ÚNICA salida de la pantalla— queda fuera. Por eso
   aquí la compensación lleva `height` además de `width`: es la lección de v452 (altura y ancho son
   dos ejes distintos) aplicada a un elemento que se dimensiona por insets.
   Medido con `_repro-wf-fs.mjs`: antes ×1.00 en «lg» y en «xl», con `.cnp` de control creciendo en
   la misma corrida. */
html[data-fs="lg"] .wf-inner{ zoom:1.18; }
html[data-fs="xl"] .wf-inner{ zoom:1.40; }
html[data-zoomw="scale"][data-fs="lg"] .wf-inner{ width:calc(100%/1.18); height:calc(100%/1.18); transform-origin:left top; }
html[data-zoomw="scale"][data-fs="xl"] .wf-inner{ width:calc(100%/1.40); height:calc(100%/1.40); transform-origin:left top; }

/* Modales: el `zoom` (factor) va siempre; la compensación de ancho + el anclaje del backdrop
   arriba-izquierda (zoom rompe el centrado del flex en legacy) van SOLO en motores legacy. */
html[data-fs="lg"] .md{ zoom:1.18; }
html[data-fs="xl"] .md{ zoom:1.40; }
/* 🔴 LA ALTURA SE COMPENSA SIEMPRE, EL ANCHO SOLO EN LEGACY — son dos ejes distintos y estaban
   metidos en el mismo guard. Como el `zoom` va SIEMPRE pero `max-height:calc(90vh/N)` vivía solo
   bajo [data-zoomw="scale"], en un motor estandarizado el modal se pintaba a 90vh × 1.40 = 126vh:
   medido a 360×800 con data-fs="xl", 1008 px de alto en un viewport de 800, recortado 104 arriba y
   104 abajo. Y como .mdbg centra con flex y NO tiene scroll propio, lo que desborda es
   INALCANZABLE: «💾 Guardar» quedaba fuera de la pantalla en los CUATRO modales de trabajo — el
   coach con letra grande no podía crear un asesorado, ni una rutina, ni guardar un plan ni sus
   ajustes. El ancho sí es específico del motor (está verificado arriba: compensarlo en un motor
   estandarizado dejaba 50% de hueco), la altura no lo es. Regresión: `_repro-modal-xl.mjs`.
   Hallazgo de Diego en la auditoría de diseño del 2026-08-06. */
html[data-fs="lg"] .md{ max-height:calc(90vh/1.18); }
html[data-fs="xl"] .md{ max-height:calc(90vh/1.40); }
html[data-zoomw="scale"][data-fs="lg"] .mdbg.on, html[data-zoomw="scale"][data-fs="xl"] .mdbg.on{ align-items:flex-start; justify-content:flex-start; }
html[data-zoomw="scale"][data-fs="lg"] .md{ width:calc(100%/1.18); transform-origin:left top; }
html[data-zoomw="scale"][data-fs="xl"] .md{ width:calc(100%/1.40); transform-origin:left top; }

/* Accesibilidad: respetar preferencia de reducir movimiento */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ═══ Números tabulares — mejora 8 del estudio de interfaz (v319) ═══
   tabular-nums fija todos los dígitos al mismo ancho para que un número no "salte" al cambiar.
   IMPORTANTE (medido 2026-07-11): la mayoría de los números que cambian en vivo YA son tabulares
   por fuente — los timers del guiado (gm-rest/HIIT/plancha), cargas y volúmenes usan
   'JetBrains Mono' (monoespaciada). Y 'Anton' (stats del coach .smv, sets .sescard-sets b) NO
   trae la feature OpenType `tnum` → tabular-nums es INERTE ahí (se comprobó midiendo: mismo
   ancho con y sin la propiedad), y además sus dígitos ya son casi uniformes y van solos en su
   celda, así que no bailan. La única superficie proporcional donde tabular-nums SÍ aplica y
   mejora la alineación es el cierre de entreno (.wf-stat-val = Plus Jakarta Sans, que sí trae
   tnum): la grilla 2×2 de stats queda alineada. CSS puro — el textContent no cambia. */
.wf-stat-val{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ═══ Chat de pantalla completa del COACH (v321) — la conversación tipo WhatsApp, separada
   del perfil. Reusa las burbujas .mb/.cs/.cl. Aterriza directo en el mensaje más reciente. */
.cchat{position:fixed;inset:0;z-index:1450;background:var(--bg);display:none;flex-direction:column}
.cchat.on{display:flex}
.cchat-bar{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;background:var(--w);border-bottom:1px solid var(--br);flex-shrink:0}
.cchat-back{background:none;border:none;font-size:32px;line-height:1;color:var(--gt);cursor:pointer;padding:0 4px;min-height:44px;min-width:36px}
.cchat-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;flex-shrink:0}
.cchat-who{flex:1;min-width:0;cursor:pointer}
.cchat-invite{background:none;border:none;color:var(--gt);cursor:pointer;padding:0 6px;min-height:44px;min-width:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform var(--dur-fast) var(--ease-out)}
.cchat-invite:active{transform:scale(.9)}
/* v645 · eliminar la conversación (solo para el coach). Armado = el segundo toque borra: pasa a
   píldora con la palabra, porque un icono rojo solo no dice qué va a pasar. */
.cchat-del{background:none;border:none;color:var(--t3);cursor:pointer;padding:0 6px;min-height:44px;min-width:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:999px;font:inherit;font-size:13px;font-weight:800;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.cchat-del:active{transform:scale(.9)}
.cchat-del.armed{background:var(--rd-fill);color:var(--on-rd);padding:0 14px}
/* v647 · respuestas guardadas del coach (fila que se desliza) y su editor */
.cchat-qr{display:flex;gap:7px;overflow-x:auto;padding:6px 12px 2px;flex-shrink:0;scrollbar-width:none}
.cchat-qr::-webkit-scrollbar{display:none}
.cchat-qr-b{flex-shrink:0;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--br2);background:var(--w);color:var(--t1);font:inherit;font-size:12.5px;cursor:pointer}
.cchat-qr-edit{color:var(--gt);font-weight:700;border-style:dashed}
.cchat-qr-ed{padding:8px 12px;background:var(--w);border-top:1px solid var(--br);flex-shrink:0}
.cchat-qr-ed-t{font-size:12px;color:var(--t2);margin-bottom:6px}
.cchat-qr-ed textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;border:1px solid var(--br2);border-radius:10px;padding:8px 10px;background:var(--bg);color:var(--t1);resize:vertical}
.cchat-qr-ed-b{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.msg-wait{font-size:10.5px;font-weight:700;color:var(--ort);margin-bottom:1px}
.cn-msg-del{background:transparent;color:var(--t3);border-color:var(--br);min-height:36px;padding:0 12px;font-size:12px;flex-shrink:0;white-space:nowrap}
.cn-msg-del.armed{background:var(--rdl);color:var(--rdt);border-color:var(--rd)}
.cchat-name{font-size:15px;font-weight:800;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cchat-sub{font-size:11px;color:var(--t3)}
.cchat-thread{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column}
.cchat-thread .mt{margin-bottom:8px}
.cchat-empty{margin:auto;text-align:center;color:var(--t3);font-size:13px;padding:20px}
/* Aviso «este plan no recibe el chat» (solo lo ve el coach). Tinte amarillo con --t1 encima:
   el token crudo --yl no se lee sobre su propio tinte y no tiene variante legible propia
   (mismo precedente que la clase .ty y que el badge «Sin pago» de MS.badge). */
.cchat-noliv{background:var(--yll);border:1px solid var(--br2);border-radius:var(--rsm);
  padding:10px 12px;margin:0 0 12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cchat-noliv-t{color:var(--t1);font-size:13px;line-height:1.45}
/* Banda del período de gracia (v528). Tono CÁLIDO, no de alarma: la persona no hizo nada mal —
   se le venció el plan y puede seguir entrenando mientras lo renueva. Usa la familia naranja
   (aviso) y su variante legible `--ort`, nunca el token crudo como texto (regla de la FASE 3). */
.gband{background:var(--orl);border:1.5px solid var(--or);border-radius:var(--r);padding:12px 14px;margin-bottom:12px}
.gband-t{font-size:14px;font-weight:800;color:var(--ort);margin-bottom:4px}
.gband-s{font-size:12.5px;color:var(--t1);line-height:1.45;margin-bottom:10px}
.gband-b{background:var(--ort);color:#fff;border:0;border-radius:999px;font-family:inherit;font-size:13px;font-weight:800;padding:9px 16px;cursor:pointer;min-height:40px}
/* Banda de «estás mirando tu página» (v542). Va ABAJO y reserva el área segura del sistema:
   lo pegado a un borde en un iPhone instalado se mete debajo de la barra (lección v525). */
.prevbar{position:fixed;left:0;right:0;bottom:0;z-index:9500;display:flex;align-items:center;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--emerald-hdr);color:var(--on-emerald);
  font-size:12px;font-weight:600;box-shadow:0 -2px 14px rgba(0,0,0,.18)}
.prevbar span{flex:1;min-width:0;line-height:1.35}
/* Variante SUAVE del mismo componente (v540): el recordatorio de renovación, que llega ANTES de
   que venza nada. La forma es la misma —es la misma información: el estado de tu plan— pero el
   naranja de alerta es del vencido; avisar con él tres días antes es justo lo que el PO pidió
   evitar («sin que sea incómodo»). Azul de INFO, los mismos tokens del badge «Cortesía». */
.gband.gband-soft{background:var(--bll);border-color:var(--bl)}
.gband.gband-soft .gband-t{color:var(--blt)}
.gband.gband-soft .gband-b{background:var(--blt)}
.cchat-composer{display:flex;align-items:flex-end;gap:8px;padding:8px 12px calc(env(safe-area-inset-bottom) + 8px);background:var(--w);border-top:1px solid var(--br);flex-shrink:0}
.cchat-composer textarea{flex:1;resize:none;max-height:120px;border:1.5px solid var(--br);border-radius:20px;padding:9px 14px;font-size:16px;font-family:inherit;background:var(--bg);color:var(--t1);line-height:1.35}
.cchat-send{width:44px;height:44px;border-radius:50%;border:none;background:var(--g);color:#fff;font-size:17px;cursor:pointer;flex-shrink:0}
.rpresets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.rp{padding:5px 13px;border-radius:20px;border:1.5px solid var(--br);background:var(--w);font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.rp.on{border-color:var(--g2);background:var(--gl);color:var(--gt)}

/* Number input reset */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}

/* ── CHECK-IN DIARIO "¿cómo te sientes hoy?" — adapta la rutina al ánimo ── */
.checkin-card{background:var(--w);border:1px solid var(--br);border-radius:var(--r);padding:15px 15px 13px;margin-bottom:12px}
.checkin-q{font-size:15px;font-weight:800;color:var(--gt);margin-bottom:3px}
.checkin-sub{font-size:12px;color:var(--t2);margin-bottom:12px;line-height:1.45}
.mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mood-btn{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px 11px;background:var(--w);border:1px solid var(--br);border-radius:14px;cursor:pointer;font-family:inherit;color:var(--t1);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.mood-emoji{width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:27px;line-height:1;border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.55),transparent 62%),var(--mct);box-shadow:inset 0 1px 2px rgba(255,255,255,.5),0 5px 14px -6px var(--mc);transition:transform .16s ease,box-shadow .16s ease}
.mood-lbl{font-size:11px;font-weight:700;line-height:1.2;text-align:center;color:var(--t2);transition:color .14s ease}
.mood-btn:hover{transform:translateY(-2px);border-color:var(--mc);box-shadow:0 8px 18px -10px var(--mc)}
.mood-btn:hover .mood-emoji{transform:scale(1.12)}
.mood-btn:hover .mood-lbl{color:var(--t1)}
.mood-btn:active{transform:translateY(0)}
.mood-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.mood-chips span{font-size:11px;font-weight:700;background:rgba(0,0,0,.06);border-radius:20px;padding:3px 9px;color:var(--t2)}

/* ── DATA ONBOARDING WIZARD ── */
/* Check-in inicial — full-bleed premium (igual que el wizard de registro). v2 2026-06-09 */
#data-ob{position:fixed;inset:0;z-index:900;display:none;flex-direction:column;
  background:radial-gradient(115% 55% at 50% -6%,rgba(16,224,160,.16),transparent 58%),radial-gradient(80% 38% at 112% 6%,rgba(242,201,76,.06),transparent 55%),var(--bg)}
#data-ob.on{display:flex}
.dob-sheet{flex:1;display:flex;flex-direction:column;width:100%;max-width:460px;margin:0 auto;padding:26px 26px calc(20px + env(safe-area-inset-bottom));overflow-y:auto}
#dob-body{flex:1;display:flex;flex-direction:column;width:100%}
.dob-dots{display:flex;gap:7px;justify-content:center;padding:6px 0 0;margin-bottom:0}
.dob-dot{width:7px;height:7px;border-radius:50%;background:var(--br2);transition:width var(--dur) var(--ease-out),border-radius var(--dur) var(--ease-out),background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.dob-dot.on{width:26px;border-radius:4px;background:#10E0A0;box-shadow:0 0 12px rgba(16,224,160,.7)}
.dob-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 0}
.dob-badge{width:90px;height:90px;border-radius:25px;display:grid;place-items:center;margin-bottom:22px;background:linear-gradient(150deg,#10E0A0,#068F66);box-shadow:0 18px 44px -12px rgba(16,224,160,.7),inset 0 1px 0 rgba(255,255,255,.25);position:relative}
.dob-badge::after{content:"";position:absolute;inset:-6px;border-radius:30px;border:1px solid rgba(16,224,160,.3)}
.dob-badge svg{width:42px;height:42px;stroke:#04140d;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dob-eyebrow{font-family:'Anton',sans-serif;font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:#F2C94C;margin-bottom:11px;display:flex;align-items:center;gap:9px;justify-content:center}
.dob-eyebrow::before,.dob-eyebrow::after{content:"";width:15px;height:1.5px;background:currentColor;border-radius:2px;opacity:.6}
.dob-title{font-size:27px;font-weight:800;color:var(--t1);margin-bottom:12px;line-height:1.1;letter-spacing:-.4px}
.dob-sub{font-size:14.5px;color:var(--t2);line-height:1.6;margin-bottom:22px;max-width:322px}
.dob-sub b{color:var(--t1)}
.dob-benefits{display:flex;gap:10px;justify-content:center}
.dob-ben{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--t2)}
.dob-ben .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:21px;background:var(--w);border:1px solid var(--br2)}
.dob-foot{width:100%;max-width:340px;margin:0 auto;padding-top:16px}
.dob-cta{width:100%;border:0;border-radius:15px;padding:16px;font-family:inherit;font-weight:800;font-size:16px;color:#04140d;background:linear-gradient(135deg,#10E0A0,#068F66);box-shadow:0 12px 34px -10px rgba(16,224,160,.55);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:.2px}
.dob-cta:active{transform:translateY(1px) scale(.99)}
.dob-skip{margin-top:6px;background:none;border:none;font-family:inherit;font-size:13.5px;color:var(--t3);cursor:pointer;padding:13px;width:100%;text-align:center;font-weight:600}
.dob-skip:hover{color:var(--t2)}
.dob-stepper{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;max-width:300px;border-radius:18px;padding:14px 18px;background:linear-gradient(180deg,rgba(16,224,160,.07),rgba(255,255,255,.012));border:1.5px solid var(--br2)}
.dob-pm{width:44px;height:44px;border-radius:12px;border:1px solid var(--br2);background:var(--w);color:#10E0A0;font-size:24px;font-weight:700;cursor:pointer;flex-shrink:0}
.dob-bwin{width:120px;background:none;border:none;outline:none;color:var(--t1);font-family:'JetBrains Mono',monospace;font-weight:700;font-size:34px;text-align:center}
.dob-bwu{font-size:15px;color:var(--t2);font-weight:700;margin-left:-6px}
.dob-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:340px;text-align:left}
.dob-preview{width:100%;max-width:300px;border-radius:var(--r);max-height:200px;object-fit:cover;margin-top:12px;display:none;border:1px solid var(--br2)}
.dob-file{width:100%;max-width:340px;padding:13px;border:1.5px dashed var(--br2);border-radius:14px;font-size:13px;font-family:inherit;background:var(--w);color:var(--t2)}
@media (prefers-reduced-motion:no-preference){
  @keyframes dobMidIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
  .dob-mid{animation:dobMidIn .42s cubic-bezier(.2,.7,.2,1) both}
  .dob-badge{animation:dobMidIn .5s .04s cubic-bezier(.2,.7,.2,1) both}
}

/* ── EXERCISE PROGRESS CARDS (missing from original) ── */
.exprog-card{background:var(--w);border:1px solid var(--br);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:9px}
.exprog-header{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none;transition:background .15s}
.exprog-header:hover{background:var(--bg)}
.exprog-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.exprog-name{font-size:13px;font-weight:700;flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;overflow-wrap:break-word}
.exprog-pr{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:800;color:var(--gt)}
.exprog-sessions{font-size:11px;color:var(--t3);margin-bottom:8px}
.exprog-body{display:none;border-top:1px solid var(--br);padding:12px 14px;background:var(--bg)}
.exprog-chev{font-size:12px;color:var(--t3);transition:transform .2s;flex-shrink:0}
.exprog-card.open .exprog-chev{transform:rotate(180deg)}
.exprog-card.open .exprog-body{display:block}
.pload-card{background:var(--w);border:1px solid var(--br);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:8px;overflow:hidden}
.pload-hd{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none;transition:background .15s}
.pload-hd:hover{background:var(--bg)}
.pload-chev{font-size:12px;color:var(--t3);transition:transform .2s;flex-shrink:0}
.pload-card.open .pload-chev{transform:rotate(180deg)}
.pload-body{display:none;border-top:1px solid var(--br)}
.pload-card.open .pload-body{display:block}
.pex-row{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--br);cursor:pointer;transition:background .15s}
.pex-row:hover{background:var(--bg)}
.pex-chart-wrap{display:none;padding:8px 14px 12px;background:var(--bg);border-bottom:1px solid var(--br)}.pex-chart-wrap.show{display:block}
.pex-adj-form{display:none;padding:10px 14px;background:var(--gl);border-bottom:1px solid var(--br)}.pex-adj-form.show{display:flex;flex-direction:column;gap:8px}

/* ══ LOGIN CINEMATOGRÁFICO (rediseño 2026-05-31) ══ */
#s-login.cin{position:relative;align-items:stretch;justify-content:flex-start;padding:0;background:#000;overflow:hidden}
.cin-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:contrast(1.04)}
.cin-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,10,7,.30) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 40%,rgba(2,10,7,.55) 64%,rgba(2,8,6,.94) 100%)}
.cin-edge{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 120px 12px rgba(0,0,0,.42)}
/* 🔴 `overflow-y:auto`: esta columna es de alto FIJO (100% de la pantalla) y `#s-login`
   recorta lo que sobra, así que en un teléfono corto algo se perdía sí o sí — antes se
   aplastaba la vitrina, y al dejar de aplastarse se salía el aviso de instalación.
   Lo que no cabe se DESPLAZA; en pantalla grande no cambia nada. Medido el 30-ago a
   360×640: sin esto, 170 px del aviso quedaban fuera y eran inalcanzables. */
.cin-wrap{position:relative;z-index:6;display:flex;flex-direction:column;height:100%;overflow-y:auto;width:100%;max-width:430px;margin:0 auto;
  padding:max(38px,env(safe-area-inset-top)) 26px max(24px,env(safe-area-inset-bottom))}
.cin-brand{display:flex;align-items:center;gap:9px;margin-bottom:26px;flex-shrink:0} /* v634: con un formulario abierto el héroe sube y «AVI •» quedaba pegado a la línea de abajo */
.cin-brand svg{width:21px;height:19px}
.cin-brand span{font-size:10.5px;font-weight:800;letter-spacing:3.5px;color:#fff;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.cin-dot{width:5px;height:5px;border-radius:50%;background:#10E0A0;box-shadow:0 0 10px rgba(16,224,160,.45)}
.cin-hero{margin-top:auto;margin-bottom:22px}
.cin-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:4px;text-transform:uppercase;color:#10E0A0;margin-bottom:14px;text-shadow:0 0 18px rgba(16,224,160,.45),0 1px 6px rgba(0,0,0,.9)}
.cin-eyebrow::before{content:"";display:inline-block;width:24px;height:2px;background:#10E0A0;vertical-align:middle;margin-right:10px;margin-bottom:3px}
.cin-word{font-family:'Anton',sans-serif;font-size:clamp(86px,29vw,150px);line-height:.82;letter-spacing:-1px;text-transform:uppercase;color:#fff;position:relative;display:inline-block;text-shadow:0 6px 34px rgba(0,0,0,.85)}
/* v633: aquí iba una raya verde cruzando el «AVI» — no es parte del logo (PO, 18-sep): se leía como tachado. */
.cin-word-sub{font-family:'Anton',sans-serif;font-size:clamp(24px,7.5vw,38px);letter-spacing:7px;text-transform:uppercase;color:#10E0A0;line-height:1;margin-top:8px;text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 18px rgba(16,224,160,.35)}
.cin-tag{margin-top:18px;font-size:17px;font-weight:600;color:#fff;max-width:300px;line-height:1.32;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.cin-tag b{color:#10E0A0;font-weight:800}
.cin-sub2{margin-top:10px;font-size:13.5px;font-weight:500;color:rgba(242,245,244,.80);max-width:320px;line-height:1.45;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.cin-card{background:linear-gradient(180deg,rgba(10,14,12,.55),rgba(6,9,8,.84));backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border:1px solid rgba(242,245,244,.12);border-radius:22px;padding:20px 18px 18px;box-shadow:0 -12px 54px rgba(0,0,0,.5)}
.cin-card .lerr{display:none;background:rgba(230,57,70,.16);border:1px solid rgba(230,57,70,.5);color:#FF6B78;border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:600;margin-bottom:12px}
.cin-card .lerr.on{display:block}
.cin-lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(242,245,244,.40);margin-bottom:6px}
.cin-in{width:100%;background:transparent;border:none;border-bottom:1.5px solid rgba(242,245,244,.18);color:#fff;font-family:inherit;font-size:16px;font-weight:600;padding:6px 2px 9px;outline:none;transition:border-color .25s;margin-bottom:14px}
.cin-in::placeholder{color:rgba(242,245,244,.30);font-weight:500}
.cin-in:focus{border-color:#10E0A0}
.cin-rem{display:flex;align-items:center;gap:8px;margin:-4px 0 14px}
.cin-rem label{font-size:12px;color:rgba(242,245,244,.55);cursor:pointer;user-select:none}
.cin-btn{width:100%;padding:15px;border:none;border-radius:14px;cursor:pointer;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:.4px;color:#06120D;background:linear-gradient(135deg,#10E0A0,#068F66);box-shadow:0 8px 30px rgba(16,224,160,.30);display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s}
.cin-btn:active{transform:translateY(1px) scale(.99)}
.cin-hint{margin-top:13px;text-align:center;font-size:12px;color:rgba(242,245,244,.5);line-height:1.5}.cin-hint b{color:#fff}
/* v582 · «¿Olvidaste tu contraseña?». La tarjeta de login vive SIEMPRE sobre el video oscuro (no
   sigue el tema), así que los colores van sobre blanco como el resto de `.cin-*`. Es un <button>
   y no un <a> —no navega a ninguna parte— pero se viste de enlace para no competir con «Entrar».
   Área táctil ≥36px por la regla del proyecto, sin engordar el texto. */
.cin-forgot{display:block;width:100%;min-height:36px;margin:2px 0 4px;padding:8px 4px;background:none;border:none;
  font-family:inherit;font-size:12.5px;font-weight:600;color:rgba(242,245,244,.72);text-align:center;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color var(--dur-fast) var(--ease-out)}
.cin-forgot:hover,.cin-forgot:active{color:#10E0A0}
.cin-forgot-msg{margin:0 0 10px;padding:9px 12px;border-radius:var(--rsm);font-size:12.5px;line-height:1.5;
  background:rgba(16,224,160,.10);border:1px solid rgba(16,224,160,.28);color:rgba(242,245,244,.88)}
.cin-forgot-msg.err{background:rgba(230,57,70,.12);border-color:rgba(230,57,70,.32)}
.cin-install{margin-top:14px;padding:12px 14px;background:rgba(16,224,160,.10);border:1px solid rgba(16,224,160,.22);border-radius:12px;text-align:left;display:none}
.cin-install .ttl{font-size:11px;font-weight:800;color:#10E0A0;margin-bottom:6px;letter-spacing:.5px}
.cin-install .txt{font-size:12px;color:rgba(242,245,244,.7);line-height:1.6}
.cin-install strong{color:#10E0A0}
.cin-install .ibtn{margin-top:8px;width:100%;padding:9px;background:#10E0A0;border:none;border-radius:8px;color:#06120D;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}
@keyframes aviInstallPulse{0%,100%{box-shadow:0 10px 30px rgba(10,124,91,.45)}50%{box-shadow:0 10px 38px rgba(19,181,131,.75)}}
#install-banner button:active{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){#install-banner [style*="aviInstallPulse"]{animation:none!important}}
/* `flex-wrap` para que el enlace a la web (v543) caiga DEBAJO de los dos botones y no se meta
   como tercera columna: no compite con «Crear cuenta», lo acompaña. */
.cin-cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
/* El camino de vuelta a la web (v543). Enlace, no botón; y con área pulsable de 44px, que es lo
   que pide Apple y lo que este repo ya tuvo que arreglar a mano en v525. */
.cin-web{flex-basis:100%;display:flex;align-items:center;justify-content:center;min-height:44px;
  font-size:13px;font-weight:700;color:rgba(255,255,255,.92);text-decoration:underline;
  text-underline-offset:3px;text-align:center;line-height:1.35}
.cin-web:hover{color:#fff}
.cin-cta button{flex:1;padding:16px;border-radius:40px;font-family:inherit;font-size:15.5px;font-weight:800;cursor:pointer;border:2px solid #fff;transition:transform .12s}
.cin-cta button:active{transform:scale(.98)}
.cin-cta-fill{background:#fff;color:#0A0E0C}
.cin-cta-out{background:rgba(0,0,0,.20);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cin-back{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.3px;color:rgba(242,245,244,.6);cursor:pointer;margin-bottom:12px;user-select:none}
.cin-back:hover{color:#fff}
@media (prefers-reduced-motion:no-preference){.cin-hero,.cin-cta{animation:cinUp .7s .1s both}}
@keyframes cinUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ══ BIENVENIDA PERSONALIZADA DEL ASESORADO ══ */
.cwelcome{position:fixed;inset:0;z-index:9998;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:0 30px max(46px,calc(env(safe-area-inset-bottom) + 30px));
  /* Foto del coach saludando a una asesorada (decisión Camilo 2026-07-05: la foto vive
     en este momento de unos segundos, no en el "Hoy"). Degradado oscuro abajo para el
     texto + tinte esmeralda de marca. El gradiente final es el respaldo si la foto no carga. */
  background:linear-gradient(180deg,rgba(6,15,11,.30) 0%,rgba(6,15,11,.55) 55%,rgba(5,10,8,.94) 100%),
    radial-gradient(120% 80% at 80% 12%, rgba(16,224,160,.14), transparent 55%),
    url('media/brand/coach-camilo.jpg') center 24%/cover,
    linear-gradient(160deg,#0B1F18,#07261D 45%,#06090A);
  opacity:0;pointer-events:none;transition:opacity .4s}
.cwelcome.on{opacity:1;pointer-events:auto}
.cw-mark{position:absolute;top:max(34px,calc(env(safe-area-inset-top) + 14px));left:30px;display:flex;align-items:center;gap:8px;opacity:0}
.cwelcome.on .cw-mark{animation:cwUp .6s .1s forwards}
.cw-mark svg{width:24px;height:22px}
.cw-mark b{font-family:'Plus Jakarta Sans';font-weight:800;font-size:13px;letter-spacing:2.5px;color:#fff}
.cw-hi{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(32px,9vw,44px);font-weight:800;line-height:1.1;color:#fff;opacity:0;transform:translateY(14px)}
.cwelcome.on .cw-hi{animation:cwUp .6s .22s forwards}
.cw-hi b{color:#10E0A0}
.cw-line{margin-top:14px;font-size:16px;font-weight:600;color:rgba(255,255,255,.9);max-width:340px;line-height:1.42;opacity:0;transform:translateY(14px)}
.cwelcome.on .cw-line{animation:cwUp .6s .36s forwards}
.cw-line b{color:#10E0A0;font-weight:800}
.cw-btn{margin-top:26px;padding:15px 32px;border:none;border-radius:40px;font-family:inherit;font-size:16px;font-weight:800;color:#06120D;
  background:linear-gradient(135deg,#10E0A0,#068F66);box-shadow:0 8px 30px rgba(16,224,160,.3);cursor:pointer;opacity:0;transform:translateY(14px)}
.cwelcome.on .cw-btn{animation:cwUp .6s .5s forwards}
.cw-skip{position:absolute;top:max(34px,calc(env(safe-area-inset-top) + 12px));right:26px;font-size:13px;font-weight:600;color:rgba(255,255,255,.5);cursor:pointer;padding:6px;z-index:2}
@keyframes cwUp{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.cwelcome.on .cw-mark,.cwelcome.on .cw-hi,.cwelcome.on .cw-line,.cwelcome.on .cw-btn{animation:none;opacity:1;transform:none}}

/* ══ WIZARD DE REGISTRO PREMIUM · "AVI Aurora" (modo libre) ══ */
/* Todo escopado a #cin-signup para NO afectar el login (#cin-card comparte .cin-card/.cin-in) */
#cin-signup{position:relative;border-radius:24px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(16,24,20,.66),rgba(7,12,10,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 40px rgba(16,224,160,.05),0 24px 70px rgba(0,0,0,.55)}
#cin-signup .cin-in{background:rgba(255,255,255,.03);border:1.5px solid rgba(242,245,244,.12);border-radius:13px;padding:13px 14px}
#cin-signup .cin-in:focus{border-color:#10E0A0;box-shadow:0 0 0 3px rgba(16,224,160,.14)}
#cin-signup .cin-btn{background:linear-gradient(135deg,#22F0AE,#068F66);box-shadow:0 10px 34px rgba(16,224,160,.34),inset 0 1px 0 rgba(255,255,255,.4)}
.wz-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.wz-back{width:36px;height:36px;border-radius:50%;border:1px solid rgba(242,245,244,.16);background:rgba(0,0,0,.25);color:#fff;font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-family:inherit;transition:background .15s}
.wz-back:active{background:rgba(0,0,0,.45)}
.wz-prog{flex:1;height:6px;border-radius:4px;background:rgba(242,245,244,.10);overflow:hidden;position:relative}
.wz-prog-fill{height:100%;border-radius:4px;width:14%;position:relative;background:linear-gradient(90deg,#068F66,#10E0A0 65%,#F2C94C);box-shadow:0 0 14px rgba(16,224,160,.55);transition:width .45s cubic-bezier(.4,0,.2,1)}
.wz-prog-fill::after{content:"";position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%);animation:wzShine 2.2s infinite}
@keyframes wzShine{to{transform:translateX(120%)}}
.wz-count{font-family:'Anton',sans-serif;font-size:14px;letter-spacing:1px;color:#E9C46A;flex-shrink:0;font-variant-numeric:tabular-nums}
.wz-step{display:none}
.wz-step.on{display:block}
@media (prefers-reduced-motion:no-preference){.wz-step.on{animation:wzIn .4s cubic-bezier(.4,0,.2,1)}}
@keyframes wzIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.wz-eyebrow{font-family:'Anton',sans-serif;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:#E9C46A;margin-bottom:10px;display:flex;align-items:center;gap:9px}
.wz-eyebrow::before{content:"";width:22px;height:2px;background:linear-gradient(90deg,#E9C46A,transparent);border-radius:2px}
.wz-q{font-family:'Plus Jakarta Sans',sans-serif;font-size:25px;font-weight:800;color:#fff;line-height:1.15;margin-bottom:8px;letter-spacing:-.4px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.wz-q b{color:#10E0A0;text-shadow:0 0 22px rgba(16,224,160,.4)}
.wz-help{font-size:13px;color:rgba(242,245,244,.6);line-height:1.55;margin-bottom:22px}
.wz-chips{display:flex;flex-direction:column;gap:11px}
.wz-chip{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:12px 14px;border-radius:17px;cursor:pointer;font-family:inherit;font-size:15.5px;font-weight:700;color:#fff;border:1.5px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));transition:transform .14s,border-color .2s,background .2s,box-shadow .2s}
.wz-chip:active{transform:scale(.985)}
.wz-ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0;background:rgba(255,255,255,.06);background:color-mix(in srgb,var(--c) 20%,#0c1512);border:1px solid rgba(255,255,255,.14);border-color:color-mix(in srgb,var(--c) 40%,transparent);box-shadow:inset 0 0 16px color-mix(in srgb,var(--c) 26%,transparent),0 4px 12px color-mix(in srgb,var(--c) 16%,transparent);transition:box-shadow .2s,transform .2s}
.wz-chip .lab{flex:1;line-height:1.25}
.wz-chip .sub{display:block;font-size:11.5px;font-weight:600;color:rgba(242,245,244,.5);margin-top:2px}
.wz-chip .tick{width:24px;height:24px;border-radius:50%;background:#10E0A0;color:#04130D;font-size:13px;font-weight:900;display:none;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 14px rgba(16,224,160,.6)}
.wz-chip.on{border-color:#10E0A0;background:linear-gradient(180deg,rgba(16,224,160,.12),rgba(16,224,160,.03));box-shadow:0 0 0 1px #10E0A0,0 10px 30px rgba(16,224,160,.18)}
.wz-chip.on .wz-ic{transform:scale(1.06);box-shadow:inset 0 0 16px color-mix(in srgb,var(--c) 34%,transparent),0 0 22px color-mix(in srgb,var(--c) 55%,transparent)}
.wz-chip.on .tick{display:flex;animation:wzPop .3s cubic-bezier(.3,1.4,.5,1)}
@keyframes wzPop{from{transform:scale(0)}to{transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){
  .wz-step.on .wz-chips .wz-chip{animation:wzChipIn .42s both}
  .wz-step.on .wz-chips .wz-chip:nth-child(1){animation-delay:.05s}
  .wz-step.on .wz-chips .wz-chip:nth-child(2){animation-delay:.10s}
  .wz-step.on .wz-chips .wz-chip:nth-child(3){animation-delay:.15s}
  .wz-step.on .wz-chips .wz-chip:nth-child(4){animation-delay:.20s}
  .wz-step.on .wz-chips .wz-chip:nth-child(5){animation-delay:.25s}
  .wz-step.on .wz-chips .wz-chip:nth-child(6){animation-delay:.30s}
}
@keyframes wzChipIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.wz-grid{display:grid;gap:9px}
.wz-gchip{padding:14px 6px;border-radius:14px;cursor:pointer;font-family:inherit;font-weight:800;font-size:16px;color:#fff;text-align:center;line-height:1.15;border:1.5px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));transition:transform .12s,border-color .2s,background .2s,box-shadow .2s}
.wz-gchip:active{transform:scale(.96)}
.wz-gchip.on{border-color:#10E0A0;background:linear-gradient(180deg,rgba(16,224,160,.14),rgba(16,224,160,.03));box-shadow:0 0 0 1px #10E0A0,0 8px 22px rgba(16,224,160,.18);color:#10E0A0}
.wz-gchip .s{display:block;font-size:11px;font-weight:600;color:rgba(242,245,244,.5);margin-top:2px}
.wz-gchip.on .s{color:#10E0A0}
.wz-stepper{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:17px;padding:12px 14px;margin-bottom:12px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1.5px solid rgba(255,255,255,.08)}
.wz-stepper .lab{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:rgba(242,245,244,.7)}
/* Las filas `wz-row` (WhatsApp, Lesiones) reusan la caja del ícono de los steppers. Sin esta
   regla el SVG no tenía NI tamaño NI fill:none: salía un bloque negro de 300x150. Estuvo
   oculto desde v418 sólo porque el símbolo `#i-chat` no existía y no había nada que pintar. */
.wz-row{--c:#10E0A0;margin-bottom:6px}
/* v634: la fila existía sin su estilo: el título caía en tres líneas sueltas (ícono / texto /
   campo) y el campo medía 170px fijos, con «Ej: hernia discal, dol…» cortado. Ahora el título
   va como el de los steppers y el campo ocupa el ancho. */
.wz-row .lab{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:rgba(242,245,244,.7);margin-bottom:8px}
.wz-row .wz-tel{width:100%;box-sizing:border-box}
.wz-stepper .lic,.wz-row .lic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;background:color-mix(in srgb,var(--c) 20%,#0c1512);border:1px solid color-mix(in srgb,var(--c) 38%,transparent)}
.wz-stepper .ctl{display:flex;align-items:center;gap:6px;flex-shrink:0}
.wz-pm{width:40px;height:40px;border-radius:12px;border:1.5px solid rgba(16,224,160,.35);background:rgba(16,224,160,.08);color:#10E0A0;font-size:23px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;font-family:inherit;transition:transform .1s,background .15s}
.wz-pm:active{transform:scale(.92);background:rgba(16,224,160,.18)}
/* Teléfono del registro: es texto, no una cifra que se sube con +/− como peso o altura,
   así que NO reusa .wz-num (Anton 30px, pensado para dígitos grandes). Mismo lienzo oscuro. */
.wz-tel{width:170px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:10px;color:#fff;font-size:16px;padding:9px 12px;outline:none;text-align:left;
  min-height:40px}
.wz-tel::placeholder{color:rgba(242,245,244,.45)}
.wz-tel:focus{border-color:var(--g2);box-shadow:0 0 0 3px rgba(19,181,131,.25)}
.wz-opt{font-weight:400;color:rgba(242,245,244,.6);font-size:.85em}
.wz-num{width:52px;background:transparent;border:none;color:#fff;font-family:'Anton',sans-serif;font-size:30px;font-weight:400;text-align:center;outline:none;-moz-appearance:textfield;letter-spacing:.5px}
.wz-num::-webkit-outer-spin-button,.wz-num::-webkit-inner-spin-button{-webkit-appearance:none}
.wz-unit{font-size:13px;color:rgba(242,245,244,.5);font-weight:600;min-width:26px}
.wz-foot{margin-top:24px}
.wz-or{display:flex;align-items:center;gap:10px;margin:15px 0;color:rgba(242,245,244,.4);font-size:12px;font-weight:600}
.wz-or::before,.wz-or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(242,245,244,.18),transparent)}
.wz-gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:40px;border:1px solid rgba(255,255,255,.22);background:#fff;color:#1F1F1F;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
/* Consentimiento Habeas Data (paso 7 del wizard): 3 casillas separadas, ninguna pre-marcada */
.wz-consent{display:flex;flex-direction:column;gap:10px;margin:16px 0 4px}
/* v565 · APAGAR UNA RAMA DEL CONSENTIMIENTO.
   El atributo `hidden` del HTML vale `display:none` como regla del NAVEGADOR, asi que
   cualquier regla nuestra con display le gana: `.wz-ck` lleva `display:flex` y la casilla
   de «soy mayor de 18» SEGUIA VISIBLE para un menor — o sea, seguia pudiendo mentir.
   Lo cazo el harness en el navegador, no la revision del codigo.
   Clase propia (no `style.display`) por la leccion de v505: dos mecanismos peleandose la
   misma propiedad se tapan entre si. */
.cx-off{display:none!important}
.wz-ck{display:flex;align-items:flex-start;gap:10px;font-size:11.5px;line-height:1.5;color:rgba(242,245,244,.72);cursor:pointer;padding:10px 12px;border-radius:13px;border:1.5px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.wz-ck input{width:17px;height:17px;flex-shrink:0;margin-top:1px;accent-color:#10E0A0;cursor:pointer}
.wz-ck a{color:#10E0A0;font-weight:700;text-decoration:underline}
.wz-ck b{color:rgba(242,245,244,.92)}
/* Nudge de push del asesorado (tarjeta en "Hoy") */
.push-nudge{display:flex;align-items:center;gap:12px;background:var(--gl);border:1px solid var(--g2);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;flex-wrap:wrap}
.push-nudge-txt{flex:1;min-width:180px;font-size:12.5px;color:var(--t2);line-height:1.5}
.push-nudge-txt b{display:block;font-size:13.5px;color:var(--t1);margin-bottom:2px}
.push-nudge-btns{display:flex;gap:8px;flex-shrink:0}
/* Reporte de dolor: chips del modal + banner de cuidado + chip por tarjeta */
.pain-chips{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 4px}
.pain-chip{padding:8px 12px;border-radius:20px;border:1.5px solid var(--br2);background:var(--w);color:var(--t1);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s}
.pain-chip.on{border-color:var(--ort);background:var(--orl);color:var(--ort)}
.pain-chip.lvl.on{box-shadow:0 0 0 1px var(--or)}
.pain-banner{background:var(--orl);border:1px solid var(--or);border-radius:var(--r);padding:11px 13px;margin:0 0 10px}
.pain-exchip{font-size:12px;color:var(--t2);background:var(--orl);border:1px dashed var(--or);border-radius:var(--rsm);padding:7px 10px;margin:6px 0 2px;line-height:1.5}
/* Visor de documentos legales (m-legal) */
.legal-body{overflow-y:auto;font-size:12.5px;line-height:1.65;color:var(--t2);padding:2px 2px 8px}
.legal-body h3{font-size:15px;color:var(--t1);margin:4px 0 10px}
.legal-body h4{font-size:13px;color:var(--t1);margin:14px 0 6px}
.legal-body p{margin:0 0 9px}
.legal-body ul{margin:0 0 9px;padding-left:18px}
.legal-body li{margin-bottom:4px}
.legal-body .lg-quote{border-left:3px solid var(--g2);padding-left:10px;color:var(--t1)}
.legal-body b{color:var(--t1)}
@media (prefers-reduced-motion:reduce){.wz-prog-fill::after{display:none}}
/* Íconos AVI dentro de las fichas (heredan el color de la ficha vía --c) */
.wz-ic .ic{width:24px;height:24px;stroke:var(--c);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wz-stepper .lic .ic,.wz-row .lic .ic{width:19px;height:19px;stroke:var(--c);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ══ REVEAL DEL PLAN · pantalla cumbre post-registro (identidad Aurora) ══ */
#plan-reveal{position:fixed;inset:0;z-index:9990;display:none;flex-direction:column;align-items:center;overflow-y:auto;
  padding:max(40px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));
  background:radial-gradient(95% 50% at 80% -8%,rgba(16,224,160,.26),transparent 60%),radial-gradient(80% 48% at 0% 108%,rgba(233,196,106,.14),transparent 58%),radial-gradient(70% 50% at 50% 125%,rgba(16,224,160,.10),transparent 60%),linear-gradient(160deg,#0A1A14,#06120D 48%,#04080A)}
#plan-reveal.on{display:flex}
/* capa de foto de marca (lista; se activa con .on + background-image desde showPlanReveal) */
#plan-reveal .rv-photo{position:absolute;inset:0;max-width:none;width:auto;z-index:0;background-size:cover;background-position:center top;opacity:0;transition:opacity .7s}
#plan-reveal .rv-photo.on{opacity:1}
#plan-reveal .rv-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,10,.5) 0%,rgba(4,8,10,.72) 55%,rgba(4,8,10,.92) 100%)}
#plan-reveal::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
#plan-reveal::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;top:-150px;right:-110px;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(16,224,160,.20),transparent 70%);filter:blur(6px);animation:rvFloat 9s ease-in-out infinite}
@keyframes rvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(28px)}}
#plan-reveal>*{position:relative;z-index:2;width:100%;max-width:380px}
.rv-mark{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:24px;animation:rvUp .6s .05s both}
.rv-mark .w{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:3px;color:#fff}
.rv-mark .dot{width:7px;height:7px;border-radius:50%;background:#10E0A0;box-shadow:0 0 14px rgba(16,224,160,.7);align-self:flex-start;margin-top:4px}
.rv-badge{width:84px;height:84px;border-radius:50%;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(16,224,160,.30),rgba(16,224,160,.05));border:1.5px solid rgba(16,224,160,.5);box-shadow:0 0 0 8px rgba(16,224,160,.06),inset 0 0 36px rgba(16,224,160,.4);animation:rvPop .6s .15s both}
.rv-badge .ic{width:40px;height:40px;stroke:#10E0A0;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes rvPop{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.rv-eyebrow{font-family:'Anton',sans-serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#E9C46A;text-align:center;margin-bottom:12px;animation:rvUp .6s .25s both}
.rv-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:30px;font-weight:800;line-height:1.12;letter-spacing:-.6px;text-align:center;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.5);animation:rvUp .6s .33s both}
.rv-title b{color:#10E0A0;text-shadow:0 0 26px rgba(16,224,160,.45)}
.rv-lema{text-align:center;font-size:13.5px;font-style:italic;color:rgba(242,245,244,.6);margin-top:10px;animation:rvUp .6s .42s both}
.rv-stats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:20px 0 6px;animation:rvUp .6s .5s both}
.rv-stat{display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:30px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.rv-stat .ic{width:15px;height:15px;stroke:#10E0A0;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rv-week{margin-top:20px;border-radius:20px;padding:7px;background:linear-gradient(180deg,rgba(18,26,22,.7),rgba(7,12,10,.55));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 50px rgba(0,0,0,.45)}
.rv-wk-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px}
.rv-wk-h .t{font-family:'Anton',sans-serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(242,245,244,.75)}
.rv-wk-h .n{font-size:11px;font-weight:700;color:#10E0A0}
.rv-day{display:flex;align-items:center;gap:13px;padding:12px;border-radius:15px;margin:5px 0;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);opacity:0;animation:rvDay .5s both}
.rv-day .dchip{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.5px;color:#fff;background:color-mix(in srgb,var(--c) 20%,#0c1512);border:1px solid color-mix(in srgb,var(--c) 42%,transparent)}
.rv-day .info{flex:1;min-width:0}
.rv-day .nm{font-size:14.5px;font-weight:800;color:#fff}
.rv-day .mu{font-size:11.5px;font-weight:600;color:rgba(242,245,244,.5);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-day .go{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#10E0A0;background:rgba(16,224,160,.1);border:1px solid rgba(16,224,160,.25)}
@keyframes rvDay{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
.rv-foot{margin-top:auto;padding-top:22px;animation:rvUp .6s .6s both}
.rv-btn{width:100%;padding:17px;border:none;border-radius:16px;cursor:pointer;font-family:inherit;font-size:16.5px;font-weight:800;letter-spacing:.3px;color:#04130D;background:linear-gradient(135deg,#22F0AE,#068F66);box-shadow:0 12px 38px rgba(16,224,160,.4),inset 0 1px 0 rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s}
.rv-btn:active{transform:translateY(1px) scale(.99)}
.rv-note{text-align:center;font-size:12px;color:rgba(242,245,244,.5);line-height:1.5;margin-top:13px}
.rv-note b{color:#E9C46A}
@keyframes rvUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){#plan-reveal *{animation:none!important;opacity:1!important;transform:none!important}}
/* Comunidad (C3): pulir el marcador nativo de <details> en la gestión de amigos. */
#cn-community details summary{list-style:none;outline:none}
#cn-community details summary::-webkit-details-marker{display:none}
/* Con 6 pestañas la barra queda más apretada: labels un punto más chicos para no recortar
   "Comunidad"/"Progreso"/"Mensajes" a 360px. La primitiva táctil sigue ≥40px por el padding. */
.cntab{font-size:10px}
.cntab .ctico svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.cmty-sw span,.cmty-sw{transition:none!important}}

/* ══════════ PORTADA DEL DÍA 1 — variante C del estudio de interfaz (PO, 2026-07-26) ══════════
   Solo la ve quien no ha empezado NI UN entreno (8 de 23 personas del gimnasio estaban ahí).
   Ocupa la primera pantalla y ofrece UNA salida; el resto de «Hoy» se apaga ese día. */
#cn-firstrun:empty{display:none}
.fr-wrap{text-align:center;padding:10px 2px 4px}
.fr-emoji{font-size:34px;line-height:1;margin-bottom:6px}
.fr-h{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-xl,20px);font-weight:800;color:var(--t1);letter-spacing:-.4px;margin:0 0 5px;line-height:1.2}
.fr-sub{font-size:13px;color:var(--t2);line-height:1.5;margin:0 auto 13px;max-width:300px}
.fr-card{background:linear-gradient(160deg,#0f2c24,var(--g) 130%);border-radius:var(--r);padding:14px;text-align:left;margin-bottom:12px}
.fr-eyebrow{font-family:'Anton',sans-serif;font-size:11px;letter-spacing:2px;color:#7CF3C6;display:flex;align-items:center;gap:5px}
.fr-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:21px;font-weight:800;color:#fff;letter-spacing:-.4px;margin:4px 0 8px;line-height:1.15}
.fr-chips{display:flex;gap:6px;flex-wrap:wrap}
.fr-chip{background:rgba(255,255,255,.18);color:#fff;font-size:11.5px;padding:4px 10px;border-radius:99px}
.fr-cta{display:block;width:100%;min-height:52px;border:none;border-radius:14px;background:var(--g);color:#fff;
        font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(10,124,91,.30);
        transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.fr-cta:active{transform:scale(.97);box-shadow:0 3px 10px rgba(10,124,91,.26)}
.fr-foot{font-size:11.5px;color:var(--t3);margin-top:10px}
/* El día 1 el chooser de ánimo (que vive DENTRO del guiado) no compite: tocar «Empezar» no puede
   aterrizar en «¿cómo te sientes?». Vuelve solo el día 2, cuando la portada ya no se pinta. */
#cn-firstrun:not(:empty)~#cn-today-body .checkin-card{display:none}

/* ⏮️ v578 · LA VITRINA SALIÓ DE LA BIENVENIDA (decisión del PO, 6-sep). Con ella se van
   `.cin-showcase` y las seis reglas `.sc-*` que la vestían: las tarjetas viven ahora en la WEB
   (avi-web, sección «Resultados»), que tiene su propio diseño. Y con ellas se va también el
   defecto de v556 —la tira se aplastaba en pantallas cortas por ser hija encogible de una
   columna de alto fijo—, que ya no tiene dónde ocurrir. */
/* 🔴 v571 · LA BIENVENIDA NO PUEDE SEGUIR VENDIENDO MIENTRAS ALGUIEN LLENA EL FORMULARIO.
   Al tocar «Crear cuenta» solo se escondía `#cin-cta`: el bloque de instalación seguía puesto
   DURANTE TODO EL REGISTRO. Lo reportó el PO registrando a dos asesorados en persona.
   🔒 Clase propia, JAMÁS `style.display`: `#install-hint` ya lo apaga el flujo de instalación
   (app-6) y dos mecanismos peleando la misma propiedad se tapan el uno al otro (lección v505).
   Al quitar la clase, lo que decidió app-6 sigue mandando. */
.cin-hide-onform{display:none!important}

/* ── Medidas corporales, dirección A (v566) ─────────────────────────────────
   El microcopy va DEBAJO de cada campo y siempre visible: doce perímetros con la cinta en
   un sitio distinto cada vez son doce números que no se pueden comparar (Coach Pro). */
.medgrp{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--g);margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.medgrp::after{content:"";flex:1;height:1px;background:var(--br)}
.medgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.medhint{font-size:10.5px;line-height:1.35;color:var(--t3);margin-top:4px}
.medfirst{background:var(--gl);border:1px solid var(--br);border-radius:10px;
  padding:11px 13px;margin-bottom:14px;font-size:12px;line-height:1.5;color:var(--gt)}
/* 🔴 `.medfirst b{display:block}` estaba pensado para el TÍTULO del aviso y le caía a TODAS las
   negritas del párrafo: «en ayunas, recién levantado…» y «brazo suelto» rompían línea y dejaban
   una coma huérfana abriendo renglón («, con el»). Se ve solo con el aviso real puesto, que sale
   una única vez en la vida de cada persona — y es lo primero que lee quien se mide por primera
   vez. El bloque va SOLO al primer hijo; el resto resalta en línea, como se escribió. (v598) */
.medfirst b{color:var(--gt);font-size:12.5px}
.medfirst>b:first-child{display:block;margin-bottom:4px}
/* La línea del ciclo menstrual (dictada por Valery el 11-sep: la cintura es la entrada que más
   pesa en la estimación de grasa y es justo la que más se mueve por retención de líquidos).
   Va como PÁRRAFO propio y no como una negrita más: el aviso ya tiene tres cosas y una cuarta
   pegada al final del mismo renglón no se lee. `display:block` aquí es correcto —es un span
   completo, no una palabra resaltada dentro de una frase— que es lo que rompió v598. */
.medfirst-ciclo{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--br)}

/* ── GRASA CORPORAL ESTIMADA (v607) ─────────────────────────────────────────
   Vive dentro de la tarjeta de medidas del asesorado. Todo con tokens: es la tarjeta que
   se lee en los dos temas, y un hex a mano aquí es el defecto de v415 otra vez.
   🔴 Las negritas del párrafo van EN LÍNEA: `b{display:block}` es exactamente lo que rompió
   `.medfirst` hasta v598 (una coma abriendo renglón). El único bloque es el titular. */
.medgrasa{background:var(--surface);border:1px solid var(--br);border-radius:12px;
  padding:13px 14px;margin-top:14px}
.mg-h{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--t3);margin-bottom:6px}
.mg-n{font-family:var(--mono,'JetBrains Mono',monospace);font-size:32px;font-weight:900;
  line-height:1;color:var(--t1)}
.mg-band{font-size:12px;color:var(--t2);margin-top:4px}
/* 🔒 LA CATEGORÍA VA SIN COLOR, por la misma razón que el delta: teñir «por encima» de naranja es
   decirle a la persona que su número está mal sin preguntarle su objetivo, y esta etiqueta ya es
   la parte más juzgadora de la tarjeta. Peso 600 para que se lea como rótulo y no como titular. */
.mg-cat{font-size:13px;font-weight:600;color:var(--t1);margin-top:8px;line-height:1.45}
.mg-cat-none{font-size:12px;font-weight:400;color:var(--t2)}
/* 🔴 EL DELTA NO LLEVA COLOR, y llevaba (verde al bajar, naranja al subir). Eso le decía a la
   persona «bajar es bueno, subir es un problema» sin preguntarle su objetivo: en recomposición o
   en volumen, subir un punto mientras gana músculo ES el plan funcionando. Lo cazó Valery el
   11-sep; es la familia de `nutWhyKeyShown` (v510). Texto neutro en los dos sentidos. */
.mg-delta{font-size:12px;color:var(--t2);margin-top:8px;line-height:1.45}
/* Banderas dictadas por Laura (cintura en rango de riesgo · cambio más grande de lo que el método
   mide). Superficie de AVISO, no de alarma: el ámbar del sistema, nunca el rojo de error. */
.mg-flag{font-size:12px;line-height:1.5;margin-top:10px;padding:10px 12px;border-radius:10px;
  background:var(--yll);border:1px solid var(--yl);color:var(--t1)}
.mg-src{font-size:11px;color:var(--t3);margin-top:9px;line-height:1.5}
.mg-falta{font-size:12.5px;color:var(--t2);line-height:1.5}
/* 🔴 `--surface`, NO `--c`: `--c` NO es un token global — solo existe dentro de
   `.wz-row` (el asistente de registro). Fuera de ahí la variable no resuelve y el
   `background` queda inválido: la caja pierde su fondo y se lee como texto suelto. */
.medlegacy{background:var(--surface);border:1px solid var(--br);border-radius:10px;
  padding:10px 12px;margin-top:14px;font-size:11.5px;line-height:1.5;color:var(--t2)}
.medrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--br)}
.medrow:last-child{border-bottom:none}
.medacts{display:flex;gap:6px;flex:none}
.medacts button{background:none;border:1px solid var(--br);color:var(--t2);
  border-radius:8px;padding:5px 9px;font-family:inherit;font-size:11.5px;cursor:pointer}
.medacts button:hover{border-color:var(--g);color:var(--g)}
.medacts button:focus-visible{outline:2px solid var(--g);outline-offset:2px}
@media (max-width:360px){.medgrid{grid-template-columns:1fr}}

/* v590 · «el nombre promete un músculo que no está adentro» en la lista de plantillas.
   Texto sobre fondo amarillo con los tokens de contraste (--ylt, no el token crudo: v570/v587). */
.tpl-gap{margin-top:5px;background:var(--yll);color:var(--ylt);border-radius:var(--rsm);
  padding:5px 8px;font-size:11.5px;font-weight:600;line-height:1.4}

/* Ojo de ver la contraseña (17-sep): hereda el color del texto y no depende del sistema. */
.ic-eye{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}

/* Icono del título del recuadro de instalación (17-sep): hereda el color y la altura
   del rótulo, para que no se vea pegado ni salte de línea base como hacía el emoji. */
.ic-ttl{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
/* v630 · icono de estado (candado Premium, plan en preparación, error): SVG de la marca en un círculo, nunca un emoji grande */
.ic-circle{width:46px;height:46px;margin:0 auto 8px;border-radius:50%;background:var(--gl);color:var(--gt);display:flex;align-items:center;justify-content:center}
/* v635: en el teléfono el «+ Nuevo» de la barra empujaba el botón de salir FUERA de la pantalla
   en «Asesorados», y repetía el «+ Nuevo asesorado» que ya está en la propia página (y en el
   héroe del Inicio). El JS lo enciende con style.display, de ahí el !important. */
@media (max-width:560px){#topbar-action-btn{display:none!important}}
/* v634: «Tu comida de hoy» no tenía aire debajo y quedaba pegada a la tarjeta siguiente (el entreno o «Ya entrenaste hoy»). */
#cn-meals>.card{margin-bottom:12px}
/* v634: «Corregir» y «Eliminar» de cada medida medían 27px de alto (mínimo táctil 36). */
.medacts button{min-height:36px}
/* v638: el entorno de un ejercicio (Gym, Casa, Parque, Peso corporal) como etiqueta, no como emoji pegado al nombre */
.envtag{display:inline-block;font-size:10px;font-weight:700;color:var(--t2);background:var(--bg);border:1px solid var(--br);border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:2px;white-space:nowrap}
/* v639 · logros: grupos, cuánto falta, y la invitación a compartir en el cierre */
.gx-gt{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--t2);margin:12px 2px 7px}
.gx-cnt{font-size:11px;font-weight:700;color:var(--t2);margin-left:6px}
.gx-hint{font-size:11.5px;color:var(--t2);margin:2px 2px 4px}
button.gx-badge{font-family:inherit;cursor:pointer;width:100%;color:inherit}
.gx-bp{font-size:9px;font-weight:700;color:var(--t2);margin-top:3px;font-variant-numeric:tabular-nums}
.wf-logro{background:linear-gradient(135deg,rgba(16,224,160,.22),rgba(4,8,10,.62));border:1px solid rgba(16,224,160,.55);border-radius:16px;padding:14px 16px;margin:0 0 12px;text-align:center}
.wf-logro-k{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#10E0A0}
.wf-logro-t{font-size:22px;font-weight:800;color:#fff;margin-top:4px}
.wf-logro-d{font-size:13px;color:rgba(234,251,244,.82);margin-top:3px;line-height:1.4}
.wf-logro-btn{margin-top:10px;width:100%;min-height:44px;border:none;border-radius:12px;background:#10E0A0;color:#04130D;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer}