:root{
  --navy:#131722;--navy-mid:#1b2231;--navy-light:#2b3650;
  --gold:#f0b35a;--gold-light:#ffd089;--gold-dim:rgba(240,179,90,.14);
  --white:#eef1f7;--gray:#9aa6bc;--gray-dim:#868fa1;
  --green:#2ecc71;--red:#e74c3c;
  --correct-bg:#123327;--wrong-bg:#3a1719;
  --font-title:'IBM Plex Sans',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
*{scrollbar-width:thin;scrollbar-color:var(--navy-light) var(--navy);}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:var(--navy);}
*::-webkit-scrollbar-thumb{background:var(--navy-light);border-radius:5px;border:2px solid var(--navy);}
*::-webkit-scrollbar-corner{background:var(--navy);}
body{background-color:var(--navy);background-image:radial-gradient(ellipse 100% 55% at 50% 0%, rgba(240,179,90,.06), transparent 70%);background-image:radial-gradient(ellipse 100% 55% at 50% 0%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 70%);color:var(--white);font-family:var(--font-body);min-height:100vh;overflow-x:hidden;}
/* ── ESTILO FIJO (navy + IBM Plex; applyFixedStyle aplica estas 2 clases) ── */
body.font-plex{--font-title:'IBM Plex Sans',sans-serif;--font-body:'IBM Plex Sans',sans-serif;--font-mono:'IBM Plex Mono',monospace;}
body.palette-slate{--navy:#131722;--navy-mid:#1b2231;--navy-light:#2b3650;--gold:#f0b35a;--gold-light:#ffd089;--gold-dim:rgba(240,179,90,.14);--white:#eef1f7;--gray:#9aa6bc;--gray-dim:#868fa1;--green:#49d18e;--red:#f26c6c;--correct-bg:#123327;--wrong-bg:#3a1719;}
body.light.palette-slate{--navy:#f2f4f8;--navy-mid:#ffffff;--navy-light:#d8dde8;--white:#1c2230;--gray:#566075;--gray-dim:#6b7280;--gold:#8a5e22;--gold-light:#6f4a18;--gold-dim:rgba(138,94,34,.14);--correct-bg:#e9f8ef;--wrong-bg:#feeaea;}

body,button,input,select,textarea{font-family:var(--font-body);}
.hdr-back,.hdr-title,.paused-overlay h2,.app-card h3,#scr-home h1,.card-title,.section-title,.mod-num,.mod-name,#scr-mod-start h2,.info-box .ib-n,.cfg-label,.btn-nav,.res-pct,.res-verdict,.bk-box .bk-n,.missed-hdr,.btn-primary,.btn-secondary,.retry-wrong-btn,.exam-hist-title,.shortcut-title,.snake-state,.snake-card h3,.radio-title{font-family:var(--font-title)!important;}
.hdr-sub,.score-pill,.timer,.card-meta,.q-badge,.q-mod-tag,.opt-letter,.qnav-dot,.hist-item,.exam-hist-row .ehr-date,.radio-label,.radio-pct,.flash-a,.flash-counter,.snake-pill,.shortcut-btn,.shortcut-item kbd,.mod-count{font-family:var(--font-mono)!important;}

/* ── HEADER ── */
header{background:var(--navy-mid);border-bottom:1px solid var(--navy-light);padding:0 2rem;position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:60px;}
/* overflow:hidden es la red de seguridad: si algún día el lado izquierdo no entra,
   se recorta en vez de montarse encima del chip de usuario de la derecha. */
.hdr-left{display:flex;align-items:center;gap:.6rem;min-width:0;flex:1;overflow:hidden;}
.hdr-titles{min-width:0;overflow:hidden;padding-right:.6rem;}
.home-btn{background:none;border:1px solid var(--navy-light);color:var(--gray);font-size:1rem;width:32px;height:32px;border-radius:6px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hdr-back{background:none;border:1px solid var(--navy-light);color:var(--gray);font-family:var(--font-title);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .8rem;border-radius:6px;cursor:pointer;transition:all .15s;display:none;white-space:nowrap;flex-shrink:0;}
.hdr-title{font-family:var(--font-title);font-weight:800;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hdr-sub{font-family:var(--font-mono);font-size:.65rem;color:var(--gray);}
.hdr-right{display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.score-pill{font-family:var(--font-mono);font-size:.75rem;background:var(--navy-light);border:1px solid var(--gold);color:var(--gold);padding:.28rem .65rem;border-radius:20px;display:none;white-space:nowrap;flex-shrink:0;}
.timer{font-family:var(--font-mono);font-size:.88rem;font-weight:500;color:var(--gold);background:var(--gold-dim);border:1px solid rgba(201,168,76,.3);padding:.28rem .65rem;border-radius:6px;min-width:60px;text-align:center;display:none;white-space:nowrap;flex-shrink:0;}
.timer.warn{color:var(--red);border-color:var(--red);background:rgba(231,76,60,.1);animation:pulse 1s infinite;}
.pause-btn{background:none;border:1px solid var(--navy-light);color:var(--gray);font-size:.9rem;width:34px;height:34px;border-radius:6px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.pause-btn.paused{border-color:var(--gold);color:var(--gold);background:var(--gold-dim);}
.paused-overlay{display:none;position:fixed;inset:0;background:rgba(10,22,40,.92);z-index:200;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:1.5rem 1rem;}
.paused-overlay.show{display:flex;}
.paused-overlay h2{font-family:var(--font-title);font-weight:800;font-size:2rem;color:var(--gold);}
.paused-overlay p{color:var(--gray);font-size:.9rem;}
/* ── MODAL SYSTEM (unificado) ── */
/* --vvh / --vvtop = alto y desplazamiento REALES visibles (visualViewport, ver el
   script "TECLADO Y MODALES"). En iOS el teclado NO reduce el viewport de layout,
   así que con inset:0 el modal seguía midiendo toda la pantalla y su parte de abajo
   (justo donde está el input) quedaba TAPADA por el teclado. Usando --vvh el modal
   ocupa solo lo que se ve de verdad. Sin soporte, cae en 100% y queda como antes. */
.app-modal{position:fixed;inset:0;top:var(--vvtop,0px);height:var(--vvh,100%);bottom:auto;z-index:330;background:rgba(10,22,40,.72);display:flex;align-items:center;justify-content:center;padding:1rem;}
.app-modal[hidden]{display:none!important;}
.app-card{position:relative;width:min(420px,92vw);max-height:min(88vh,calc(var(--vvh,100vh) - 2rem));overflow-y:auto;overscroll-behavior:contain;background:var(--navy-mid);border:1px solid var(--navy-light);border-radius:12px;padding:1.4rem 1.1rem 1rem;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.app-card:focus{outline:none;}
.app-card h3{font-family:var(--font-title);font-size:1.05rem;color:var(--gold);margin-bottom:.35rem;padding-right:2rem;}
.app-card p{color:var(--gray);font-size:.86rem;line-height:1.5;margin-bottom:.95rem;}
.app-body{color:var(--gray);font-size:.86rem;line-height:1.5;}
.app-actions{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap;margin-top:.4rem;}
/* con un modal abierto el fondo no scrollea (ver __bloquearScrollFondo) */
body.modal-abierto{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
/* modal de salida: 3 botones no entran en una fila -> apilar en vertical. column-reverse
   deja el botón recomendado (el primary, último en el DOM) arriba y "Cancelar" abajo,
   y funciona igual con 2 botones (muerte súbita/repaso, donde "Guardar" está oculto). */
#leave-modal .app-actions{flex-direction:column-reverse;flex-wrap:nowrap;align-items:stretch;gap:.55rem;}
#leave-modal .app-actions button{width:100%;padding-top:.85rem;padding-bottom:.85rem;}
/* Los dos botones del cartel de la fecha tienen anchos muy distintos ("Guardar
   fecha" vs "Todavía no tengo fecha"): con justify-content:flex-end quedaban
   escalonados, uno pegado a la derecha y el otro más ancho abajo. Apilados y a
   todo el ancho se leen como dos opciones, que es lo que son. Column normal (no
   reverse): en el DOM "Guardar fecha" ya viene primero, y es la que tiene que
   quedar arriba. */
#fecha-modal .app-actions{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.55rem;margin-top:.9rem;}
#fecha-modal .app-actions button{width:100%;padding-top:.8rem;padding-bottom:.8rem;}
/* El testi-modal tambien apilaba en movil, pero por efecto colateral de la regla
   global de ancho completo, no por decision: sin flex-direction quedaba el
   secundario ARRIBA y el primario abajo, o sea al reves que leave y fecha, que
   lo pusieron arriba a proposito. */
#testi-modal .app-actions{flex-direction:column-reverse;flex-wrap:nowrap;align-items:stretch;gap:.55rem;}
#testi-modal .app-actions button{width:100%;padding-top:.85rem;padding-bottom:.85rem;}
.modal-close-x{position:absolute;top:.5rem;right:.5rem;width:32px;height:32px;background:none;border:none;color:var(--gray);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;padding:0;z-index:1;}
.modal-close-x:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
.modal-close-x svg{display:block;}
/* La animación de entrada se aplica SOLO con .is-entering (transitoria, la agrega/quita openModal).
   El estado por defecto del modal es visible: si la animación no corre (pestaña oculta, render headless),
   el contenido nunca queda oculto. */
@media (prefers-reduced-motion: no-preference){
  .app-modal.is-entering{animation:modalBackdropIn .16s ease;}
  .app-modal.is-entering .app-card{animation:modalCardIn .18s cubic-bezier(.2,.7,.3,1);}
}
@keyframes modalBackdropIn{from{opacity:0;}to{opacity:1;}}
@keyframes modalCardIn{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}
@media(max-width:500px){
  .app-modal{align-items:flex-end;padding:0;}
  /* hoja anclada abajo: el alto se limita a lo visible para que el teclado no la tape */
  .app-modal .app-card{width:100%;max-width:none;border-radius:16px 16px 0 0;max-height:min(90vh,calc(var(--vvh,100vh) - .5rem));padding:1.5rem 1.1rem calc(1rem + env(safe-area-inset-bottom));}
  .app-modal .modal-close-x{top:.7rem;right:.7rem;width:36px;height:36px;}
  @media (prefers-reduced-motion: no-preference){
    .app-modal.is-entering .app-card{animation:sheetIn .22s cubic-bezier(.2,.8,.2,1);}
  }
  @keyframes sheetIn{from{transform:translateY(100%);}to{transform:none;}}
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.progress-wrap{height:3px;background:var(--navy-light);}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .35s;}

/* ── SCREENS ── */
main{max-width:780px;margin:0 auto;padding:2.5rem 1.5rem 2rem;}
.screen{display:none;}.screen.active{display:block;}

/* ── HOME ── */
#scr-home{text-align:center;padding:1.2rem 1rem 2rem;}
.home-badge{display:inline-block;background:var(--gold-dim);border:1px solid rgba(201,168,76,.35);color:var(--gold);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.3rem 1rem;border-radius:20px;margin-bottom:1.4rem;}
#scr-home h1{font-family:var(--font-title);font-weight:800;font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin-bottom:.6rem;}
#scr-home h1 span{color:var(--gold);}
#scr-home .tagline{color:var(--gray);font-size:.95rem;margin-bottom:.9rem;line-height:1.6;}
.stat-hot{color:var(--gold);font-weight:700;}
.home-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;max-width:560px;margin:0 auto;}
.home-card.wide-card{grid-column:auto;max-width:none;justify-self:stretch;}
.home-card{position:relative;background:var(--navy-mid);border:2px solid var(--navy-light);border-radius:16px;padding:2rem 1.5rem;cursor:pointer;transition:border-color .2s,transform .15s,background .2s;text-align:left;}
.home-card.home-card-featured{border-color:var(--gold);background:linear-gradient(135deg,var(--navy-mid) 0%,rgba(240,179,90,.05) 100%);background:linear-gradient(135deg,var(--navy-mid) 0%,color-mix(in srgb, var(--gold) 6%, transparent) 100%);}
.home-card.home-card-featured::before{content:'PRINCIPAL';position:absolute;top:-10px;right:16px;background:var(--gold);color:var(--navy);font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;padding:.22rem .55rem;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.card-icon{font-size:2rem;margin-bottom:1rem;}
.card-title{font-family:var(--font-title);font-weight:800;font-size:1.15rem;margin-bottom:.4rem;}
.card-desc{color:var(--gray);font-size:.82rem;line-height:1.5;}
.card-meta{margin-top:1rem;font-family:var(--font-mono);font-size:.72rem;color:var(--gold);}
@media(max-width:500px){.home-cards{grid-template-columns:1fr;}.home-card:last-child{max-width:none;}.hide-on-mobile{display:none!important;}}
.study-guide-trigger{display:block;width:min(560px,100%);margin:0 auto 1rem;padding:.7rem 1rem;border-radius:999px;border:2px solid var(--navy-light);background:var(--navy-mid);color:var(--white);font-family:var(--font-title);font-size:.82rem;font-weight:700;letter-spacing:.04em;text-align:center;cursor:pointer;box-shadow:none;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;}
.study-guide-trigger strong{color:var(--white);}
.study-guide-trigger.guide-pulse{animation:guidePulse .9s ease-in-out infinite alternate;border-color:var(--gold);background:rgba(240,179,90,.12);}
@keyframes guidePulse{from{box-shadow:0 0 8px rgba(240,179,90,.14),0 0 0 1px rgba(240,179,90,.14) inset;transform:scale(1);}to{box-shadow:0 0 26px rgba(240,179,90,.55),0 0 14px rgba(240,179,90,.28);transform:scale(1.015);}}
#study-guide-modal .app-card{text-align:left;width:min(760px,94vw);max-height:min(80vh,calc(var(--vvh,100vh) - 2rem));overflow:auto;}
#study-guide-modal h3{text-align:center;}
#study-guide-modal .guide-copy{color:var(--white);line-height:1.65;}
#study-guide-modal .guide-copy .guide-cnv{background:var(--gold-dim);border:1px solid var(--gold);border-radius:10px;padding:.55rem .8rem;color:var(--white);font-size:.9rem;}
#study-guide-modal .guide-copy .guide-cnv strong{color:var(--gold-light);}
#study-guide-modal .guide-copy p{margin-bottom:.8rem;color:var(--white);}
#study-guide-modal .guide-copy .guide-hero,#study-guide-modal .guide-copy .guide-step{color:var(--white);}
#study-guide-modal .guide-copy .guide-section-title{margin-top:1.1rem;margin-bottom:.55rem;color:var(--gold);font-family:var(--font-title);font-size:1.05rem;font-weight:800;letter-spacing:.03em;}

/* ── MODULE PICKER ── */
#scr-modules{padding:1rem 0;}
.section-title{font-family:var(--font-title);font-weight:800;font-size:1.4rem;margin-bottom:.4rem;}
.section-sub{color:var(--gray);font-size:.85rem;margin-bottom:2rem;}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;}
.mod-card{background:var(--navy-mid);border:2px solid var(--navy-light);border-radius:12px;padding:1.4rem 1.5rem;cursor:pointer;transition:border-color .18s,transform .15s,background .18s;display:flex;align-items:flex-start;gap:1rem;}
.mod-num{font-family:var(--font-title);font-weight:800;font-size:1.6rem;color:var(--gold);line-height:1;flex-shrink:0;min-width:28px;}
.mod-name{font-family:var(--font-title);font-weight:700;font-size:.9rem;margin-bottom:.25rem;}
.mod-sub{color:var(--gray);font-size:.75rem;line-height:1.4;}
.mod-count{font-family:var(--font-mono);font-size:.65rem;color:var(--gold);margin-top:.4rem;}

/* ── MODULE START ── */
/* Sin padding lateral: era la unica pantalla que lo tenia, y por eso sus
   botones a ancho completo quedaban 32px mas angostos que los del resto de la
   app — se veia como si el contenido se hubiera encogido. */
#scr-mod-start{text-align:center;padding:1.5rem 0;}
#scr-mod-start h2{font-family:var(--font-title);font-weight:800;font-size:2.2rem;margin-bottom:.4rem;}
#scr-mod-start h2 span{color:var(--gold);}
#scr-mod-start .ms-sub{color:var(--gray);font-size:.9rem;margin-bottom:2rem;line-height:1.6;}
.info-grid{display:flex;gap:1rem;justify-content:center;margin-bottom:2rem;flex-wrap:wrap;}
.info-box{background:var(--navy-mid);border:1px solid var(--navy-light);padding:1rem 1.4rem;border-radius:10px;min-width:95px;}
.info-box .ib-n{font-family:var(--font-title);font-weight:800;font-size:1.6rem;color:var(--gold);}
.info-box .ib-l{font-size:.65rem;color:var(--gray);text-transform:uppercase;letter-spacing:.06em;margin-top:.2rem;}
.cfg-row{margin-bottom:2rem;}
.cfg-label{font-family:var(--font-title);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem;}
.cfg-opts{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;}
#scr-flash-pick .cfg-label{text-align:center;} /* los botones van centrados: el label acompaña */
.ms-resume-box{margin:0 auto 1.6rem;text-align:center;}
#exam-resume .ms-resume-box{margin:1.2rem auto 1.6rem;}
.cfg-btn{background:var(--navy-mid);border:2px solid var(--navy-light);color:var(--white);font-family:var(--font-body);font-size:.85rem;padding:.6rem 1.2rem;border-radius:8px;cursor:pointer;transition:all .18s;}
.cfg-btn.sel{border-color:var(--gold);background:var(--gold-dim);color:var(--gold-light);}
.cfg-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;}
.cfg-mod-wrap{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;}
.cfg-mod-chip{min-width:54px;text-align:center;padding:.5rem .8rem;}

/* ── EXAM CONFIG ── */
#scr-exam-cfg{padding:1rem 0;}
.cfg-section{margin-bottom:2rem;}
/* aviso de alcance del simulacro para el usuario free: se lee ANTES de empezar,
   no en la pantalla de resultados 45 minutos despues */
.exam-scope-note{background:var(--gold-dim);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:.65rem .85rem;margin:0 0 1rem;font-size:.82rem;line-height:1.5;color:var(--gray);}
.exam-scope-note b{color:var(--gold-light);}
.esn-link{background:none;border:0;padding:0;color:var(--gold);font-family:inherit;font-size:inherit;font-weight:700;cursor:pointer;text-decoration:underline;}
.cfg-divider{height:1px;background:var(--navy-light);margin:1.8rem 0;}

/* ── QUIZ ── */
/* nowrap + el tag elidido: el nombre largo del modulo ("Módulo II · Lavado de
   activos y financiamiento del terrorismo") no entra en 375px y partia el header
   en TRES renglones, con la banderita sola abajo a la izquierda. Es la vista mas
   usada de la app. */
.q-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;flex-wrap:nowrap;gap:.5rem;}
.q-header .q-badge{flex:0 0 auto;}
.q-header .flag-btn{flex:0 0 auto;margin-left:auto;}
.q-badge{font-family:var(--font-mono);font-size:.7rem;color:var(--gold);background:var(--gold-dim);border:1px solid rgba(201,168,76,.25);padding:.25rem .7rem;border-radius:4px;}
.q-mod-tag{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-mono);font-size:.65rem;color:var(--gray);background:var(--navy-mid);border:1px solid var(--navy-light);padding:.25rem .7rem;border-radius:4px;}
.question-card{background:var(--navy-mid);border:1px solid var(--navy-light);border-radius:14px;padding:2rem;margin-bottom:1.2rem;}
.q-text{font-size:1rem;font-weight:500;line-height:1.65;margin-bottom:1.5rem;}
.options{display:flex;flex-direction:column;gap:.6rem;}
.opt-btn{background:var(--navy);border:1px solid var(--navy-light);color:var(--white);font-family:var(--font-body);font-size:.9rem;padding:.85rem 1.1rem;border-radius:8px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s;display:flex;align-items:flex-start;gap:.8rem;line-height:1.5;width:100%;scroll-margin-top:110px;scroll-margin-bottom:34px;}
.opt-letter{font-family:var(--font-mono);font-size:.75rem;color:var(--gold);min-width:18px;margin-top:1px;font-weight:500;flex-shrink:0;}
.opt-btn.correct{background:var(--correct-bg);border-color:var(--green);color:#aaffcc;}
.opt-btn.correct .opt-letter{color:var(--green);}
.opt-btn.wrong{background:var(--wrong-bg);border-color:var(--red);color:#ffaaaa;}
.opt-btn.wrong .opt-letter{color:var(--red);}
.opt-btn.reveal{border-color:rgba(46,204,113,.25);opacity:.62;}
.opt-btn:disabled{cursor:default;}
.feedback-box{margin-top:1rem;padding:.85rem 1.1rem;border-radius:8px;font-size:.85rem;line-height:1.5;display:none;}
.feedback-box.ok{display:block;background:rgba(46,204,113,.08);border:1px solid rgba(46,204,113,.25);color:#aaffcc;}
.feedback-box.ko{display:block;background:rgba(231,76,60,.08);border:1px solid rgba(231,76,60,.25);color:#ffcccc;}
.nav-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.btn-nav{font-family:var(--font-title);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--navy-light);background:transparent;color:var(--gray);padding:.65rem 1.3rem;border-radius:6px;cursor:pointer;transition:all .15s;}
.btn-nav.gold{background:var(--gold);border-color:var(--gold);color:var(--navy);}
.btn-nav:disabled{opacity:.3;cursor:default;}
.btn-nav.hide{display:none;}

/* ── RESULTS ── */
.results-wrap{text-align:center;padding:2rem 0;}
.result-ring{width:150px;height:150px;border-radius:50%;border:3px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 1.5rem;background:var(--gold-dim);}
.res-pct{font-family:var(--font-title);font-weight:800;font-size:2.6rem;color:var(--gold);line-height:1;}
.res-sublbl{font-size:.65rem;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;margin-top:.2rem;}
.res-verdict{font-family:var(--font-title);font-weight:800;font-size:1.8rem;margin-bottom:.35rem;}
.res-verdict.pass{color:var(--green);}.res-verdict.fail{color:var(--red);}
.res-msg{color:var(--gray);font-size:.9rem;margin-bottom:1.8rem;}
.breakdown{display:flex;justify-content:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.bk-box{background:var(--navy-mid);border:1px solid var(--navy-light);padding:1rem 1.4rem;border-radius:10px;min-width:88px;}
.bk-box .bk-n{font-family:var(--font-title);font-weight:800;font-size:1.8rem;}
.bk-box .bk-l{font-size:.68rem;color:var(--gray);text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem;}
.bk-box.g .bk-n{color:var(--green);}.bk-box.r .bk-n{color:var(--red);}
.mod-breakdown{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:1.8rem;}
.mod-bk{background:var(--navy-mid);border:1px solid var(--navy-light);border-radius:8px;padding:.6rem 1rem;font-size:.78rem;text-align:left;min-width:130px;}
.mod-bk .mb-t{color:var(--gold);font-weight:600;font-size:.7rem;margin-bottom:.2rem;}
.btn-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem;}
.missed-list{text-align:left;margin-top:1.5rem;}
.missed-hdr{font-family:var(--font-title);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--navy-light);}
.missed-item{background:var(--navy-mid);border:1px solid rgba(242,108,108,.3);padding:.9rem 1.1rem;border-radius:8px;margin-bottom:.6rem;font-size:.83rem;line-height:1.5;}
.missed-item.ok{border-color:rgba(46,204,113,.32);} /* las que respondió bien */
.mi-mod{font-size:.68rem;color:var(--gray);margin-bottom:.25rem;}
.mi-q{color:var(--white);font-weight:500;margin-bottom:.35rem;}
.mi-a{color:#6ee7a0;font-family:var(--font-mono);font-size:.78rem;}
.mi-ua{color:var(--red);font-family:var(--font-mono);font-size:.78rem;margin-bottom:.2rem;}
.mi-skip{color:var(--gray-dim);font-family:var(--font-mono);font-size:.78rem;margin-bottom:.2rem;}
/* fila de navegación: separada de las acciones para que no compita con ellas */
.res-nav{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin:1rem 0 .4rem;}
.res-nav button{background:none;border:none;color:var(--gray-dim);font-family:var(--font-mono);font-size:.78rem;cursor:pointer;padding:.3rem .2rem;border-bottom:1px solid transparent;}
/* pestañas del repaso: erradas / correctas / todas */
.res-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.9rem;}
.res-tab{background:var(--navy-mid);border:1px solid var(--navy-light);color:var(--gray);border-radius:18px;padding:.38rem .8rem;font-size:.76rem;font-weight:700;font-family:var(--font-title);cursor:pointer;}
.res-tab.sel{background:var(--gold);color:var(--navy);border-color:var(--gold);}
.mod-bk{cursor:pointer;transition:border-color .15s;}
.mod-bk.sel{border-color:var(--gold);background:var(--gold-dim);}
.mod-bk-hint{width:100%;text-align:center;color:var(--gray-dim);font-size:.7rem;}

/* ── SHARED BUTTONS ── */
.btn-primary{background:var(--gold);color:var(--navy);font-family:var(--font-title);font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;border:none;padding:.9rem 2.5rem;border-radius:8px;cursor:pointer;transition:background .2s,transform .1s;}
.btn-secondary{background:transparent;color:var(--gray);font-family:var(--font-title);font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--navy-light);padding:.8rem 1.8rem;border-radius:8px;cursor:pointer;transition:all .2s;}

/* NAV BAR */
.qnav-wrap{margin-bottom:1.2rem;overflow-x:auto;padding:3px 3px 4px 3px;-webkit-overflow-scrolling:touch;touch-action:pan-x pinch-zoom;overscroll-behavior-x:contain;}
.qnav-wrap::-webkit-scrollbar{height:5px;}
.qnav-wrap::-webkit-scrollbar-track{background:var(--navy-mid);border-radius:3px;}
.qnav-wrap::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px;}
.qnav-wrap{scrollbar-width:thin;scrollbar-color:var(--gold) var(--navy-mid);}
.qnav{display:flex;gap:4px;min-width:max-content;}
.qnav-dot{width:22px;height:22px;border-radius:5px;border:1.5px solid var(--navy-light);background:var(--navy-mid);cursor:pointer;transition:all .15s;font-family:"IBM Plex Mono",monospace;font-size:.6rem;color:var(--gray);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.qnav-dot.current{border-color:var(--gold);background:var(--gold);color:var(--navy);font-weight:700;}
.qnav-dot.answered-ok{background:#0d2b1a;border-color:var(--green);color:var(--green);}
.qnav-dot.answered-ko{background:#2b0d0d;border-color:var(--red);color:var(--red);}
.qnav-dot.answered-sel{background:rgba(201,168,76,.18);border-color:var(--gold);color:var(--gold-light);}
.qnav-dot.unanswered{background:var(--navy);border-color:var(--navy-light);color:var(--gray-dim);}
.qnav-dot,.opt-btn{touch-action:manipulation;}
.opt-btn.kbd-focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,168,76,.22);}

@media(max-width:760px){
  /* V5: en simulacro cronometrado el lado derecho suma chip de usuario (118) +
     score-pill (66) + pausa (40) + engranaje (40) + reloj (60) + gaps (22) =
     ~347px sobre los ~353 utiles de un telefono de 375. A .hdr-left le quedaban
     5px y, con overflow:hidden, la casita de inicio quedaba CORTADA. Durante el
     quiz el chip de usuario no aporta nada: se esconde. */
  body.en-quiz .auth-chip{display:none !important;}
  .timer{min-width:48px;}

  /* V19: en la misma fila de 54px convivian cuadrados de 40px con pildoras de
     25px, y "← Inicio" -que es navegacion primaria- era la pieza mas chica.
     De las tres piezas se arregla SOLO el boton, a proposito:

     - .hdr-back es un boton de verdad y navegacion primaria: crece sin costo.
     - .score-pill y .timer NO se tocan. Arrancan en display:none y el JS las
       prende recien dentro del quiz, asi que poner display:inline-flex para
       centrarlas las hacia aparecer en el HOME (un reloj de 45:00 sobre la
       portada). Y darles altura por padding no sirve: en un elemento inline el
       padding vertical no empuja la linea, pero el horizontal SI ensancha, y
       ensancharlas empeora justo el desborde del header que arregla V5 arriba.
       Son indicadores, no controles: no se tocan, no necesitan area tactil.
       Para emparejarlas de verdad habria que cambiar como el JS las muestra. */
  .hdr-back{padding:.6rem .9rem;}

  /* V2: ocultos con visibility:hidden seguian ocupando lugar. En columna eso
     dejaba un boton invisible de 39px + 16px de gap colgando bajo cada pregunta,
     y en la ultima el oculto es el del medio: "Anterior" y "Ver resultados"
     separados por 71px de nada. El visibility hacia falta cuando la fila era
     horizontal y habia que reservar el hueco; en columna no. */

  /* V16: en el simulacro de 60 preguntas la tira es la forma principal de
     moverse, y errarle a un punto te manda a otra pregunta. 22px es la mitad
     del minimo tactil. La tira ya scrollea, asi que el ancho extra no cuesta. */
  .qnav-dot{width:32px;height:32px;font-size:.7rem;}
  .qnav{gap:6px;}

  /* V10: unica salida de la pantalla de resultados, y era texto pelado de 22px. */
  .res-nav button{padding:.7rem .9rem;min-height:44px;}

  /* V9: las pestanas del repaso desbordaban (363px sobre 349) y median 29px. */
  .res-tab{padding:.6rem .9rem;min-height:40px;}

  /* V6: seis chips de 54px + gaps = 372px sobre 349 disponibles: el VI caia solo
     en un segundo renglon. Y el candado, al ser contenido (::after con texto),
     ensanchaba cinco de los seis de forma despareja. Con grid quedan iguales. */
  .cfg-mod-wrap{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;}
  .cfg-mod-chip{min-width:0;padding:.55rem .2rem;}

  /* V8: tres metricas hermanas con rotulos de largo muy distinto ("SIN
     RESPONDER" mide 142px contra 112 de "CORRECTAS"): rompian 2+1 y encima
     quedaban de anchos distintos entre si. */
  .breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
  .bk-box{min-width:0;padding:.8rem .4rem;}
  .bk-box .bk-l{font-size:.6rem;letter-spacing:.02em;}

  /* V15: los unicos botones que no seguian la regla de ancho completo. Quedaban
     apilados a la izquierda, de anchos distintos y con alturas distintas. */
  .resume-actions{flex-direction:column;align-items:stretch;}
  .smart-cta,.resume-dismiss{width:100%;padding:.8rem 1rem;text-align:center;}

  /* Apilados en columna, los tres tienen que medir lo mismo. El dorado usaba
     .95rem/.9rem de padding y los otros .85rem/.8rem: sobresalia ~3px sin
     ninguna razon. Se igualaba a mano recien abajo de 420px. */

  header{padding:0 .85rem;height:56px;}
  .hdr-left{gap:.45rem;}
  .hdr-right{gap:.35rem;}
  .hdr-title{font-size:.78rem;letter-spacing:.06em;}
  .hdr-sub{font-size:.58rem;}
  header .home-btn,header .pause-btn,header .theme-btn,header .mute-btn,.q-header .flag-btn{width:40px;height:40px;}
  /* En celular no hay teclado físico, así que los atajos no aplican: el botón sólo
     ocupaba lugar y era parte de lo que empujaba la casita sobre el chip de usuario. */
  header .shortcut-btn{display:none;}
  .auth-chip{max-width:120px;overflow:hidden;text-overflow:ellipsis;}
  .score-pill,.timer{font-size:.72rem;padding:.24rem .5rem;}
  main{padding:1.35rem .95rem 1.5rem;}
  #scr-home{padding:2rem 0 .75rem;}
  #scr-home .tagline{margin-bottom:2rem;font-size:.88rem;}
  .home-cards{grid-template-columns:1fr;gap:.9rem;max-width:none;}
  .home-card{padding:1.2rem 1rem;border-radius:14px;}
  .card-icon{font-size:1.55rem;margin-bottom:.75rem;}
  .card-title{font-size:1rem;}
  .card-desc{font-size:.8rem;}
  .section-title{font-size:1.2rem;}
  .mod-grid{grid-template-columns:1fr;}
  .mod-card{padding:1.1rem 1rem;}
  .question-card,.flash-card{padding:1.2rem 1rem;}
  .q-text,.flash-q{font-size:.96rem;line-height:1.55;}
  .opt-btn{padding:.95rem .95rem;font-size:.88rem;}
  .nav-row{flex-direction:column;align-items:stretch;}
  .btn-row{gap:.7rem;}
  .btn-nav,.btn-primary,.btn-secondary,.retry-wrong-btn{width:100%;text-align:center;}
  #scr-mod-start h2{font-size:1.7rem;}
  .cfg-opts{flex-direction:column;align-items:stretch;}
  .cfg-btn{text-align:center;}
  .exam-hist-row{flex-direction:column;align-items:flex-start;gap:.2rem;}
  .shortcut-panel{left:12px;right:12px;top:64px;min-width:auto;max-width:none;}
  .app-card,#study-guide-modal .app-card{width:min(96vw,760px);}
  .snake-touch-controls{display:flex;}
}

/* 430 y no 420: los telefonos grandes (iPhone Pro Max y compania) miden 428-430
   CSS y caian JUSTO afuera, en la banda de 421-760, recibiendo la version menos
   cuidada — puntos de navegacion mas chicos que en un iPhone SE, botones
   apilados de alturas distintas. Ya habia una regla suelta a 430 (.chip-tail),
   asi que el numero correcto ya se conocia. */
@media(max-width:430px){
  header{padding:0 .7rem;height:54px;}
  .hdr-title{font-size:.72rem;}
  .hdr-sub{display:none;}
  main{padding:1.1rem .8rem 1.2rem;}
  .question-card,.flash-card{padding:1rem .85rem;}
  .home-card{padding:1rem .9rem;}
  .snake-touch-btn{width:52px;height:52px;border-radius:12px;}
}

/* ── HISTORY ── */
.hist-list{margin-top:.6rem;display:flex;flex-direction:column;gap:.2rem;}
.hist-item{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.62rem;color:var(--gray);padding:.2rem .4rem;border-radius:4px;background:var(--navy);}
.hist-item .hi-date{opacity:.7;}
.hist-item .hi-pct{font-weight:700;}
.hist-item .hi-pct.g{color:var(--green);}.hist-item .hi-pct.r{color:var(--red);}.hist-item .hi-pct.y{color:var(--gold);}
.retry-wrong-btn{background:rgba(231,76,60,.15);border:1px solid rgba(231,76,60,.4);color:#ffaaaa;font-family:var(--font-title);font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;padding:.8rem 1.8rem;border-radius:8px;cursor:pointer;transition:all .2s;}
/* ── FLAG ── */
.flag-btn{background:none;border:1px solid var(--navy-light);color:var(--gray-dim);font-size:.85rem;width:32px;height:32px;border-radius:6px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.flag-btn.flagged{border-color:var(--gold);color:var(--gold);background:var(--gold-dim);}
.qnav-dot.flagged-dot{box-shadow:0 0 0 2px var(--gold);}
.exam-hist-section{margin-top:2rem;text-align:left;}
.exam-hist-title{font-family:var(--font-title);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid var(--navy-light);}
.exam-hist-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem .6rem;border-radius:6px;background:var(--navy-mid);border:1px solid var(--navy-light);margin-bottom:.4rem;font-size:.78rem;}
.exam-hist-row .ehr-date{color:var(--gray);font-family:var(--font-mono);font-size:.68rem;}
/* en la lista de simulacros, el parcial (30 preguntas) se distingue del total */
.ehr-tipo{font-size:.62rem;color:var(--gold);border:1px solid rgba(240,179,90,.4);border-radius:6px;padding:0 .3rem;}
.exam-hist-row .ehr-pct{font-family:var(--font-title);font-weight:800;font-size:1rem;}
/* resumen arriba de la lista: acierto y duración promedio, el par que contesta
   "¿estoy listo para rendir?". Ninguno de los dos solo lo contesta. */
.exam-avg{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.7rem;}
.ea-cell{background:var(--navy-mid);border:1px solid var(--navy-light);border-radius:10px;padding:.6rem .5rem;text-align:center;}
.ea-n{display:block;font-family:var(--font-title);font-weight:800;font-size:1.35rem;line-height:1.1;color:var(--gold);}
.ea-l{display:block;font-family:var(--font-mono);font-size:.6rem;color:var(--gray);margin-top:.25rem;line-height:1.3;}
.exam-avg-tip{background:var(--gold-dim);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:.5rem .7rem;margin-bottom:.7rem;font-size:.75rem;color:var(--gray);line-height:1.45;}
.home-footer{margin-top:3rem;text-align:center;}
.footer-actions{display:flex;justify-content:center;align-items:center;gap:.6rem;flex-wrap:wrap;}
.colaborar-btn{display:inline-flex;align-items:center;gap:.45rem;background:none;border:1px solid var(--navy-light);color:var(--gray);font-family:var(--font-mono);font-size:.7rem;padding:.45rem 1rem;border-radius:6px;cursor:pointer;transition:all .15s;}
.clear-data-btn{background:none;border:1px solid var(--navy-light);color:var(--gray-dim);font-family:var(--font-mono);font-size:.7rem;padding:.45rem 1rem;border-radius:6px;cursor:pointer;transition:all .15s;}
.mod-card{position:relative;}
.mod-card.es-gratis::after{content:'GRATIS';position:absolute;bottom:.7rem;right:.9rem;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;color:var(--green);border:1px solid var(--green);border-radius:4px;padding:.1rem .35rem;}
/* 6: sin cuenta, el progreso vive SOLO en este navegador — y eso solo estaba en
   los terminos. Alguien practica una semana desde el celular, cambia de
   telefono y pierde todo sin haber tenido nunca la chance de enterarse. */
.aviso-sin-cuenta{color:var(--gray-dim);font-size:.74rem;line-height:1.5;margin:1.1rem auto 0;max-width:560px;}
.disclaimer{color:var(--gray-dim);font-size:.78rem;line-height:1.6;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--navy-light);font-style:italic;max-width:520px;margin-left:auto;margin-right:auto;}
.legal-links{margin-top:.6rem;font-size:.72rem;color:var(--gray-dim);}
.legal-links a{color:var(--gray-dim);text-decoration:underline;transition:color .15s;}
/* Viven en el home, debajo de la línea de stats: son datos de motivación, no de
   navegación. En el header la racha competía con el chip de usuario y desbordaba. */
.home-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:.45rem;}
.streak-chip{display:none;align-items:center;gap:.3rem;background:var(--gold-dim);border:1px solid var(--gold);color:var(--gold);font-family:var(--font-mono);font-size:.72rem;font-weight:600;padding:.32rem .75rem;border-radius:20px;white-space:nowrap;}
/* el tiempo es informativo, no un logro: se mantiene en gris para que el dorado
   siga significando "conseguiste algo" y la racha no pierda fuerza */
.study-chip{background:var(--navy-mid);border-color:var(--navy-light);color:var(--gray);}
/* en pantalla angosta los dos chips juntos rozan el borde: se cae la coletilla
   ("⏱ 9 h 10 min" en vez de "...de estudio") y siguen entrando en una línea */

#smart-home{display:none;}
.smart-callout{position:relative;background:linear-gradient(135deg,var(--navy-mid) 0%,rgba(240,179,90,.08) 100%);border:2px solid var(--gold);border-radius:14px;padding:1.1rem 1.2rem;margin:0 auto 1.2rem;text-align:left;max-width:560px;}
/* ✕ discreta: cierra el cartel sin tocar la práctica guardada (a diferencia de
   "Descartar", que sí la borra). Área de toque de 32px aunque el glifo sea chico. */
#resume-banner .smart-greeting,#resume-banner .smart-title{padding-right:1.4rem;}
.resume-close{position:absolute;top:.5rem;right:.5rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:8px;color:var(--gray-dim);font-size:.9rem;line-height:1;cursor:pointer;font-family:inherit;transition:color .15s,background .15s;}
.smart-greeting{color:var(--gold);font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.5rem;}
.smart-title{font-family:var(--font-title);font-weight:800;font-size:1.15rem;color:var(--white);margin-bottom:.4rem;}
.smart-sub{color:var(--gray);font-size:.88rem;line-height:1.5;margin-bottom:1rem;}
/* El margen de .smart-sub esta reservado para el boton que suele ir debajo. En
   "Mañana es el día", "Hoy rendís" y "Te quedan N días" no hay boton, y ese
   1rem sobrevivia: 21px de aire arriba y 37px abajo en un cartel de dos lineas. */
.smart-callout > :last-child{margin-bottom:0;}
.smart-cta{background:var(--gold);color:var(--navy);border:none;padding:.7rem 1.3rem;border-radius:10px;font-weight:700;font-size:.9rem;cursor:pointer;font-family:var(--font-title);transition:background .2s,transform .15s;}
.resume-actions{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;}
.resume-dismiss{background:none;border:1px solid var(--navy-light);color:var(--gray);padding:.65rem 1.1rem;border-radius:10px;font-size:.85rem;cursor:pointer;transition:all .15s;}
.resume-dismiss:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.reviews-section{margin:3rem 0 0;}
.reviews-label{font-family:var(--font-mono);font-size:.68rem;color:var(--gray);text-transform:uppercase;letter-spacing:.12em;text-align:center;margin-bottom:1.1rem;}
.reviews-marquee{overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);-webkit-mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent);mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent);}
/* Sin gap: con gap, el -50% de la animación quedaba medio gap corto y la cinta
   retrocedía de golpe en cada vuelta. El margen va en px para que ancho y
   duración (renderReviewTrack) no dependan del tamaño de letra. */
.reviews-track{display:flex;width:max-content;animation:reviewsMarquee 60s linear infinite;will-change:transform;transition:opacity .25s;}
.review-card{flex-shrink:0;width:280px;margin-right:16px;background:var(--navy-mid);border:1px solid var(--navy-light);border-radius:12px;padding:1rem 1.1rem;text-align:left;display:flex;flex-direction:column;}
.review-text{color:var(--white);font-size:.85rem;line-height:1.55;margin:0 0 .8rem;font-style:italic;}
.review-author{color:var(--gold);font-size:.74rem;font-family:var(--font-mono);font-weight:600;margin-top:auto;}
@keyframes reviewsMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.credits-mail{color:var(--gold);text-decoration:none;border-bottom:1px dashed rgba(240,179,90,.4);}
#credits-modal .app-card{text-align:center;}
#credits-modal p{margin-bottom:.25rem;}

/* ── THEME TOGGLE ── */
.theme-btn{background:none;border:1px solid var(--navy-light);color:var(--gray);font-size:.85rem;width:32px;height:32px;border-radius:6px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mute-btn{background:none;border:1px solid var(--navy-light);color:var(--gray);font-size:.85rem;width:32px;height:32px;border-radius:6px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mute-btn.muted{opacity:.4;}
.hdr-tools{position:relative;display:flex;align-items:center;}
.tools-pop{position:absolute;top:calc(100% + 8px);right:0;display:flex;gap:.55rem;background:var(--navy-mid);border:1px solid var(--navy-light);border-radius:12px;padding:.6rem .7rem;box-shadow:0 10px 28px rgba(0,0,0,.4);z-index:120;}
.tools-pop[hidden]{display:none;}
.tools-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;}
.tools-cap{font-family:var(--font-mono);font-size:.65rem;color:var(--gray);text-transform:uppercase;letter-spacing:.06em;}
/* ── ranking global del snake ── */
.snake-rank{max-width:460px;margin:1.1rem auto 0;background:var(--navy-mid);border:1px solid var(--navy-light);border-radius:12px;padding:.9rem 1.1rem;text-align:left;}
.sr-title{font-family:var(--font-mono);font-size:.7rem;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;}
.sr-top{list-style:none;padding:0;margin:0 0 .4rem;}
.sr-top li{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;border-bottom:1px dashed var(--navy-light);color:var(--gray);font-size:.85rem;}
.sr-top li:last-child{border-bottom:none;}
.sr-top li b{color:var(--gold);font-family:var(--font-mono);}
.sr-empty{color:var(--gray-dim);}
.sr-me{color:var(--white);font-size:.82rem;margin:.35rem 0;}
.sr-hint{color:var(--gray-dim);font-size:.78rem;}
.sr-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.5rem;}
#sr-alias{flex:1;min-width:150px;background:var(--navy);border:1px solid var(--navy-light);border-radius:8px;color:var(--white);padding:.45rem .6rem;font-size:.85rem;}
.sr-btn{background:var(--gold);color:var(--navy);border:none;border-radius:8px;padding:.5rem .9rem;font-weight:700;cursor:pointer;font-size:.82rem;}
.sr-btn:disabled{opacity:.6;cursor:default;}
.sr-msg{color:var(--red);font-size:.75rem;width:100%;}
/* ── modal de testimonios ── */
/* 16px exactos: por debajo de eso iOS Safari hace zoom automatico al enfocar.
   .fecha-input ya lo tenia resuelto asi; estos dos se habian quedado afuera. */
.testi-input{width:100%;background:var(--navy);border:1px solid var(--navy-light);border-radius:8px;color:var(--white);padding:.6rem .7rem;font-family:inherit;font-size:16px;margin:.7rem 0 .4rem;resize:vertical;}
.testi-radio{display:flex;align-items:center;gap:.45rem;color:var(--gray);font-size:.85rem;margin:.3rem 0;flex-wrap:wrap;}
.testi-radio input[type="radio"]{accent-color:var(--gold);}
#testi-name{background:var(--navy);border:1px solid var(--navy-light);border-radius:6px;color:var(--white);padding:.5rem .6rem;font-size:16px;flex:1;min-width:150px;}
.testi-note{font-size:.72rem;color:var(--gray-dim);margin-top:.5rem;}
.testi-check{display:flex;align-items:center;gap:.5rem;color:var(--gray);font-size:.85rem;margin:.4rem 0 .5rem;cursor:pointer;}
.testi-check input{accent-color:var(--gold);width:16px;height:16px;cursor:pointer;}
#testi-name:disabled{opacity:.45;}
.testi-sign[hidden]{display:none;}
.review-author{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .6rem;}
.review-meta{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;}
.review-badge{display:inline-flex;align-items:center;gap:.25rem;background:var(--gold-dim);color:var(--gold-light);border:1px solid var(--gold);border-radius:20px;padding:.14rem .6rem;font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;}
.review-date{color:var(--gray-dim);font-size:.66rem;font-weight:400;}
.home-notice-inner{background:linear-gradient(135deg,var(--navy-mid) 0%,rgba(240,179,90,.10) 100%);border:2px solid var(--gold);border-radius:14px;padding:1.1rem 1.2rem;margin:0 auto 1.2rem;max-width:560px;color:var(--white);font-size:.88rem;text-align:center;}
#testi-modal .testi-err{color:var(--red);font-size:.8rem;min-height:1.1em;margin-top:.3rem;}
.testi-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .7rem;}
.testi-chips[hidden]{display:none;}
.testi-chip{background:var(--navy);border:1px solid var(--navy-light);color:var(--gray);border-radius:20px;padding:.42rem .95rem;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit;}
.testi-chip.sel{background:var(--gold);color:var(--navy);border-color:var(--gold);}
.exam-report-btn{display:block;width:min(560px,100%);margin:0 auto 1.2rem;padding:1.1rem 1.2rem;border-radius:14px;border:2px solid var(--gold);background:rgba(240,179,90,.12);color:var(--white);font-family:var(--font-title);font-weight:800;font-size:.95rem;cursor:pointer;transition:transform .18s,background .18s;}
.exam-report-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.shortcut-btn{background:none;border:1px solid var(--navy-light);color:var(--gray);font-size:.85rem;width:32px;height:32px;border-radius:6px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-mono);font-weight:700;}
.shortcut-panel{position:fixed;top:72px;right:14px;z-index:260;min-width:250px;max-width:320px;background:var(--navy-mid);border:1px solid var(--navy-light);border-radius:10px;padding:.8rem .9rem;box-shadow:0 8px 24px rgba(0,0,0,.22);}
.shortcut-panel[hidden]{display:none;}
.shortcut-title{font-family:var(--font-title);font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem;}
.shortcut-list{display:flex;flex-direction:column;gap:.3rem;}
.shortcut-item{display:flex;justify-content:space-between;gap:.8rem;font-size:.76rem;color:var(--white);}
.shortcut-item kbd{font-family:var(--font-mono);font-size:.68rem;background:var(--navy);border:1px solid var(--navy-light);border-radius:5px;padding:.15rem .35rem;color:var(--gold);white-space:nowrap;}
.shortcut-item span{color:var(--gray);text-align:right;}

/* ── LIGHT THEME ── */
body.light{
  --navy:#f0f2f5;--navy-mid:#ffffff;--navy-light:#d8dce3;
  --white:#1a1a2e;--gray:#566075;--gray-dim:#6b7280;
  --gold:#8a5e22;--gold-light:#6f4a18;--gold-dim:rgba(138,94,34,.16);
  --correct-bg:#e6f9ee;--wrong-bg:#fde8e8;
  /* El tema claro redefinia todo MENOS el verde y el rojo, que quedaban con los
     valores del tema oscuro. Medido: la respuesta de la flashcard daba 1,77:1
     sobre su fondo (AA pide 4,5) — o sea invisible. Se habian parcheado a mano
     tres casos puntuales (.opt-btn.correct, .feedback-box, .mi-a) y ahi termino.
     Ahora: 4,92:1 y 6,68:1. */
  --green:#1a7a3a;--red:#b32020;
}
/* El unico con color fijo en vez de variable: #ffaaaa sobre rosa claro daba
   1,54:1 y el boton desaparecia. Ahora 7,91:1. */
body.light .retry-wrong-btn{color:#8b1a1a;}
body.light header{box-shadow:0 1px 4px rgba(0,0,0,.08);}
body.light .opt-btn.correct{color:#0d5f2a;}
body.light .opt-btn.wrong{color:#8b1a1a;}
body.light .opt-btn.kbd-focus{box-shadow:0 0 0 2px rgba(138,101,24,.22);}
body.light .feedback-box.ok{color:#1a7a3a;background:rgba(46,204,113,.1);border-color:rgba(46,204,113,.3);}
body.light .feedback-box.ko{color:#8b1a1a;background:rgba(231,76,60,.08);border-color:rgba(231,76,60,.25);}
body.light .mi-a{color:#1a7a3a;}
body.light .flag-btn{border-color:#b0892f;color:#8a6518;background:rgba(176,137,47,.14);}
body.light .flag-btn.flagged{border-color:#8a6518;color:#6f5012;background:rgba(176,137,47,.30);box-shadow:0 0 0 2px rgba(176,137,47,.25) inset;}
body.light .qnav-dot.flagged-dot{box-shadow:0 0 0 2px #8a6518, 0 0 0 4px rgba(176,137,47,.24);}

/* ── FLASHCARD ── */
.flash-card{background:var(--navy-mid);border:2px solid var(--navy-light);border-radius:16px;padding:2.5rem 2rem;min-height:200px;cursor:pointer;transition:border-color .2s,transform .15s;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;user-select:none;}
.flash-q{font-size:1.05rem;font-weight:500;line-height:1.65;color:var(--white);}
.flash-a{font-family:var(--font-mono);font-size:.88rem;color:var(--green);line-height:1.5;padding:1rem;background:var(--correct-bg);border:1px solid rgba(46,204,113,.25);border-radius:8px;width:100%;text-align:left;}
/* sin margin-top: se sumaba al gap del flex padre, asi que la pista quedaba a
   1,5rem de la pregunta y la respuesta revelada a 1rem — el contenido saltaba
   al revelar, siendo dos estados del mismo lugar. */
.flash-hint{font-size:.74rem;color:var(--gray-dim);}
.flash-card[aria-disabled="true"]{cursor:default;transform:none;border-color:var(--navy-light);}
.flash-card[aria-disabled="true"]:not(.flash-loading){display:none;}
.flash-unavailable .flash-counter-row,.flash-unavailable .nav-row{display:none;}
.flash-loading::before,.flash-loading::after{content:"";display:block;height:1rem;width:85%;border-radius:6px;background:var(--navy-light);animation:flash-pulse 1.4s ease-in-out infinite alternate;}
.flash-loading::after{width:55%;}
#flash-status{color:var(--gray);text-align:center;font-size:.85rem;line-height:1.5;}
#flash-status:not(:empty){margin-top:1rem;}
#flash-recovery:not([hidden]){display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem;}
.flash-index-btn:disabled{opacity:.45;cursor:default;}
@keyframes flash-pulse{to{opacity:.4;}}
@media(prefers-reduced-motion:reduce){.flash-loading::before,.flash-loading::after{animation:none;}}
.flash-counter-row{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1rem;}
.flash-counter-row .flash-counter{margin-bottom:0;}
.flash-index-btn{display:inline-flex;align-items:center;min-height:40px;background:var(--navy-mid);border:1px solid var(--navy-light);color:var(--gray);border-radius:20px;padding:.5rem .9rem;font-size:.72rem;font-family:var(--font-mono);cursor:pointer;}
#flash-index-modal .app-card{text-align:left;width:min(520px,94vw);}
.flash-index-search{width:100%;background:var(--navy);border:1px solid var(--navy-light);border-radius:8px;color:var(--white);padding:.55rem .7rem;font-family:inherit;font-size:.9rem;margin:.3rem 0 .7rem;}
/* con el teclado abierto (se usa el buscador) el alto visible se achica: la lista
   se limita a lo que queda libre para que el input no quede tapado */
.flash-index-list{max-height:min(55vh,calc(var(--vvh,100vh) - 14rem));overflow-y:auto;display:flex;flex-direction:column;gap:.3rem;}
.flash-index-item{width:100%;text-align:left;font-family:inherit;background:var(--navy);border:1px solid var(--navy-light);border-radius:8px;padding:.5rem .65rem;font-size:.82rem;color:var(--gray);cursor:pointer;line-height:1.4;}
.flash-index-item:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
#flash-bookmark{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:1rem;color:var(--gray);font-size:.8rem;}
#flash-bookmark[hidden]{display:none;}
.flash-index-item.cur{border-color:var(--gold);color:var(--white);background:var(--gold-dim);}
.flash-index-item b{color:var(--gold);font-family:var(--font-mono);font-weight:700;margin-right:.4rem;}
.flash-index-empty{color:var(--gray-dim);font-size:.85rem;text-align:center;padding:1rem 0;}
.flash-counter{font-family:var(--font-mono);font-size:.75rem;color:var(--gold);margin-bottom:1rem;}


/* ── SNAKE BREAK ── */
#scr-snake{padding:1rem 0;}
.snake-wrap{background:var(--navy-mid);border:1px solid var(--navy-light);border-radius:16px;padding:1rem;}
.snake-top{display:flex;justify-content:space-between;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.8rem;}
.snake-stats{display:flex;gap:.6rem;flex-wrap:wrap;}
.snake-pill{font-family:var(--font-mono);font-size:.72rem;border:1px solid var(--navy-light);padding:.3rem .55rem;border-radius:999px;background:var(--navy);}
.snake-pill b{color:var(--gold);} 
.snake-pill b.warn{color:var(--red);font-weight:800;}
.snake-state{font-family:var(--font-title);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gray);}
.snake-board{position:relative;border:1px solid var(--navy-light);border-radius:12px;overflow:hidden;background:radial-gradient(circle at 30% 20%,rgba(201,168,76,.08),transparent 40%),var(--navy);}
#snake-canvas.borders-on{outline:2px solid var(--gold);outline-offset:-2px;box-shadow:0 0 0 1px rgba(240,179,90,.35) inset,0 0 14px rgba(240,179,90,.18);}
#snake-canvas{display:block;width:100%;max-width:340px;aspect-ratio:1 / 1;margin:0 auto;image-rendering:pixelated;}
.snake-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,22,40,.78);backdrop-filter:blur(1px);}
.snake-overlay.show{display:flex;}
.snake-card{padding:1rem 1.2rem;background:var(--navy-mid);border:1px solid var(--gold);border-radius:10px;text-align:center;}
.snake-card h3{font-family:var(--font-title);font-weight:800;color:var(--gold);font-size:1.1rem;margin-bottom:.4rem;}
.snake-card p{font-size:.8rem;color:var(--gray);margin-bottom:.8rem;white-space:pre-line;}
.snake-btn-row{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:.9rem;}
.snake-btn{font-family:var(--font-mono);font-size:.72rem;background:var(--navy);border:1px solid var(--navy-light);color:var(--white);padding:.45rem .7rem;border-radius:8px;cursor:pointer;transition:all .15s;}
.snake-btn.primary{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:700;}
.snake-btn.active{background:var(--gold-dim);border-color:var(--gold);color:var(--gold-light);box-shadow:0 0 0 1px rgba(240,179,90,.28) inset;}
.snake-foot{margin-top:.7rem;color:var(--gray);font-size:.74rem;text-align:center;}
.snake-touch-controls{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.45rem;margin-top:.9rem;}
.snake-touch-mid{display:flex;gap:.7rem;align-items:center;justify-content:center;}
.snake-touch-btn{width:56px;height:56px;border-radius:14px;border:1px solid var(--navy-light);background:var(--navy);color:var(--gold-light);font-family:var(--font-title);font-size:1.15rem;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;box-shadow:0 6px 14px rgba(0,0,0,.18);}
.snake-touch-btn:active{transform:scale(.97);background:var(--gold-dim);border-color:var(--gold);}
@media (hover:none) and (pointer:coarse){
  .home-card[onclick="showScreen('scr-snake')"]{display:none!important;}
}
@media (hover:hover) and (pointer:fine){
  .snake-touch-controls{display:none;}
}
/* ── RADIOGRAPHY ── */
.radio-wrap{margin-top:1.5rem;text-align:left;}
.cfg-ayuda{font-size:.72rem;color:var(--gray-dim);line-height:1.5;margin-bottom:.55rem;}
.radio-leyenda{font-size:.7rem;color:var(--gray-dim);line-height:1.5;margin-bottom:.7rem;}
.mazo-regla{display:block;font-size:.68rem;color:var(--gray-dim);line-height:1.4;margin-top:.2rem;}
.radio-title{font-family:var(--font-title);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem;}
/* Grid y no flex: con min-width, apenas el contenido pasaba el minimo la
   columna crecia y EMPUJABA la barra ("55% · 7 resp." mide el triple que "80%";
   "10 h 45 min" mas que 62px). Quedaban seis barras de largos distintos, o sea
   que comparar modulos a ojo daba mal — que es exactamente para lo que sirve. */
.radio-bar-row{display:grid;grid-template-columns:70px 1fr 44px 66px;align-items:center;gap:.6rem;margin-bottom:.5rem;font-size:.78rem;}
.radio-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gray);font-family:var(--font-mono);font-size:.68rem;}
.radio-bar{flex:1;height:10px;background:var(--navy);border-radius:5px;overflow:hidden;}
.radio-bar-fill{height:100%;border-radius:5px;transition:width .4s;}
.radio-pct{min-width:0;white-space:nowrap;text-align:right;font-family:var(--font-mono);font-size:.72rem;font-weight:700;}
/* el tiempo acompaña al acierto, no compite: gris y más chico. Ancho fijo para que
   la columna quede alineada aunque unos módulos tengan tiempo y otros no. */
.radio-time{min-width:0;text-align:right;color:var(--gray-dim);font-family:var(--font-mono);font-size:.66rem;white-space:nowrap;}
/* mazo de "las que se te escapan" */
.mazo-box{display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;max-width:560px;margin:.9rem auto 0;padding:.7rem 1rem;background:var(--navy-mid);border:1px solid var(--navy-light);border-radius:12px;}
.mazo-txt{font-family:var(--font-mono);font-size:.78rem;color:var(--gray);}
.mazo-txt{line-height:1.35;}
.mazo-txt b{color:var(--gold);font-size:.95rem;}
.mazo-btn{background:none;border:1px solid var(--gold);color:var(--gold);border-radius:8px;padding:.4rem .9rem;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;}
/* circuito de fecha de examen */
#fecha-input{width:100%;font-size:16px;padding:.7rem .8rem;margin:.9rem 0 .2rem;background:var(--navy);color:var(--white);border:1px solid var(--navy-light);border-radius:8px;color-scheme:dark;}
#fecha-input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
body.light #fecha-input{color-scheme:light;}
.fecha-aviso{font-size:.76rem;color:var(--gray-dim);margin:.5rem 0 0;line-height:1.45;}
.fecha-chip{display:none;align-items:center;gap:.3rem;background:var(--navy-mid);border:1px solid var(--navy-light);color:var(--gray);font-family:var(--font-mono);font-size:.72rem;font-weight:600;padding:.32rem .75rem;border-radius:20px;white-space:nowrap;}
.fecha-chip.cerca{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}
/* ahora es un boton: sin esto heredaba el look del navegador y perdia la
   tipografia y el borde del chip */
.fecha-chip{cursor:pointer;font-family:var(--font-mono);appearance:none;-webkit-appearance:none;}
/* la fecha ya paso: ambar, para que se lea como "falta algo tuyo" y no como
   la cuenta regresiva */
.barra-offline{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--navy-light);color:var(--white);font-size:.78rem;text-align:center;padding:.6rem .8rem;border-top:1px solid var(--gold);}
.fecha-chip.vencida{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}
/* sin fecha (la borró): borde punteado, un lugar vacío para volver a cargarla */
.fecha-chip.sin-fecha{border-style:dashed;}
/* Material de estudio: link a la guía oficial en PDF, abajo de los módulos */
.guia-oficial{text-align:center;margin:1.4rem 0 0;font-size:.82rem;}
.guia-oficial a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(240,179,90,.35);padding-bottom:1px;}
.guia-oficial a:hover,.guia-oficial a:focus-visible{border-bottom-color:var(--gold);}
.fecha-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.radio-tip{font-size:.78rem;color:var(--gray);margin-top:.8rem;padding:.7rem .85rem;background:var(--gold-dim);border-radius:8px;border:1px solid rgba(240,179,90,.25);}
.hardcore-best-chip{display:block;margin-top:.45rem;font-size:.72rem;font-weight:700;color:var(--gold);opacity:.9;}
/* ── CONFETTI ── */
.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:300;overflow:hidden;}
.confetti-piece{position:absolute;top:-10px;width:10px;height:16px;opacity:0;animation:confettiFall linear forwards;}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1;}
  20%{opacity:1;}
  100%{transform:translateY(105vh) rotate(720deg) scale(0.4);opacity:0;}
}

/* ── UPSELL AL TERMINAR (free, post-resultados, no bloquea) ── */
.res-upsell-card{background:linear-gradient(135deg,var(--navy-mid) 0%,rgba(240,179,90,.08) 100%);border:2px solid var(--gold);border-radius:14px;padding:1.2rem 1.4rem;margin:0 auto 1.6rem;max-width:480px;text-align:left;}
.res-upsell-card .ruc-title{font-family:var(--font-title);font-weight:800;font-size:1.05rem;color:var(--white);margin-bottom:.4rem;}
.res-upsell-card .ruc-sub{color:var(--gray);font-size:.86rem;line-height:1.5;margin-bottom:1rem;}
.res-upsell-card .ruc-btn{background:var(--gold);color:var(--navy);border:none;padding:.7rem 1.3rem;border-radius:10px;font-weight:700;font-size:.9rem;cursor:pointer;font-family:var(--font-title);transition:background .2s,transform .15s;}

/* ── ACCESIBILIDAD: foco visible + movimiento reducido ── */
.home-card:focus-visible,.mod-card:focus-visible,.flash-card:focus-visible,.opt-btn:focus-visible,.cfg-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.home-btn:focus-visible,.theme-btn:focus-visible,.mute-btn:focus-visible,.shortcut-btn:focus-visible,.pause-btn:focus-visible,.flag-btn:focus-visible,.hdr-back:focus-visible,.auth-chip:focus-visible,.qnav-dot:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-nav:focus-visible,.smart-cta:focus-visible,.colaborar-btn:focus-visible,.retry-wrong-btn:focus-visible,.clear-data-btn:focus-visible,.study-guide-trigger:focus-visible,.ruc-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reviews-track{animation:none!important;}
  .study-guide-trigger.guide-pulse{animation:none!important;}
  .confetti-container{display:none!important;}
}

/* Hoja al ras en celular para los dos modales que fijan su ancho con el ID en el
   selector (#flash-index-modal, #study-guide-modal). Tienen la misma
   especificidad que la regla general de .app-modal .app-card, así que gana la que
   aparece última: por eso este bloque va al FINAL de la hoja y no junto a las
   demás reglas de celular. Sin esto quedaban flotando al medio, con una franja de
   fondo a cada lado y las esquinas de abajo cuadradas contra el borde. */
@media(max-width:500px){
  #flash-index-modal .app-card,#study-guide-modal .app-card{width:100%;max-width:none;border-radius:16px 16px 0 0;max-height:min(90vh,calc(var(--vvh,100vh) - .5rem));}
}

/* ══ BOTONES APILADOS, TODOS DEL MISMO ALTO ══
   Tiene que ir ACA y no en el bloque movil de arriba: .retry-wrong-btn se define
   mas abajo que aquel, asi que su padding de .8rem le ganaba y quedaba 1px mas
   bajo que los otros dos. El dorado ademas va sin borde y los otros con 1px, lo
   que por si solo ya daba otro pixel de diferencia: el borde transparente iguala
   la caja sin cambiar como se ve. */
@media(max-width:760px){
  .btn-primary,.btn-secondary,.retry-wrong-btn{padding:.85rem 1rem;font-size:.85rem;min-height:46px;}
  .btn-primary{border:1px solid transparent;}
}

/* ══ HOVER: SOLO CON PUNTERO FINO ══
   En touch no hay hover, pero el navegador aplica el estado al TOCAR y lo deja
   pegado: tocabas una tarjeta del home, entrabas, volvias, y seguia dorada y
   levantada como si el mouse estuviera encima. En la flashcard era permanente,
   porque se toca para revelar. El patron correcto ya estaba en el proyecto (los
   controles del snake) pero se habia usado una sola vez.
   Van al final a proposito: entre ellas conservan su orden original, y quedar
   despues del resto es lo que corresponde para un estado. */
@media (hover:hover) and (pointer:fine){
  *::-webkit-scrollbar-thumb:hover{background:var(--gray-dim);}
  .home-btn:hover{border-color:var(--gold);}
  .hdr-back:hover{border-color:var(--gold);color:var(--gold);}
  .pause-btn:hover{border-color:var(--gold);color:var(--gold);}
  .modal-close-x:hover{color:var(--white);background:var(--navy-light);}
  .home-card:hover{border-color:var(--gold);background:rgba(201,168,76,.05);transform:translateY(-2px);}
  .home-card.home-card-featured:hover{background:linear-gradient(135deg,var(--navy-mid) 0%,rgba(240,179,90,.1) 100%);background:linear-gradient(135deg,var(--navy-mid) 0%,color-mix(in srgb, var(--gold) 10%, transparent) 100%);}
  .study-guide-trigger:hover{transform:translateY(-1px);border-color:var(--gold);box-shadow:0 0 18px rgba(240,179,90,.14);}
  .mod-card:hover{border-color:var(--gold);background:rgba(201,168,76,.05);transform:translateY(-1px);}
  .cfg-btn:hover{border-color:var(--gold);}
  .opt-btn:hover:not(:disabled){border-color:var(--gold);background:rgba(201,168,76,.06);}
  .btn-nav:hover:not(:disabled){border-color:var(--gold);color:var(--gold);}
  .btn-nav.gold:hover:not(:disabled){background:var(--gold-light);color:var(--navy);}
  .res-nav button:hover{color:var(--gold);border-bottom-color:var(--gold);}
  .res-tab:hover{border-color:var(--gold);color:var(--gold);}
  .res-tab.sel:hover{color:var(--navy);}
  .mod-bk:hover{border-color:var(--gold);}
  .btn-primary:hover{background:var(--gold-light);transform:translateY(-1px);}
  .btn-secondary:hover{border-color:var(--gold);color:var(--gold);}
  .qnav-wrap::-webkit-scrollbar-thumb:hover{background:var(--gold-light);}
  .qnav-dot:hover{border-color:var(--gold);}
  .retry-wrong-btn:hover{background:rgba(231,76,60,.25);border-color:var(--red);}
  .flag-btn:hover{border-color:var(--gold);color:var(--gold);}
  .colaborar-btn:hover{border-color:var(--gold);color:var(--gold);}
  .clear-data-btn:hover{border-color:var(--red);color:var(--red);}
  .legal-links a:hover{color:var(--gold);}
  .resume-close:hover{color:var(--gold);background:rgba(201,168,76,.1);}
  .smart-cta:hover{background:var(--gold-light);transform:translateY(-1px);}
  .resume-dismiss:hover{border-color:var(--gold);color:var(--gold);}
  .reviews-marquee:hover .reviews-track{animation-play-state:paused;}
  .credits-mail:hover{border-bottom-color:var(--gold);}
  .theme-btn:hover{border-color:var(--gold);color:var(--gold);}
  .mute-btn:hover{border-color:var(--gold);color:var(--gold);}
  .sr-btn:hover{background:var(--gold-light);}
  .testi-chip:hover{border-color:var(--gold);color:var(--gold);}
  .exam-report-btn:hover{background:rgba(240,179,90,.2);transform:translateY(-1px);}
  .shortcut-btn:hover{border-color:var(--gold);color:var(--gold);}
  body.light .flag-btn:hover{border-color:#8a6518;color:#6f5012;background:rgba(176,137,47,.22);}
  .flash-card:hover{border-color:var(--gold);transform:translateY(-1px);}
  .flash-index-btn:hover{border-color:var(--gold);color:var(--gold);}
  .flash-index-item:hover{border-color:var(--gold);}
  .snake-btn:hover{border-color:var(--gold);color:var(--gold);}
  .snake-btn.primary:hover{background:var(--gold-light);}
  .mazo-btn:hover{background:var(--gold);color:var(--navy);}
  .res-upsell-card .ruc-btn:hover{background:var(--gold-light);transform:translateY(-1px);}
}
/* ══ Controles visibles y estilo original — revisión v58 ══ */
main{max-width:1200px;}
.screen{max-width:900px;margin-inline:auto;}
#scr-home,#scr-modules,#scr-flash-pick{max-width:none;}
header{height:auto;min-height:72px;padding:.65rem max(.85rem,calc((100% - 1152px)/2));gap:.7rem;flex-wrap:wrap;align-items:flex-start;}
.hdr-left{overflow:visible;gap:.6rem;flex:1 1 180px;}
.hdr-titles{overflow:visible;padding:0;}
.hdr-title{white-space:normal;overflow:visible;text-overflow:clip;font-size:1rem;line-height:1.3;overflow-wrap:break-word;}
#hdr-title:focus{outline:none;}
.hdr-sub{font-size:.7rem;line-height:1.4;margin-top:.15rem;}
.hdr-left{min-height:44px;}
.hdr-back{align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.5rem .7rem;flex:none;font-size:.72rem;border-radius:8px;}
.nav-icon{width:1.15em;height:1.15em;vertical-align:-.18em;flex-shrink:0;}
button>.nav-icon:last-child{margin-left:.35em;}
.hdr-back>.nav-icon{width:18px;height:18px;margin:0;}
.hdr-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.hdr-right{display:grid;grid-template-columns:minmax(0,220px) auto;align-items:start;column-gap:.65rem;row-gap:.2rem;}
.header-controls{display:flex;align-items:center;gap:.4rem;}
.header-controls{grid-column:2;grid-row:1;}
.header-controls button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--navy-light);border-radius:8px;background:var(--navy);color:var(--white);font-size:1rem;cursor:pointer;}
.header-controls button:hover{border-color:var(--gold);background:var(--gold-dim);}
.header-controls button:focus-visible,.flash-restart:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.header-controls .mute-btn.muted{opacity:1;color:var(--gray);}
/* La cuenta y "Sincronizado" van apilados y centrados entre sí, al lado de la
   tuerca. Antes el estado ocupaba toda la segunda fila alineado a la derecha:
   quedaba abajo de la tuerca, corrido respecto del nombre. */
#header-account{display:flex;flex-direction:column;align-items:center;row-gap:.2rem;grid-column:1;grid-row:1;justify-self:end;min-width:0;max-width:100%;}
#header-account .auth-chip{font-size:.72rem;padding:.5rem .7rem;border-radius:8px;min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip;line-height:1.3;}
#header-account #progress-status{font-size:.65rem;padding:.1rem .15rem;border:0;min-height:22px;color:var(--gray);}
#header-account .auth-chip[hidden],.header-session[hidden],.sync-attention[hidden],.flash-restart[hidden]{display:none!important;}
body.en-quiz #header-account{display:none;}
body.en-quiz .hdr-right{grid-template-columns:auto;}
body.en-quiz .header-controls{grid-column:1;}
.settings-wrap{position:relative;}
.settings-panel{position:absolute;top:calc(100% + .55rem);right:0;width:280px;max-width:calc(100vw - 1.7rem);padding:.8rem;border:1px solid var(--navy-light);border-radius:12px;background:var(--navy-mid);box-shadow:0 10px 28px rgba(0,0,0,.3);}
.settings-panel[hidden]{display:none;}
.settings-panel{max-height:calc(100dvh - 170px);overflow-y:auto;overscroll-behavior:contain;}
.settings-title{font-family:var(--font-mono);font-size:.75rem;color:var(--gold);margin:0 0 .5rem;}
.settings-panel button{display:flex;width:100%;height:auto;min-height:48px;justify-content:flex-start;gap:.7rem;padding:.6rem;border-color:transparent;background:transparent;font: .85rem var(--font-body);text-align:left;}
.settings-panel .setting-icon{width:32px;flex:none;text-align:center;font:1rem var(--font-mono);}
.settings-panel .setting-copy{display:flex;flex-direction:column;gap:.1rem;}
.settings-panel .setting-value{font-size:.73rem;color:var(--gray);}
#settings-btn{background:transparent;}
#settings-btn:hover,#settings-btn[aria-expanded="true"]{background:var(--gold-dim);}
#settings-btn[aria-expanded="true"]{border-color:var(--gold);color:var(--gold);}
#settings-btn .nav-icon{width:17px;height:17px;margin:0;}
.header-session{display:flex;flex-basis:100%;align-items:center;justify-content:flex-end;gap:.65rem;border-top:1px solid var(--navy-light);padding-top:.5rem;}
.header-session .score-pill{margin-right:auto;font-size:.8rem;}
.header-session .timer{font-size:1rem;font-variant-numeric:tabular-nums;}
.header-session .pause-btn{width:44px;height:44px;border-radius:8px;}
.sync-attention{display:block;margin:.5rem auto 0;max-width:calc(100% - 2rem);padding:.5rem .7rem;border:1px solid var(--gold);border-radius:8px;background:var(--navy-mid);color:var(--gold);font:.8rem var(--font-body);cursor:pointer;}
.btn-primary,.btn-secondary,.btn-nav,.retry-wrong-btn,.flash-index-btn,.cfg-btn,.smart-cta,.resume-dismiss,.esn-link,.ruc-btn{min-height:44px;line-height:1.4;}
.btn-primary,.btn-secondary,.btn-nav,.retry-wrong-btn{border-radius:8px;padding:.8rem 1.1rem;}
.btn-primary,.smart-cta{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;}
.btn-primary>.nav-icon,.smart-cta>.nav-icon{flex:none;margin:0;}
.flash-index-btn{border-radius:8px;padding:.55rem .85rem;}
#scr-flash .nav-row,#scr-quiz .nav-row{display:flex;flex-direction:row;align-items:stretch;gap:.65rem;}
#scr-flash .nav-row>.btn-nav,#scr-quiz .nav-row>.btn-nav{width:auto;flex:1;min-width:0;}
#scr-flash .nav-row>.btn-nav:not(.hide),#scr-quiz .nav-row>.btn-nav:not(.hide){display:flex;align-items:center;justify-content:center;gap:.3rem;padding-inline:.55rem;}
.nav-row>.btn-nav>.nav-icon{margin:0;}
.flash-counter-row{justify-content:space-between;gap:.6rem;}
#flash-bookmark{margin:.65rem 0 0;font-size:.75rem;line-height:1.4;}
.flash-restart{display:block;margin:.55rem 0 0;padding:.5rem .7rem;border:1px solid var(--navy-light);border-radius:8px;background:transparent;color:var(--gray);font-size:.8rem;cursor:pointer;}
.flash-card{margin-top:1rem;}
.flash-hint{font-size:.82rem;color:var(--gray);}
.config-summary{color:var(--gray);font-size:.8rem;line-height:1.5;}
.config-summary:empty{display:none;}
.practice-options,.exam-options{text-align:left;margin:1.2rem 0;}
.practice-options .cfg-opts,.exam-options .cfg-opts,.exam-options .cfg-mod-wrap{justify-content:flex-start;}
.practice-options .cfg-label,.exam-options .cfg-label{font-size:.8rem;}
#scr-home{padding:.8rem 0 1.25rem;}
#scr-home h1{text-align:center;margin-bottom:.7rem;}
#scr-home .tagline{text-align:center;font-size:.9rem;line-height:1.6;}
.home-chips{justify-content:center;}
.home-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:none;margin:1.25rem 0;}
.home-card{display:block;width:100%;color:var(--white);font-family:var(--font-body);padding:1.5rem;border-radius:14px;text-align:left;}
.home-card .card-icon,.home-card .card-title,.home-card .card-desc,.home-card .card-meta{display:block;}
.home-card .card-icon{font-size:2rem;margin-bottom:.75rem;}
.home-card .card-title{font-size:1.1rem;line-height:1.35;}
.home-card .card-meta{line-height:1.5;}
.home-card.exam-card{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:start;}
.home-card.exam-card .card-icon{grid-row:1 / 4;align-self:center;margin:0;font-size:2.4rem;}
.home-card.exam-card .card-meta{margin-top:.65rem;}
.study-guide-trigger{display:flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;min-height:44px;margin:1rem auto 1.5rem;padding:.65rem 1.1rem;border:1px solid var(--navy-light);border-radius:8px;background:var(--navy-mid);text-align:center;animation:none;box-shadow:none;font-size:.85rem;}
.study-guide-trigger:hover{border-color:var(--gold);background:var(--gold-dim);transform:none;box-shadow:none;}
#smart-home .smart-callout,#resume-banner .smart-callout,#scr-home .mazo-box,#scr-home .unlock-hero,#scr-home .pago-pending-banner{width:100%;max-width:none;}
.smart-callout{border-radius:14px;}
.smart-sub{line-height:1.6;}
.home-footer{margin-top:1.75rem;}
#home-progress{margin:1.5rem 0;}
#home-progress .footer-actions{margin-top:24px;}
#home-progress .footer-actions[hidden]{display:none;}
.reviews-section{margin:2rem 0 0;}
.reviews-marquee{width:calc(100vw - 2rem);margin-left:calc(50% - 50vw + 1rem);}
.home-secondary{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem;}
.home-secondary + #exam-report-cta{margin-top:1rem;}
.home-secondary button{background:transparent;border:1px solid var(--navy-light);border-radius:8px;color:var(--gray);padding:.55rem .8rem;min-height:40px;cursor:pointer;}
#res-btns{display:block;margin-top:1.2rem;}
#res-btns>.btn-primary{width:100%;}
#res-nav{display:block;margin:.6rem 0 1rem;}
.result-options{margin:0;text-align:left;border-top:1px solid var(--navy-light);border-bottom:1px solid var(--navy-light);}
.result-options>summary{padding:.9rem .25rem;min-height:44px;cursor:pointer;font-size:.9rem;}
.menu-item{display:block;width:100%;min-height:44px;padding:.7rem;border:0;background:transparent;color:var(--white);text-align:left;cursor:pointer;}
.menu-item:hover{background:var(--gold-dim);}
.menu-item:focus-visible,.result-options>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media(max-width:760px){.header-controls .shortcut-btn{display:none;}}
@media(min-width:900px){#scr-modules .mod-grid,#scr-flash-pick .mod-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:600px){
  header{display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px;align-items:center;padding:6px 10px;gap:4px 8px;min-height:0;}
  .hdr-left,.hdr-right{display:contents;}
  .hdr-back{grid-column:1;grid-row:1;width:44px;padding:0;}
  .hdr-back>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  .hdr-titles{grid-column:2;grid-row:1;}
  #hdr-back:not([style*="inline-flex"])+.hdr-titles{grid-column:1 / 3;}
  .header-controls{grid-column:4;grid-row:1;gap:0;}
  /* Cuenta y tuerca en la misma fila. El "Sincronizado" no entra: los problemas
     ya se avisan con el punto rojo del chip y el cartel #sync-attention. */
  #header-account{display:flex;flex-direction:row;grid-column:3;grid-row:1;align-items:center;min-width:0;}
  #header-account #auth-chip{flex:none;max-width:34vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #header-account #progress-status{display:none;}
  .header-controls .home-btn,.header-controls .shortcut-btn{display:none!important;}
  body.en-quiz .hdr-right{display:contents;}
  body.en-quiz .header-controls{grid-column:4;}
  .header-session{grid-column:1 / -1;grid-row:2;gap:.5rem;padding-top:4px;}
  .hdr-title{font-size:.92rem;}
  .hdr-sub{font-size:.65rem;}
  main{padding:1.3rem .9rem 1.5rem;}
  .q-header{gap:.35rem;}
  .q-header .q-badge,.q-header .q-mod-tag{padding-inline:.4rem;}
  .q-header .q-mod-tag{flex:0 0 auto;}
  .q-mod-tag .module-topic{display:none;}
  .reviews-marquee{width:100%;margin-left:0;}
}
@media(max-width:500px){
  .home-cards{grid-template-columns:1fr;gap:.85rem;}
  .home-card,.home-card.exam-card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:.9rem;padding:1.1rem;}
  .home-card .card-icon,.home-card.exam-card .card-icon{grid-row:1 / 4;align-self:start;margin:0;font-size:2rem;}
  .home-card .card-title{font-size:1rem;}
  .home-card .card-meta{margin-top:.65rem;}
}
@media(max-width:360px){
  .q-header .q-badge{font-size:.65rem;padding-inline:.25rem;}
  .q-header .q-mod-tag{padding-inline:.3rem;}
}
/* En los celulares más chicos, un nombre largo le dejaba al título de las
   pantallas internas 79 px y lo partía en tres líneas. */
@media(max-width:340px){
  #header-account #auth-chip{max-width:26vw;}
}
@media(prefers-reduced-motion:reduce){.home-card{transition:none;}}