/* Una tarjeta a pantalla completa por vez, estilo stories. Sin scroll nativo: se avanza deslizando o con el botón. */
:root{
  --bg:#E6E9F0; --ink:#12141A; --muted:#566070; --line:rgba(18,20,26,.16); --surface:#FFFFFF;
  --c-concept:#2B44F0; --c-quiz:#FFC53D; --c-trap:#FF6250; --c-flash:#7A5AF8; --c-link:#18BBA4;
  --light:#FFFFFF; --dark:#14151A; --good:#18A06B;
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#0B0C10;--ink:#F0F1F5;--muted:#99A0AE;--line:rgba(240,241,245,.18);--surface:#1A1C23;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#0B0C10;--ink:#F0F1F5;--muted:#99A0AE;--line:rgba(240,241,245,.18);--surface:#1A1C23;color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg);color:var(--ink);font:15px/1.4 var(--body);
  padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(16px,env(safe-area-inset-left,0px));
  -webkit-tap-highlight-color:transparent;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:focus-visible,input:focus-visible{outline:3px solid currentColor;outline-offset:2px}
[hidden]{display:none!important}
.muted{color:var(--muted)}

.app{height:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:10px;padding-block:8px}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px}
.brand{font:800 18px/1 var(--display);letter-spacing:.02em;display:flex;align-items:center;gap:8px;margin:0}
.chipbtn{font:600 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 9px;white-space:nowrap}
.hud{display:flex;align-items:center;gap:5px}
.pill{border:1px solid var(--line);border-radius:999px;padding:6px 10px;font:600 12px/1 var(--body);white-space:nowrap}
.pill.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--c-trap);display:inline-block}
.prog{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--ink);border-radius:4px;transition:width .35s ease}

.deck{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:26px}
.card{
  position:absolute;inset:0;border-radius:26px;padding:18px 18px 16px;
  background:var(--cbg);color:var(--fg);
  display:flex;flex-direction:column;gap:12px;
  overflow-y:auto;scrollbar-width:none;
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.card::-webkit-scrollbar{display:none}
.t-concept{--cbg:var(--c-concept);--fg:var(--light);--glass:rgba(255,255,255,.16);--glass2:rgba(255,255,255,.26)}
.t-quiz{--cbg:var(--c-quiz);--fg:var(--dark);--glass:rgba(20,21,26,.09);--glass2:rgba(20,21,26,.17)}
.t-trap{--cbg:var(--c-trap);--fg:var(--dark);--glass:rgba(20,21,26,.10);--glass2:rgba(20,21,26,.18)}
.t-flash{--cbg:var(--c-flash);--fg:var(--light);--glass:rgba(255,255,255,.16);--glass2:rgba(255,255,255,.26)}
.t-link{--cbg:var(--c-link);--fg:var(--dark);--glass:rgba(20,21,26,.09);--glass2:rgba(20,21,26,.17)}
.t-end,.t-msg{--cbg:var(--surface);--fg:var(--ink);--glass:rgba(128,134,150,.14);--glass2:rgba(128,134,150,.24)}

.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{font:600 11px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:999px;padding:5px 9px}
.chip.fill{background:var(--fg);color:var(--cbg);border-color:var(--fg)}
.term{font:800 clamp(30px,9.2vw,42px)/1.02 var(--display);letter-spacing:-.02em;text-wrap:balance;margin:2px 0 0}
.term.big{font-size:clamp(34px,11vw,52px)}
.def{font-size:18px;line-height:1.35;font-weight:500;margin:0;text-wrap:pretty}
.mini{background:var(--glass);border-radius:14px;padding:10px 12px;display:grid;gap:2px}
.mini b{font:600 10.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.mini span{font-size:14.5px}
.flow{display:grid;gap:0}
.node{background:var(--glass);border-radius:11px;padding:7px 12px;font-size:14px;font-weight:500;display:flex;justify-content:space-between;gap:8px}
.node.bad{background:var(--fg);color:var(--cbg)}
.node.bad::after{content:"✕";font-weight:700}
.arrow{height:12px;display:flex;justify-content:center;align-items:center;font-size:11px;opacity:.7;line-height:1}
.spacer{flex:1;min-height:0}

.scn{font-size:15.5px;line-height:1.4;font-weight:500;margin:0}
.scn.compact{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:14px}
.opts{display:grid;gap:7px}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;background:var(--glass);border-radius:14px;padding:10px 12px;font-size:14.5px;line-height:1.3;border:2px solid transparent}
.opt .l{font:500 12px/1.5 var(--mono);opacity:.7;min-width:14px}
.opt.sel{border-color:var(--fg)}
.opt.ok{background:var(--fg);color:var(--cbg)}
.opt.no{border-color:var(--fg);border-style:dashed}
.opt.view{outline:2px solid var(--fg);outline-offset:2px}
.ask{display:grid;gap:7px}
.ask>p{margin:0;font:600 11px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;opacity:.8}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.big{background:var(--fg);color:var(--cbg);border-radius:16px;padding:14px 10px;font:800 17px/1.1 var(--display);text-align:center;width:100%}
.big.alt{background:var(--glass2);color:var(--fg)}
.panel{background:var(--glass2);border-radius:14px;padding:11px 13px;display:grid;gap:6px;font-size:14px}
.panel h4{margin:0;font:800 16px/1.15 var(--display)}
.panel p{margin:0}
.panel .pat{font-size:12.5px;opacity:.85;border-top:1px solid var(--glass2);padding-top:6px}
.claim{font:600 20px/1.3 var(--body);margin:0;text-wrap:pretty}
.where{font:800 clamp(44px,15vw,68px)/1 var(--display);letter-spacing:-.03em;margin:0}
.tag{display:inline-block;background:var(--fg);color:var(--cbg);border-radius:10px;padding:8px 12px;font:500 14px/1.2 var(--mono);width:fit-content}
.hint{font-size:12.5px;opacity:.8;text-align:center;margin:0}
.flipbox{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;text-align:left;width:100%}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--glass);border-radius:14px;padding:12px 8px;text-align:center}
.stat b{display:block;font:800 30px/1 var(--display);font-variant-numeric:tabular-nums}
.stat span{font-size:11.5px;opacity:.8}
.weak{display:grid;gap:5px;font-size:14px}
.weak div{background:var(--glass);border-radius:10px;padding:7px 10px;display:flex;justify-content:space-between;gap:8px}

.bar{display:grid;grid-template-columns:1fr 1.6fr;gap:8px}
.bar button{border-radius:999px;padding:14px 10px;font:600 14px/1 var(--body);text-align:center}
.b-save{border:1.5px solid var(--line)}
.b-save.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.b-next{background:var(--ink);color:var(--bg)}
.b-next[disabled]{opacity:.35;cursor:default}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:12px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:80vw;text-align:center;z-index:30}
.toast.show{opacity:1}

/* acceso */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px max(16px,env(safe-area-inset-right,0px));background:var(--bg);z-index:20}
.gatebox{width:100%;max-width:380px;display:grid;gap:8px}
.gatebox h1{font-size:34px}
.gatebox label{font:600 11px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.gatebox input{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;font-size:16px}
.gatebox .big{background:var(--c-concept);color:#fff;margin-top:10px}
.err{color:var(--c-trap);min-height:1.2em;margin:0;font-size:13.5px}

/* menú (hoja inferior) */
.sheet{position:fixed;inset:0;z-index:25;background:rgba(10,11,16,.55);display:flex;align-items:flex-end;justify-content:center}
.sheetbox{width:100%;max-width:460px;background:var(--surface);color:var(--ink);border-radius:26px 26px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;max-height:92%}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tabs button{border:1.5px solid var(--line);border-radius:12px;padding:10px 6px;font:600 13px/1 var(--body)}
.tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sec{display:grid;gap:7px}
.sec h3{margin:0;font:600 11px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.opt2{border:1.5px solid var(--line);border-radius:12px;padding:10px 8px;font:600 13px/1.1 var(--body);text-align:center}
.opt2.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.go{background:var(--c-concept);color:#fff;border-radius:16px;padding:15px;font:800 17px/1 var(--display);text-align:center}
.close{justify-self:end;color:var(--muted);font-size:13px;padding:4px 8px}
.dbar{display:grid;grid-template-columns:42px 1fr auto;gap:8px;align-items:center;font-size:13px}
.dbar .track{height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.dbar .track i{display:block;height:100%;background:var(--good)}
.dbar b{font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums}
.est{background:var(--bg);border-radius:14px;padding:12px;display:grid;gap:3px}
.est b{font:800 30px/1 var(--display);font-variant-numeric:tabular-nums}
.est span{font-size:12.5px;color:var(--muted)}
.kv{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.kv span:last-child{color:var(--muted);text-align:right}
/* Mi cuenta */
.page{position:fixed;inset:0;z-index:27;background:var(--bg);display:flex;justify-content:center;padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(16px,env(safe-area-inset-left,0px))}
.pagebox{width:100%;max-width:460px;display:flex;flex-direction:column;gap:12px;padding-block:12px;overflow-y:auto;scrollbar-width:none}
.pagebox::-webkit-scrollbar{display:none}
.acct-head{display:flex;align-items:center;justify-content:space-between}
.acct-head .term{font-size:28px;margin:0}
.lbl{font:600 11px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pagebox input{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px 13px;font-size:16px;width:100%}
.ok{color:var(--good);min-height:1.2em;margin:0;font-size:13.5px}
.pagebox .go{margin-top:auto}
#sheet{display:none}

@media (prefers-reduced-motion: reduce){.card,.prog i{transition:none}}
@media (max-height:620px){.def{font-size:16.5px}.term{font-size:28px}.opt{padding:8px 10px}}

@page{size:A4;margin:14mm}
@media print{
  html,body{overflow:visible;height:auto;background:#fff;color:#111}
  body{padding:0}
  .app,.toast,.sheet,.gate,.page{display:none!important}
  #sheet{display:block;font:11pt/1.4 var(--body)}
  #sheet h1{font:800 20pt/1.1 var(--display);margin:0 0 4mm}
  #sheet .sub{color:#555;margin:0 0 6mm}
  #sheet .cols{columns:2;column-gap:8mm}
  #sheet .sc{break-inside:avoid;border:1px solid #bbb;border-radius:3mm;padding:3mm 4mm;margin:0 0 4mm}
  #sheet .sc small{display:block;font-size:8pt;letter-spacing:.08em;text-transform:uppercase;color:#666;margin-bottom:1mm}
  #sheet .sc b{display:block;font:800 12pt/1.15 var(--display);margin-bottom:1mm}
  #sheet .sc p{margin:0 0 1mm}
  #sheet .sc .ans{font-weight:600}
}