/*
 * PUESTO DE MANDO · TEMA CRISTAL (03/10/2026)
 * -------------------------------------------
 * Interior claro, minimalista y translúcido: fondo blanco con luz de color
 * muy suave, superficies de cristal esmerilado, texto grafito y verde solo
 * para selección y avance (ámbar y rojo, para avisos y errores).
 * Se activa con <html class="cristal"> (por defecto). Sin esa clase, la app
 * se ve con el tema oscuro de siempre.
 */
html.cristal{
  color-scheme:light;
  --bg:#F4F6F5;--panel:rgba(255,255,255,.62);--panel2:rgba(255,255,255,.5);--panel3:rgba(23,32,28,.06);
  --line:rgba(18,128,92,.24);--line2:rgba(23,32,28,.08);
  --gold:#12805C;--gold2:#0E6B4C;--cream:#141A17;--text:#1C2321;--muted:#5F6B66;--dim:#8A948F;
  --olive:#5FAE8A;--ok:#1E9E6A;--warn:#C98A12;--bad:#D2483F;--h0:rgba(23,32,28,.07);--h1:#1E9E6A;
  --f-disp:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-cond:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px;
  --vidrio:rgba(255,255,255,.58);
  --vidrio-fuerte:rgba(255,255,255,.78);
  --filo:rgba(255,255,255,.85);
  --borde:rgba(23,32,28,.08);
  --sombra:0 1px 0 rgba(255,255,255,.9) inset,0 12px 32px -16px rgba(20,40,30,.18);
  --sombra-alta:0 1px 0 rgba(255,255,255,.9) inset,0 22px 48px -20px rgba(20,40,30,.26);
  --desenfoque:blur(22px) saturate(170%);
  --primario:#17201C;
}

/* ---------- Fondo: blanco con luz de color difusa ---------- */
html.cristal body{background:#F4F6F5;color:var(--text);font-size:15px;letter-spacing:-.005em}
html.cristal body::before{
  background:
    radial-gradient(38vmax 38vmax at 12% 8%,rgba(30,158,106,.16),transparent 62%),
    radial-gradient(34vmax 34vmax at 92% 12%,rgba(110,170,230,.16),transparent 62%),
    radial-gradient(40vmax 40vmax at 78% 92%,rgba(30,158,106,.10),transparent 62%),
    radial-gradient(30vmax 30vmax at 8% 88%,rgba(240,200,120,.12),transparent 62%);
  filter:blur(20px)}
html.cristal body::after{display:none}

/* ---------- Superficies de cristal ---------- */
html.cristal .card,html.cristal .tcard,html.cristal .titem,html.cristal .mrow,html.cristal .ph,html.cristal .toolbar .seg,html.cristal .mseg{
  background:var(--vidrio);border:1px solid var(--filo);box-shadow:var(--sombra);
  backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque)}
html.cristal .mrow,html.cristal .ph{box-shadow:none;border-color:var(--borde);background:rgba(255,255,255,.45)}
html.cristal .card::before{display:none}
html.cristal .tcard:hover,html.cristal .titem:hover,html.cristal .card.hov:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta);border-color:var(--filo)}
html.cristal .count{background:linear-gradient(135deg,rgba(30,158,106,.10),rgba(255,255,255,.55) 60%),var(--vidrio)}
html.cristal .count img.wm{opacity:.05}

/* ---------- Barra lateral ---------- */
html.cristal .side{background:rgba(255,255,255,.55);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);border-right:1px solid var(--borde)}
html.cristal .brand img{filter:none}
html.cristal .brand b{font:700 16px/1.1 var(--f-body);letter-spacing:-.01em;color:var(--cream)}
html.cristal .brand span{font:500 11px var(--f-body);letter-spacing:.02em;text-transform:none;color:var(--muted)}
html.cristal .nav{gap:2px}
html.cristal .nav button{font:500 14px var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted);padding:9px 12px;border-radius:10px}
html.cristal .nav button svg{width:18px;height:18px}
html.cristal .nav button:hover{background:rgba(23,32,28,.05);color:var(--text);transform:none}
html.cristal .nav button.on{background:rgba(18,128,92,.10);color:var(--gold2);box-shadow:none;font-weight:600}
html.cristal .nav button.on svg{filter:none}
html.cristal .side .foot{font:500 12px var(--f-body);letter-spacing:0;color:var(--dim)}
html.cristal .side .foot b{color:var(--text)}

/* ---------- Tipografía ---------- */
html.cristal h1.t{font:700 32px/1.12 var(--f-body);letter-spacing:-.025em;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--cream);animation:none}
html.cristal h2.s{font:600 15px/1.3 var(--f-body);letter-spacing:-.01em;text-transform:none;color:var(--cream)}
html.cristal .eyebrow{font:600 11.5px var(--f-body);letter-spacing:.06em;color:var(--gold)}
html.cristal .eyebrow::before{display:none}
html.cristal .quote{font:500 16px/1.45 var(--f-body);color:var(--text)}
html.cristal .quote small{font:600 11px var(--f-body);letter-spacing:.06em;color:var(--muted)}
html.cristal label.f{font:500 12.5px var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
html.cristal .count .big{font:700 92px/.9 var(--f-body);letter-spacing:-.05em;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--cream);filter:none}
html.cristal .count .lbl{font:600 13px var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
html.cristal .count .meta{font:500 13px var(--f-body);letter-spacing:0;text-transform:none}
html.cristal .count .meta b{font:700 20px var(--f-body);letter-spacing:-.02em;color:var(--text)}
html.cristal .rank .nm,html.cristal .ring .v{font-weight:700;letter-spacing:-.03em;color:var(--cream)}
html.cristal .ring .k,html.cristal .legend,html.cristal .tcard .bl,html.cristal .tcard .row,html.cristal .autop{font-family:var(--f-body);font-weight:500;letter-spacing:0;text-transform:none}
html.cristal .tcard .n,html.cristal .mrow .tn{font-weight:700;letter-spacing:-.04em;color:var(--gold)}
html.cristal .tcard .nm{color:var(--cream)}
html.cristal .tcard .row b{font-weight:700;letter-spacing:-.02em}

/* ---------- Botones, chips y campos ---------- */
html.cristal .btn{font:600 13.5px var(--f-body);letter-spacing:0;text-transform:none;background:rgba(255,255,255,.65);border:1px solid var(--borde);color:var(--text);box-shadow:0 1px 2px rgba(20,40,30,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html.cristal .btn:hover{border-color:rgba(23,32,28,.18);color:var(--cream);background:rgba(255,255,255,.9)}
html.cristal .btn.gold,html.cristal .optrow button.on,html.cristal .mseg button.on{background:var(--primario);color:#fff;border-color:var(--primario);box-shadow:0 8px 20px -10px rgba(23,32,28,.55)}
html.cristal .btn.gold:hover{background:#2A3530;color:#fff;transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(23,32,28,.6)}
html.cristal .btn.gold::after{display:none}
html.cristal .btn.ghost{background:transparent;box-shadow:none}
html.cristal .chip{font:600 11.5px var(--f-body);letter-spacing:0;text-transform:none;background:rgba(255,255,255,.55);border-color:var(--borde)}
html.cristal .chip.gold{color:var(--gold2);border-color:var(--line)}
html.cristal .seg button,html.cristal .mseg button,html.cristal .optrow button,html.cristal .gchips button{font-family:var(--f-body);letter-spacing:0;text-transform:none}
html.cristal .seg button.on{background:#fff;color:var(--cream);box-shadow:0 1px 3px rgba(20,40,30,.12)}
html.cristal .optrow button.on{box-shadow:none}
html.cristal input[type=text],html.cristal input[type=number],html.cristal input[type=date],html.cristal input[type=time],html.cristal input[type=search],html.cristal select,html.cristal textarea{background:rgba(255,255,255,.75);border:1px solid rgba(23,32,28,.12);color:var(--text)}
html.cristal input:focus,html.cristal select:focus,html.cristal textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(18,128,92,.14)}
html.cristal :focus-visible{outline-color:var(--gold)}
html.cristal .pill{background:var(--gold);color:#fff}
html.cristal .pill i{background:#fff}

/* ---------- Progreso ---------- */
html.cristal .bar,html.cristal .rbar2{background:rgba(23,32,28,.08)}
html.cristal .bar i{background:linear-gradient(90deg,#5FC79A,#12805C);box-shadow:none}
html.cristal .ring svg circle:first-of-type{stroke:rgba(23,32,28,.08)}
html.cristal .ring svg circle:nth-of-type(2){stroke:var(--gold)}
html.cristal .ring svg text{fill:var(--cream);font-family:var(--f-body)!important;font-weight:700}
html.cristal .stripes i{background:var(--gold)}
html.cristal .stripes i.off{background:rgba(23,32,28,.1)}
html.cristal .phases i{background:rgba(23,32,28,.08)}
html.cristal .phases i.on{background:var(--gold)}
html.cristal .ph.on{background:rgba(18,128,92,.08);color:var(--gold2)}
html.cristal .pk.nuevo{background:#12805C;color:#fff}
html.cristal .pk.relevo{background:#D7F0E3;color:#0E5A3F}
html.cristal .pk.sim{background:#DCEBFA;color:#1D4F86}
html.cristal .pk.debil{background:#FBE1DF;color:#8E2A22}
html.cristal .medal.on .ic{background:radial-gradient(circle at 35% 30%,#7FD8AE,#12805C);color:#fff;border-color:#7FD8AE}

/* ---------- Paneles laterales, lector y modales ---------- */
html.cristal .drawer,html.cristal .confirm{background:rgba(30,40,35,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html.cristal .drawer .pane,html.cristal .confirm .box{background:var(--vidrio-fuerte);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);border-left:1px solid var(--filo)}
html.cristal .xbtn{background:rgba(255,255,255,.7);border-color:var(--borde)}
html.cristal .reader{background:#EEF1EF}
html.cristal .reader.imm .rstage{background:#E8ECEA}
html.cristal .rbar,html.cristal .atools{background:rgba(255,255,255,.72);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);border-bottom:1px solid var(--borde)}
html.cristal .rstage canvas{box-shadow:0 10px 36px rgba(20,40,30,.16)}
html.cristal .immbar{background:rgba(255,255,255,.8);border-color:var(--borde);backdrop-filter:var(--desenfoque)}
html.cristal .ttsnow{background:rgba(255,255,255,.7);border-color:var(--borde);color:var(--text)}
html.cristal .sb-r{background:var(--primario);color:#fff}
html.cristal .sb-r .k{color:#7FD8AE}
html.cristal .toast{background:var(--primario);color:#fff;box-shadow:0 14px 34px -14px rgba(20,40,30,.5)}
html.cristal .alarm{background:rgba(244,246,245,.9);color:var(--text)}

/* ---------- Test tipo examen ---------- */
html.cristal .scard,html.cristal .exres,html.cristal .exam{background:rgba(255,255,255,.88);box-shadow:var(--sombra);border:1px solid var(--filo)}
html.cristal .exhead{background:rgba(255,255,255,.86);color:var(--text);border:1px solid var(--borde);box-shadow:0 8px 24px -14px rgba(20,40,30,.3);backdrop-filter:var(--desenfoque)}
html.cristal .exop:hover:not([disabled]){border-color:var(--gold)}

/* ---------- Barra inferior del móvil ---------- */
html.cristal #tabbar{background:rgba(255,255,255,.72)!important;border-top:1px solid var(--borde);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque)}
html.cristal #tabbar button{font-family:var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
html.cristal #tabbar button.on{color:var(--gold2)}
html.cristal #tabbar button.on svg{filter:none}
html.cristal *{scrollbar-color:rgba(23,32,28,.2) transparent}
html.cristal ::-webkit-scrollbar-thumb{background:rgba(23,32,28,.18);background-clip:content-box}

/* ---------- Test infinito ---------- */
html.cristal .inf-cta{background:linear-gradient(120deg,rgba(30,158,106,.14),rgba(255,255,255,.6) 55%),var(--vidrio);border:1px solid var(--filo);box-shadow:var(--sombra);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);color:var(--text)}
html.cristal .inf-cta::after{display:none}
html.cristal .inf-cta:hover{box-shadow:var(--sombra-alta)}
html.cristal .inf-cta .ico{background:rgba(255,255,255,.8);border:1px solid var(--borde);box-shadow:none}
html.cristal .inf-cta b{font:700 22px/1.15 var(--f-body);letter-spacing:-.02em;color:var(--cream)}
html.cristal .inf-cta small{color:var(--muted)}
html.cristal .inf-cta .go{font:600 13.5px var(--f-body);letter-spacing:0;text-transform:none;background:var(--primario);color:#fff;box-shadow:0 8px 20px -10px rgba(23,32,28,.55)}
html.cristal .inf-top{background:rgba(255,255,255,.75);border:1px solid var(--filo);box-shadow:var(--sombra);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque)}
html.cristal .inf-top .ttl{font:600 14px var(--f-body);letter-spacing:0;text-transform:none;color:var(--cream)}
html.cristal .inf-stat b{font-weight:700;letter-spacing:-.03em;color:var(--cream)}
html.cristal .inf-stat small{font:500 11px var(--f-body);letter-spacing:0;text-transform:none}
html.cristal .inf-stat.racha b{color:var(--gold);text-shadow:none}
html.cristal .inf-q{background:rgba(255,255,255,.86);box-shadow:var(--sombra-alta);border:1px solid var(--filo);backdrop-filter:var(--desenfoque)}
html.cristal .inf-q.bien{box-shadow:0 0 0 2px #1E9E6A,var(--sombra-alta)}
html.cristal .inf-q .tag{font:600 11px var(--f-body);letter-spacing:0;text-transform:none;background:rgba(23,32,28,.06);color:var(--muted)}
html.cristal .inf-op{border-color:rgba(23,32,28,.1)}
html.cristal .inf-op .l{background:rgba(23,32,28,.06);color:var(--text);font-family:var(--f-body)}
html.cristal .inf-op:hover:not([disabled]){border-color:rgba(23,32,28,.3);box-shadow:0 8px 18px -12px rgba(20,40,30,.35)}

/* ---------- Plan personal ---------- */
html.cristal .pl-ov{background:rgba(236,241,238,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html.cristal .pl-caja{background:rgba(255,255,255,.72);border:1px solid var(--filo);box-shadow:0 30px 80px -24px rgba(20,40,30,.35);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%)}
html.cristal .pl-barra{background:rgba(23,32,28,.06)}
html.cristal .pl-barra i{background:linear-gradient(90deg,#5FC79A,#12805C)}
html.cristal .pl-cab{font:500 12px var(--f-body);letter-spacing:0;text-transform:none}
html.cristal .pl-cuerpo h2{font:700 26px/1.15 var(--f-body);letter-spacing:-.025em;color:var(--cream)}
html.cristal .pl-op{background:rgba(255,255,255,.55);border-color:var(--borde)}
html.cristal .pl-op:hover{border-color:rgba(23,32,28,.25);background:rgba(255,255,255,.85)}
html.cristal .pl-op.on{border-color:var(--gold);background:rgba(18,128,92,.08)}
html.cristal .pl-dia,html.cristal .pl-guia li{background:rgba(255,255,255,.55);border:1px solid var(--borde)}
html.cristal .pl-guia li{border-left:3px solid var(--gold)}
html.cristal .pl-mas{background:rgba(255,255,255,.8);border-color:var(--borde)}
html.cristal .pl-sello{background:rgba(18,128,92,.1);color:var(--gold2);font:600 11.5px var(--f-body);letter-spacing:.04em}
html.cristal .pl-min{font:700 14px var(--f-body);color:var(--gold2)}
html.cristal .pl-barras i{background:linear-gradient(180deg,#7FD8AE,#12805C)}
html.cristal .pl-barras b{font:600 12px var(--f-body)}
html.cristal .pl-pie{border-top-color:var(--borde)}

/* ---------- Puerta de acceso y franja de prueba ---------- */
html.cristal .ob-puerta{background:radial-gradient(60vmax 50vmax at 15% 10%,rgba(30,158,106,.16),transparent 60%),radial-gradient(50vmax 50vmax at 90% 90%,rgba(110,170,230,.16),transparent 60%),#F4F6F5;color:var(--text);font-family:var(--f-body)}
html.cristal .ob-caja{background:rgba(255,255,255,.7);border:1px solid var(--filo);box-shadow:0 30px 70px -28px rgba(20,40,30,.35);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);color:var(--text)}
html.cristal .ob-caja h1{font:700 30px/1.1 var(--f-body);letter-spacing:-.025em;color:var(--cream)}
html.cristal .ob-caja .et{color:var(--gold)}
html.cristal .ob-boton{background:var(--primario);color:#fff;font-family:var(--f-body)}
html.cristal .ob-boton.claro{background:rgba(255,255,255,.7);color:var(--text);border:1px solid var(--borde)}
html.cristal .ob-franja{background:rgba(255,255,255,.8);color:var(--text);border-bottom:1px solid var(--borde);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque)}
html.cristal .ob-franja button{background:var(--primario);color:#fff;font-family:var(--f-body)}
html.cristal .ob-cuenta a,html.cristal .ob-cuenta button{background:rgba(255,255,255,.7);color:var(--text);border-color:var(--borde);backdrop-filter:blur(10px)}

/* ---------- Cambio de tema ---------- */
.ob-tema{display:flex;align-items:center;gap:8px;width:100%;background:none;border:1px solid var(--line2);border-radius:10px;padding:8px 10px;color:var(--muted);font:500 13px var(--f-body);cursor:pointer}
.ob-tema:hover{color:var(--text);border-color:var(--line)}

/* ---------- Minimalismo: sin mayúsculas forzadas ni tracking de cartel ---------- */
html.cristal *{text-transform:none!important;letter-spacing:normal!important}
html.cristal .eyebrow,html.cristal .pl-sello{text-transform:uppercase!important;letter-spacing:.06em!important}
html.cristal h1.t,html.cristal .pl-cuerpo h2,html.cristal .ob-caja h1{letter-spacing:-.025em!important}
html.cristal .count .big{letter-spacing:-.05em!important}
html.cristal .inf-cta b,html.cristal .ring .v,html.cristal .rank .nm,html.cristal .inf-stat b,html.cristal .tcard .n,html.cristal .mrow .tn{letter-spacing:-.03em!important}
html.cristal .cphase div{background:rgba(255,255,255,.5);border-color:var(--borde)}
html.cristal .cphase b{font:600 15px/1.25 var(--f-body);color:var(--cream)}
html.cristal .sync{font:500 12px var(--f-body)}
html.cristal .pk{font:600 11px var(--f-body)}
html.cristal .heat i{background:rgba(23,32,28,.09)}
/* Títulos y cifras que usaban la letra de cartel: peso firme y tracking cerrado */
html.cristal .ph b,html.cristal .apitem .tn,html.cristal .scard h3,html.cristal .exhead .clk,html.cristal .exres .big,html.cristal .tcard .ttl3,html.cristal .sritem .sl,html.cristal .alarm h2,html.cristal .alarm .acd,html.cristal .cal .dn,html.cristal .kpi .v,html.cristal .mobhead b{font-weight:650;letter-spacing:-.02em!important}
html.cristal .tcard .ttl3{font-size:22px;color:var(--cream)}
/* Explicación del fallo, en cristal */
html.cristal .inf-exp{padding:1px;background:linear-gradient(135deg,rgba(210,72,63,.45),rgba(23,32,28,.08))}
html.cristal .inf-exp.verde{background:linear-gradient(135deg,rgba(30,158,106,.5),rgba(23,32,28,.08))}
html.cristal .inf-exp>div{background:rgba(255,255,255,.86);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);border-radius:21px}
html.cristal .inf-exp h4{font:700 20px/1.2 var(--f-body);color:var(--cream)}
html.cristal .inf-exp .fila .e{background:rgba(23,32,28,.05)}
html.cristal .inf-exp .fila .k{font:600 11.5px var(--f-body);color:var(--gold)}
html.cristal .inf-exp .fila p{color:var(--text)}
html.cristal .inf-exp .fila.truco{background:rgba(18,128,92,.07);border:1px dashed rgba(18,128,92,.35)}
html.cristal .inf-exp .fila.truco p{color:var(--gold2)}
html.cristal .inf-toast{background:var(--primario);color:#fff;font:700 20px/1 var(--f-body)}
/* Franja de prueba: una sola línea también en el móvil */
html.cristal .ob-franja{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap;min-height:34px;padding:5px 12px;font:500 13px/1.2 var(--f-body);text-align:left}
html.cristal .ob-franja button{flex:none;padding:6px 12px}
@media (max-width:480px){html.cristal .ob-franja{font-size:12px;gap:8px;padding:4px 10px;height:46px}html.cristal body.ob-con-franja{padding-top:46px}html.cristal body.ob-con-franja:has(#readerHost:not(:empty)){padding-top:0}}

/* ============================================================
   CUENTA, ADMINISTRACIÓN Y ENTREVISTA (estudio-cuenta.js)
   ============================================================ */
.cu-nav{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line2)}
.cu-nav button{display:flex;align-items:center;gap:12px;background:none;border:0;border-radius:10px;padding:9px 12px;color:var(--muted);font:500 14px var(--f-body);text-align:left}
.cu-nav button svg{width:18px;height:18px;flex:none}
.cu-nav button span{display:flex;flex-direction:column;line-height:1.2}
.cu-nav button small{font-size:11px;color:var(--warn);font-weight:600}
.cu-nav button:hover{background:rgba(127,127,127,.08);color:var(--text)}
.cu-nav button.on{background:rgba(18,128,92,.10);color:var(--gold2);font-weight:600}
.side .ob-tema{margin-top:8px}
.side .cu-nav + .ob-tema{margin-top:8px}
.cu-obra{display:flex;gap:18px;align-items:flex-start}
.cu-obra-ic{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--panel3);color:var(--text)}
.cu-obra-ic svg{width:26px;height:26px}
.cu-perfil{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.cu-av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:700 22px var(--f-body);color:#fff;background:linear-gradient(145deg,#3A403D,#0B0D0C);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px -10px rgba(0,0,0,.5)}
.cu-datos b{display:block;font-size:17px;margin:2px 0 8px;color:var(--cream)}
.cu-datos p{margin:8px 0 0}
.cu-chips{display:flex;gap:6px;flex-wrap:wrap}
.cu-chips .chip svg{width:14px;height:14px}
.cu-acc{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cu-acc .btn svg{width:16px;height:16px}
@media (max-width:760px){.cu-perfil{grid-template-columns:auto 1fr}.cu-perfil .cu-acc{grid-column:1/-1}}
.cu-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cu-kpis .card{padding:14px 16px}
.cu-kpis small{display:block;color:var(--muted);font-size:12.5px}
.cu-kpis b{display:block;margin-top:4px;font:700 26px/1.1 var(--f-body);letter-spacing:-.03em;color:var(--cream)}
.cu-kpis-s b{font-size:20px}
.cu-barra-h{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.cu-barra-h input{flex:1;min-width:200px}
.cu-tabla-w{overflow:auto;margin:0 -4px}
.cu-tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.cu-tabla th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.cu-tabla td{padding:10px;border-bottom:1px solid var(--line2);vertical-align:middle;white-space:nowrap}
.cu-tabla td b{display:block;font-weight:600;color:var(--cream)}
.cu-tabla td small{color:var(--dim);font-size:11.5px}
.cu-tabla tbody tr:hover{background:rgba(127,127,127,.05)}
.cu-nota{font-size:12.5px;margin:12px 0 0}
.cu-ficha{gap:14px!important;width:min(720px,100%)!important}
.cu-h2{margin:2px 0 0;font:700 20px/1.2 var(--f-body);letter-spacing:-.02em;color:var(--cream);word-break:break-all}
.cu-h3{margin:0 0 10px;font:600 14px var(--f-body);color:var(--cream)}
.cu-dias{display:grid;grid-template-columns:repeat(30,1fr);gap:3px;align-items:end;height:90px}
.cu-dias i{display:block;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#7FD8AE,#12805C);min-height:2px}
.cu-lectura{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:950;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;background:rgba(23,32,28,.88);color:#fff;font:500 13px var(--f-body);box-shadow:0 14px 34px -14px rgba(0,0,0,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.cu-lectura svg{width:16px;height:16px}
.cu-lectura .btn.gold{background:#fff;color:#17201C;border-color:#fff}
.cu-bien{text-align:left}
.cu-logo{display:block;width:64px;height:auto;margin:6px 0 14px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}
.cu-puntos{display:flex;gap:6px;margin:18px 0 4px}
.cu-puntos i{width:6px;height:6px;border-radius:99px;background:var(--line2);background:rgba(127,127,127,.3);transition:width .3s}
.cu-puntos i.on{width:22px;background:var(--gold)}
.cu-fin{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.alarm .aic svg{width:46px;height:46px}
.inf-exp .fila .e svg{width:18px;height:18px}
html.cristal .brand img{width:34px;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.16))}
html.cristal .ob-caja img{filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}
.side .cu-nav ~ .fsbtn{margin-top:8px}
html.cristal .ob-caja img{width:56px;height:auto}
html.cristal .ob-caja .et{font:600 11.5px/1 var(--f-body);letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--gold)}
html.cristal .ob-caja p,html.cristal .ob-caja ul{color:var(--muted)}
html.cristal .ob-caja ul{padding-left:18px}
html.cristal .ob-caja li::marker{color:var(--gold)}
html.cristal .ob-caja .precio{font:700 34px/1 var(--f-body);letter-spacing:-.03em!important;color:var(--cream)}
html.cristal .ob-caja .precio small{font:500 14px var(--f-body);color:var(--muted)}
html.cristal .ob-letra,html.cristal .ob-msg{color:var(--dim)}
.cu-ficha>*{flex:none}
a.btn{text-decoration:none}
@media (max-width:760px){.cu-lectura{bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px)}}

/* =====================================================================
   CRISTAL METÁLICO + LETRAS DE LA ENTREVISTA (03/10/2026)
   Anton para titulares y cifras, Archivo para el texto, JetBrains Mono
   para etiquetas. Botones principales en titanio; superficies de cristal.
   ===================================================================== */
.ob-cuenta{display:none!important}
html.cristal{
  --f-disp:Anton,"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Archivo",-apple-system,"Segoe UI",sans-serif;
  --f-cond:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --titanio:linear-gradient(180deg,#2B302E 0%,#6E7773 38%,#1C201E 62%,#4A524E 100%);
  --titanio-txt:linear-gradient(180deg,#1B1F1D 0%,#5D6662 45%,#141816 60%,#3C4440 100%);
  --plata:linear-gradient(180deg,#FFFFFF 0%,#EDF0EE 45%,#D3D8D5 55%,#F3F5F4 100%);
  --verde-metal:linear-gradient(100deg,#0B5E43 0%,#2FA374 35%,#0E6B4C 55%,#46B888 75%,#0B5E43 100%);
}
html.cristal body{font-family:var(--f-body)}
/* Titulares como en la entrevista: Anton en mayúsculas con acabado de titanio */
html.cristal h1.t{font:400 40px/1 var(--f-disp)!important;text-transform:uppercase!important;letter-spacing:.01em!important;background:var(--titanio-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
html.cristal .count .big{font:400 96px/.9 var(--f-disp)!important;letter-spacing:0!important;background:var(--titanio-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
html.cristal .count .meta b,html.cristal .ring .v,html.cristal .rank .nm,html.cristal .kpi .v,html.cristal .cu-kpis b,html.cristal .inf-stat b,html.cristal .tcard .n,html.cristal .mrow .tn{font-family:var(--f-disp)!important;font-weight:400!important;letter-spacing:.01em!important}
html.cristal .tcard .n,html.cristal .mrow .tn{background:var(--titanio-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
html.cristal .pl-cuerpo h2,html.cristal .ob-caja h1,html.cristal .cu-h2,html.cristal .inf-cta b,html.cristal .tcard .ttl3{font-family:var(--f-disp)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.01em!important}
html.cristal .pl-cuerpo h2{font-size:30px}
/* Etiquetas en mono, como los rótulos de la entrevista */
html.cristal .eyebrow,html.cristal .pl-sello,html.cristal .count .lbl,html.cristal .cu-kpis small,html.cristal .pl-cab,html.cristal .cu-tabla th{font-family:var(--f-cond)!important;font-weight:500!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.14em!important}
html.cristal .eyebrow{color:var(--muted)}
/* Botón principal de titanio y secundario de plata */
html.cristal .btn{font-family:var(--f-body);font-weight:600}
html.cristal .btn.gold,html.cristal .inf-cta .go,html.cristal .ob-boton:not(.claro),html.cristal .optrow button.on,html.cristal .mseg button.on{background:var(--titanio)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -1px 0 rgba(0,0,0,.4) inset,0 12px 26px -14px rgba(10,14,12,.75)!important}
html.cristal .btn.gold:hover{filter:brightness(1.12)}
html.cristal .btn:not(.gold):not(.ghost),html.cristal .ob-boton.claro{background:var(--plata);border:1px solid rgba(23,32,28,.12);box-shadow:0 1px 0 #fff inset,0 6px 16px -12px rgba(20,40,30,.45)}
/* Detalles de plata y titanio */
html.cristal .nav button.on{background:var(--plata);color:var(--cream);box-shadow:0 1px 0 #fff inset,0 6px 14px -10px rgba(20,40,30,.4);border:1px solid rgba(23,32,28,.08)}
html.cristal .cu-nav button.on{background:var(--plata);color:var(--cream)}
html.cristal .cu-av{background:var(--titanio)}
html.cristal .tarjeta .ic,html.cristal .cu-obra-ic,html.cristal .inf-cta .ico{background:var(--plata);border:1px solid rgba(23,32,28,.1);box-shadow:0 1px 0 #fff inset}
html.cristal .bar i,html.cristal .pl-barra i,html.cristal .pl-barras i,html.cristal .cu-dias i{background:var(--verde-metal)}
html.cristal .pk.nuevo{background:var(--titanio);color:#fff}
html.cristal .toast,html.cristal .cu-lectura{background:rgba(23,28,26,.9)}

/* ============================================================
   NAVEGACIÓN ORDENADA (estudio-nav.js)
   ============================================================ */
.nav{gap:14px!important;overflow-y:auto;min-height:0}
.nv-grupo{display:flex;flex-direction:column;gap:2px}
.nv-tit{padding:0 12px 4px;font:600 10.5px var(--f-cond);letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--dim)}
.nav button span,.nv-hoja button span{display:flex;flex-direction:column;line-height:1.2}
.nav button small,.nv-hoja button small{font-size:10.5px;color:var(--warn);font-weight:600;text-transform:none;letter-spacing:0}
.side{overflow:hidden}
.side .fsbtn{margin-top:auto}
/* menú completo del móvil */
.nv-hoja{position:fixed;inset:0;z-index:95;background:rgba(10,14,12,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;opacity:0;transition:opacity .25s}
.nv-hoja.ver{opacity:1}
.nv-hoja[hidden]{display:none}
.nv-panel{width:100%;max-height:86vh;overflow:auto;background:var(--panel);background:color-mix(in srgb,var(--bg) 92%,transparent);border-radius:22px 22px 0 0;padding:14px 16px calc(24px + env(safe-area-inset-bottom,0px));transform:translateY(30px);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 50px -20px rgba(0,0,0,.4)}
.nv-hoja.ver .nv-panel{transform:none}
.nv-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.nv-cab b{font:700 17px var(--f-body);color:var(--cream)}
.nv-panel .nv-grupo{margin-bottom:14px}
.nv-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nv-rejilla button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:14px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font:600 12.5px var(--f-body);text-align:center}
.nv-rejilla button svg{width:22px;height:22px}
.nv-rejilla button.on{border-color:var(--gold);color:var(--gold2)}
/* inicio: hoy */
.nv-hoy{display:flex;flex-direction:column;gap:12px}
.nv-seguir{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;text-align:left;width:100%;cursor:pointer;color:var(--text)}
.nv-seguir:hover{transform:translateY(-2px)}
.nv-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--panel3);color:var(--cream);flex:none}
html.cristal .nv-ic{background:var(--plata);border:1px solid rgba(23,32,28,.08)}
.nv-ic svg{width:22px;height:22px}
.nv-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nv-txt small{font:500 11px var(--f-cond);letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--muted)}
.nv-txt b{font:700 17px var(--f-body);color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-txt em{font-style:normal;color:var(--muted);font-size:13.5px}
.nv-ir{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:var(--gold);color:#fff;font:600 14px var(--f-body)}
html.cristal .nv-ir{background:var(--titanio)}
.nv-ir svg{width:16px;height:16px}
.nv-acc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.nv-acc .card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;cursor:pointer;color:var(--text);padding:16px}
.nv-acc .card b{font:700 15px var(--f-body);color:var(--cream)}
.nv-acc .card small{color:var(--muted);font-size:12.5px;line-height:1.35}
.nv-acc .card:hover{transform:translateY(-2px)}
@media (max-width:900px){.nv-acc{grid-template-columns:repeat(2,1fr)}.nv-seguir{grid-template-columns:auto 1fr}.nv-seguir .nv-ir{grid-column:1/-1;justify-content:center}}
/* suscripción */
.nv-est{margin:8px 0 6px}
.nv-est .chip{font-size:13px;padding:6px 12px}
.nv-cifra{font:400 46px/1 var(--f-disp);color:var(--cream);margin:8px 0 6px}
.nv-cifra small{font:500 15px var(--f-body);color:var(--muted);margin-left:6px}
.nv-lista{margin:12px 0 0;padding-left:18px;color:var(--text);line-height:1.7}
.nv-lista li::marker{color:var(--gold)}
.nv-dudas details{border-top:1px solid var(--line2);padding:10px 2px}
.nv-dudas summary{cursor:pointer;font-weight:600;color:var(--cream)}
.nv-dudas p{margin:8px 0 0;color:var(--muted)}
#nvApar .ob-tema{width:auto}
/* varios colores en los accesos de Inicio */
.nv-acc .card:nth-child(1) .nv-ic{background:#2F6FED;color:#fff;border:0}
.nv-acc .card:nth-child(2) .nv-ic{background:#16A34A;color:#fff;border:0}
.nv-acc .card:nth-child(3) .nv-ic{background:#F59E0B;color:#fff;border:0}
.nv-acc .card:nth-child(4) .nv-ic{background:#E5484D;color:#fff;border:0}
.nv-seguir .nv-ic{background:#0A1A45!important;color:#F2C200!important;border:0}

/* Página real del temario en la corrección del fallo */
.inf-pag{border-radius:18px;overflow:hidden;background:var(--panel);border:1px solid var(--line2);box-shadow:0 18px 40px -26px rgba(0,0,0,.45);animation:obSube .45s var(--ease, ease) both}
html.cristal .inf-pag{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.9)}
.inf-pag-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px}
.inf-pag-cab b{display:block;font:700 15px var(--f-body);color:var(--cream)}
.inf-pag-cab small{color:var(--muted);font-size:12.5px}
.inf-pag-img{position:relative;cursor:zoom-in;border-top:1px solid var(--line2);max-height:520px;overflow:hidden}
.inf-pag-img canvas{display:block;width:100%;height:auto}
.inf-pag-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--panel));pointer-events:none}
html.cristal .inf-pag-img::after{background:linear-gradient(transparent,rgba(255,255,255,.95))}
.inf-pag-carga{height:180px;margin:0 14px 14px;border-radius:10px;background:linear-gradient(90deg,var(--panel3) 25%,var(--panel2) 50%,var(--panel3) 75%);background-size:200% 100%;animation:pagCarga 1.2s linear infinite}
@keyframes pagCarga{to{background-position:-200% 0}}
.ex-pag{margin-top:10px}
/* Percentil OB */
.ex-pct,.nv-pct{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ex-pct{margin:12px 0;padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line2)}
.pct-cifra{display:flex;flex-direction:column;align-items:center;min-width:92px;padding:8px 12px;border-radius:14px;background:var(--panel3)}
html.cristal .pct-cifra{background:var(--plata);border:1px solid rgba(23,32,28,.08)}
.pct-cifra b{font:400 44px/1 var(--f-disp);color:var(--cream)}
.pct-cifra span{font:600 11px var(--f-body);color:var(--muted);text-align:center}
.pct-txt{flex:1;min-width:220px;color:var(--text);font-size:14.5px;line-height:1.5}
.pct-txt small{display:block;color:var(--muted);font-size:12px;margin-top:4px}

.inf-pag-img.entera{max-height:560px;overflow:auto;border-radius:12px}