/* Layout: hoja de respuestas tipo OMR — burbujas A/B/C/D como lenguaje visual, papel frío y tinta azul */
:root{
  --paper:#eef1f5; --sheet:#ffffff; --ink:#18212f; --muted:#5b6677; --line:#d5dce6; --soft:#e4e9f1;
  --accent:#2747c9; --accent-ink:#ffffff; --accent-soft:#e3e9ff;
  --ok:#17804a; --ok-soft:#e1f4e9; --bad:#c0392b; --bad-soft:#fbe6e3; --warn:#a86a00; --warn-soft:#fff2d6;
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0f131a; --sheet:#171c25; --ink:#e7ecf3; --muted:#9aa5b5; --line:#2b3442; --soft:#212835;
  --accent:#8099ff; --accent-ink:#0d1220; --accent-soft:#1f2a4d;
  --ok:#4cc583; --ok-soft:#14301f; --bad:#f2786b; --bad-soft:#3a1c19; --warn:#f0b54a; --warn-soft:#352a12;
  color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#0f131a; --sheet:#171c25; --ink:#e7ecf3; --muted:#9aa5b5; --line:#2b3442; --soft:#212835;
  --accent:#8099ff; --accent-ink:#0d1220; --accent-soft:#1f2a4d;
  --ok:#4cc583; --ok-soft:#14301f; --bad:#f2786b; --bad-soft:#3a1c19; --warn:#f0b54a; --warn-soft:#352a12;
  color-scheme:dark }
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--sheet)}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;line-height:1.15;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--sheet);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;margin-right:auto}
.logo-fire{flex:0 0 auto;display:block}
.logo-fire .fl-out{fill:#e23b1e}
.logo-fire .fl-mid{fill:#ff8a1f}
.logo-fire .fl-core{fill:#ffd23f}
.logo{display:flex;gap:3px}
.logo i{width:11px;height:11px;border-radius:50%;border:1.8px solid var(--ink)}
.logo i.on{background:var(--accent);border-color:var(--accent)}
/* Menú lateral izquierdo. En ordenador se pliega a solo iconos; en el móvil es un panel que se abre con el botón de menú. */
:root{--top-h:58px;--side-w:244px;--side-mini:68px}
.menu-btn{flex:0 0 auto;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.menu-btn:hover{background:var(--soft)}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);position:relative;content:""}
.menu-btn span::before{position:absolute;top:-6px}
.menu-btn span::after{position:absolute;top:6px}
.side{position:fixed;z-index:6;left:0;top:calc(var(--top-h) + env(safe-area-inset-top,0px));bottom:0;width:var(--side-w);background:var(--sheet);border-right:1px solid var(--line);padding:12px 10px calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;transition:width .18s,transform .2s}
.tab{position:relative;display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:9px 12px;border-radius:10px;cursor:pointer;color:var(--muted);font-weight:700;text-align:left;white-space:nowrap}
.tab .ic{flex:0 0 24px;text-align:center;font-size:1.1rem;line-height:1}
.tab .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tab:hover{color:var(--ink);background:var(--soft)}
.tab[aria-current="page"]{color:var(--ink);background:var(--accent-soft)}
.tab-n{font-family:var(--f-mono);font-size:.7rem;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 6px;margin-left:2px}
.tab-n:empty{display:none}
.side-sep{font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding:14px 12px 4px;white-space:nowrap;overflow:hidden}
body.side-on main.wrap{margin-left:calc(var(--side-w) + max(0px,(100vw - var(--side-w) - 1040px) / 2))}
body.side-on.side-mini main.wrap{margin-left:calc(var(--side-mini) + max(0px,(100vw - var(--side-mini) - 1040px) / 2))}
body.side-on .top .wrap{max-width:none}
body.side-mini .side{width:var(--side-mini)}
body.side-mini .side .lb,body.side-mini .side-sep{display:none}
body.side-mini .tab{justify-content:center;padding:10px 0}
body.side-mini .tab-n{position:absolute;top:2px;right:6px;margin:0;padding:0 4px;min-width:16px;text-align:center}
.side-shade{position:fixed;inset:0;z-index:5;background:color-mix(in srgb,#000 45%,transparent)}
@media (max-width:820px){
  .side{transform:translateX(-102%);width:min(80vw,var(--side-w));box-shadow:4px 0 20px color-mix(in srgb,#000 25%,transparent)}
  body.side-open .side{transform:none}
  body.side-on main.wrap,body.side-on.side-mini main.wrap{margin-left:auto}
  body.side-mini .side{width:min(80vw,var(--side-w))}
  body.side-mini .side .lb,body.side-mini .side-sep{display:block}
  body.side-mini .side .side-sep[hidden]{display:none}
  body.side-mini .tab{justify-content:flex-start;padding:9px 12px}
  body.side-mini .tab-n{position:static}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}
.who{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;background:none;cursor:pointer}
.who .av{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--f-mono);font-size:.8rem;font-weight:600}
.who span{font-weight:700;font-size:.9rem;max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

main{padding-block:28px 64px}
.view{display:grid;gap:24px}
.head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.head h1{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:800;letter-spacing:-.02em}
.sub{color:var(--muted);margin:6px 0 0;max-width:62ch}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--sheet);border-radius:999px;padding:9px 18px;font-weight:700;cursor:pointer;min-height:42px}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.ghost{border-color:transparent;background:none}
.btn.sm{min-height:34px;padding:5px 12px;font-size:.88rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

.notice{border:1px solid var(--warn);background:var(--warn-soft);border-radius:var(--r);padding:12px 16px;font-size:.95rem}
.panel{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:24px}

/* Register */
.register{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.register h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800;letter-spacing:-.03em}
.sheet-art{display:grid;gap:10px;font-family:var(--f-mono);font-size:.85rem;color:var(--muted)}
.sheet-art .row{display:flex;align-items:center;gap:10px}
.sheet-art .row b{width:2.2em;text-align:right;font-weight:600}
.dot{width:22px;height:22px;border-radius:50%;border:1.6px solid var(--muted);display:grid;place-items:center;font-size:.68rem}
.dot.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
form.stack{display:grid;gap:16px}
label.f{display:grid;gap:6px;font-weight:700;font-size:.92rem}
label.f small{font-weight:400;color:var(--muted)}
input[type=text],input[type=number],select,textarea{width:100%;border:1px solid var(--line);background:var(--sheet);border-radius:8px;padding:10px 12px}
textarea{font-family:var(--f-mono);font-size:.85rem;min-height:180px;resize:vertical}
.check{display:flex;gap:10px;align-items:center;font-weight:400}
.check input{width:18px;height:18px;accent-color:var(--accent)}

/* Library */
.banks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.bank{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:14px;align-content:start}
.bank h3{font-size:1.15rem;font-weight:700;overflow-wrap:anywhere}
.meta{font-family:var(--f-mono);font-size:.76rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}
.spark{display:flex;align-items:end;gap:4px;height:38px;border-bottom:1px solid var(--line)}
.spark i{flex:0 0 14px;border-radius:3px 3px 0 0;background:var(--ok)}
.spark i.low{background:var(--bad)}
.spark-empty{font-size:.85rem;color:var(--muted);height:38px;display:flex;align-items:center;border-bottom:1px dashed var(--line)}
.bank .stat{display:flex;justify-content:space-between;align-items:baseline;font-size:.88rem;color:var(--muted)}
.bank .stat strong{font-family:var(--f-mono);font-size:1.25rem;color:var(--ink);font-variant-numeric:tabular-nums}
.bank .acts{display:flex;gap:8px;flex-wrap:wrap}
.bank .mv{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
.bank .mv select{width:auto;flex:1;min-width:0;max-width:100%;padding:5px 8px;font-size:.88rem;text-overflow:ellipsis}
/* Una sola columna que no crece con el contenido: un nombre de carpeta largo en el desplegable no ensancha la tarjeta. */
.bank{grid-template-columns:minmax(0,1fr);min-width:0}
.bank>*{min-width:0}
.favn{color:var(--warn)}
.bank .quick{display:flex;gap:6px;flex-wrap:wrap}
.folderbar{display:flex;gap:4px 6px;flex-wrap:wrap;align-items:center;font-size:.95rem}
.crumb{background:none;border:0;padding:4px 6px;border-radius:6px;cursor:pointer;color:var(--accent);font-weight:700}
.crumb:hover{background:var(--soft)}
.crumb[aria-current="page"]{color:var(--ink);cursor:default;background:none}
.folderbar .sep{color:var(--muted)}
.ftiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.ftile{display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:6px;transition:border-color .12s}
.ftile .ftest{align-self:flex-end;margin:-6px 4px 2px 0}
.ftile:hover{border-color:var(--accent)}
.fopen{flex:1;min-width:0;display:flex;align-items:center;gap:12px;background:none;border:0;padding:10px;text-align:left;cursor:pointer;border-radius:8px;color:inherit}
.ficon{color:var(--accent);flex:0 0 auto;display:grid}
.fname{display:grid;gap:2px;min-width:0}
.fname strong{font-family:var(--f-display);font-size:1.05rem;overflow-wrap:break-word;line-height:1.25}
.fchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--sheet);border-radius:999px;padding:6px 14px;font-weight:700;font-size:.92rem;cursor:pointer;color:var(--muted)}
.fchip span{font-family:var(--f-mono);font-size:.72rem;font-weight:600}
.fchip:hover{color:var(--ink);border-color:var(--ink)}
.fchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.fchip.add{border-style:dashed}
.lib-groups{display:grid;gap:36px}
.fgroup{display:grid;gap:14px}
.fhead{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.fhead h2{font-size:1.3rem;overflow-wrap:anywhere}
.fhead h3{font-size:1.1rem;overflow-wrap:anywhere}
.fgroup.sub{padding-left:16px;border-left:2px solid var(--line);margin-top:6px}
.tf .tf{padding:2px 0;border-top:0}
.fhead .acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fav{margin-left:auto;border:1px solid var(--line);background:none;border-radius:999px;padding:1px 10px;font:inherit;cursor:pointer;color:var(--muted)}
.fav:hover{border-color:var(--warn);color:var(--warn)}
.fav.on{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.manual{display:grid;gap:16px;max-width:760px}
.manual textarea{font-family:var(--f-body);font-size:1rem;min-height:0}
.m-opts{border:0;margin:0;padding:0;display:grid;gap:10px}
.m-opts legend{font-weight:700;font-size:.92rem;margin-bottom:6px;padding:0}
.m-opts legend small{font-weight:400;color:var(--muted)}
.m-opt{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:10px;padding:6px 10px;cursor:pointer}
.m-opt input[type=radio]{width:18px;height:18px;accent-color:var(--ok);flex:0 0 auto}
.m-opt .bub{flex:0 0 28px;height:28px;border-radius:50%;border:1.8px solid var(--muted);display:grid;place-items:center;font-family:var(--f-mono);font-weight:600;font-size:.82rem}
.m-opt input[type=text]{border:0;background:none;padding:6px 2px}
.m-opt input[type=text]:focus-visible{outline:none}
.m-opt:focus-within{border-color:var(--accent)}
.m-opt:has(input[type=radio]:checked){border-color:var(--ok);background:var(--ok-soft)}
.m-opt:has(input[type=radio]:checked) .bub{background:var(--ok);border-color:var(--ok);color:var(--sheet)}
.pick-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.92rem}
.tree{border:1px solid var(--line);border-radius:8px;max-height:min(40vh,320px);overflow:auto}
.tf{padding:10px 14px;display:grid;gap:6px}
.tf+.tf{border-top:1px solid var(--line)}
.tf-banks{display:grid;gap:6px;padding-left:28px}
.tf-head{display:flex;align-items:center;gap:4px;min-width:0}
.tf-head .check{flex:1}
.tf-tog{flex:0 0 26px;height:26px;border:0;background:none;border-radius:6px;cursor:pointer;color:var(--muted);font-size:.8rem;transition:transform .12s}
.tf-tog:hover{background:var(--paper);color:var(--ink)}
.tf-tog[aria-expanded="true"]{transform:rotate(90deg)}
.tf-banks[hidden]{display:none}
/* Impugnaciones */
.reportq{border:1px solid var(--line);background:none;border-radius:999px;padding:1px 10px;font:inherit;cursor:pointer;color:var(--muted)}
.reportq:hover{border-color:var(--bad);color:var(--bad)}
.rep-form{display:grid;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:6px}
.rep-form .acts{display:flex;gap:8px;flex-wrap:wrap}
.chal-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:6px}
.chal-why{background:var(--bad-soft);border-radius:8px;padding:8px 10px;font-size:.9rem}
.qa-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tf .check{font-size:.93rem;min-width:0}
.tf .check span:not(.kbd){overflow-wrap:anywhere;min-width:0}
.tf .check .kbd{margin-left:auto;font-family:var(--f-mono)}
.confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--bad-soft);border-radius:8px;padding:10px 12px;font-size:.9rem}
.empty{border:1.5px dashed var(--line);border-radius:var(--r);padding:40px 24px;text-align:center;display:grid;gap:14px;justify-items:center;background:var(--sheet)}
.empty h2{font-size:1.4rem}

/* Import */
.import-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:32px 20px;text-align:center;display:grid;gap:10px;justify-items:center;background:var(--sheet);cursor:pointer;transition:border-color .15s,background .15s}
.drop.over,.drop:hover{border-color:var(--accent);background:var(--accent-soft)}
.drop strong{font-family:var(--f-display);font-size:1.15rem}
.formats{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip{font-family:var(--f-mono);font-size:.72rem;border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--muted);background:var(--sheet)}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.85rem}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.preview{display:grid;gap:14px}
.preview .qp{border-left:3px solid var(--line);padding:4px 0 4px 14px;font-size:.93rem}
.preview .qp ol{margin:6px 0 0;padding-left:22px}
.preview .qp li.c{color:var(--ok);font-weight:700}
.issues{font-size:.88rem;color:var(--warn);margin:0;padding-left:20px;max-height:140px;overflow:auto}
details.fmt{border:1px solid var(--line);border-radius:8px;background:var(--sheet)}
details.fmt+details.fmt{margin-top:8px}
details.fmt summary{cursor:pointer;padding:10px 14px;font-weight:700;display:flex;justify-content:space-between;gap:8px}
details.fmt summary span{font-family:var(--f-mono);font-weight:400;font-size:.78rem;color:var(--muted)}
details.fmt .body{padding:0 14px 14px;display:grid;gap:8px;font-size:.9rem}
pre.code{margin:0;background:var(--soft);border-radius:6px;padding:10px 12px;font-family:var(--f-mono);font-size:.78rem;overflow-x:auto;white-space:pre}

/* Quiz */
.quiz{display:grid;grid-template-columns:1fr 240px;gap:20px;align-items:start}
.qbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.qbar .left{display:grid;gap:2px;min-width:0}
.qbar .title{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timer{font-family:var(--f-mono);font-size:1.1rem;font-weight:600;font-variant-numeric:tabular-nums;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--sheet)}
.timer.hurry{color:var(--bad);border-color:var(--bad)}
.progress{height:4px;background:var(--soft);border-radius:4px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);transition:width .2s}
.qcard{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:20px}
.qnum{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.qnum .multi{color:var(--accent);font-weight:600}
.qtext{font-size:1.22rem;font-weight:700;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;line-height:1.4}
.opts{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.opt{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--sheet);border-radius:10px;padding:12px 14px;cursor:pointer;transition:border-color .12s,background .12s}
.opt:hover:not(:disabled):not([aria-disabled="true"]){border-color:var(--accent)}
.opt:disabled,.opt[aria-disabled="true"]{cursor:default}
/* El texto de las opciones del test se puede seleccionar con el ratón */
.opts .opt{-webkit-user-select:text;user-select:text}
.opts .opt .bub{-webkit-user-select:none;user-select:none}
.opt .bub{flex:0 0 30px;height:30px;border-radius:50%;border:1.8px solid var(--muted);display:grid;place-items:center;font-family:var(--f-mono);font-weight:600;font-size:.85rem;transition:background .12s}
.opt .tx{padding-top:3px;overflow-wrap:anywhere;min-width:0}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.sel .bub{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.opt.multi .bub{border-radius:7px}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .bub{background:var(--ok);border-color:var(--ok);color:var(--sheet)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.wrong .bub{background:var(--bad);border-color:var(--bad);color:var(--sheet)}
.expl{border-radius:8px;padding:12px 14px;font-size:.95rem;white-space:pre-wrap}
.expl.ok{background:var(--ok-soft);border:1px solid var(--ok)}
.expl.ko{background:var(--bad-soft);border:1px solid var(--bad)}
.qnav{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}
.qnav .grp{display:flex;gap:8px;flex-wrap:wrap}
.omr{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:12px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px)}
.omr h3{font-size:.95rem}
.grid-n{display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:6px;max-height:50vh;overflow:auto;padding:2px}
.n{aspect-ratio:1;max-width:100%;border-radius:50%;border:1.5px solid var(--line);background:none;font-family:var(--f-mono);font-size:.72rem;cursor:pointer;display:grid;place-items:center;padding:0}
.n.done{background:var(--accent-soft);border-color:var(--accent)}
.n.ok{background:var(--ok);border-color:var(--ok);color:var(--sheet)}
.n.ko{background:var(--bad);border-color:var(--bad);color:var(--sheet)}
.n.cur{outline:2px solid var(--ink);outline-offset:1px}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.75rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px;border:1.5px solid var(--line)}
.kbd{font-size:.78rem;color:var(--muted)}
kbd{font-family:var(--f-mono);font-size:.72rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--sheet)}

/* Results */
.score{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.nota{font-family:var(--f-display);font-weight:800;font-size:clamp(4rem,12vw,6.5rem);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.nota small{font-size:.3em;color:var(--muted);letter-spacing:0;font-weight:500}
.nota.pass{color:var(--ok)} .nota.fail{color:var(--bad)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{border-top:2px solid var(--line);padding-top:8px}
.kpi b{display:block;font-family:var(--f-mono);font-size:1.4rem;font-variant-numeric:tabular-nums}
.kpi span{font-size:.82rem;color:var(--muted)}
.kpi.ok{border-color:var(--ok)} .kpi.ko{border-color:var(--bad)}
.review{display:grid;gap:12px}
.rv{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:grid;gap:10px}
.rv.ko{border-left:4px solid var(--bad)} .rv.ok{border-left:4px solid var(--ok)} .rv.bl{border-left:4px solid var(--warn)}
.rv .qt{font-weight:700;white-space:pre-wrap;overflow-wrap:anywhere}
.rv ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.93rem}
.rv li{display:flex;gap:8px;align-items:flex-start}
.rv li .m{font-family:var(--f-mono);font-size:.75rem;flex:0 0 22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center}
.rv li.c .m{background:var(--ok);border-color:var(--ok);color:var(--sheet)}
.rv li.x .m{background:var(--bad);border-color:var(--bad);color:var(--sheet)}
.rv li.c{font-weight:700}
.rv .ex{font-size:.9rem;color:var(--muted);white-space:pre-wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--sheet)}
.seg button{border:0;background:none;padding:5px 12px;border-radius:999px;cursor:pointer;font-weight:700;font-size:.88rem;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--sheet)}

/* History */
.tbl-wrap{overflow-x:auto;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:620px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.pill{font-family:var(--f-mono);font-size:.78rem;font-weight:600;padding:2px 8px;border-radius:999px}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.ko{background:var(--bad-soft);color:var(--bad)}
/* Panel de hoy (racha, objetivo, dominio, repaso del día) */
.today{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ttile{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:6px;align-content:start}
.ttile .tlabel{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.ttile b{font-family:var(--f-display);font-size:1.35rem;font-variant-numeric:tabular-nums;line-height:1.1}
.ttile.hot b{color:var(--warn)}
.ttile.done b{color:var(--ok)}
.ttile.review{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-soft),var(--sheet) 70%)}
.ttile.review .btn{justify-self:start;margin-top:2px}
.bar{position:relative;height:6px;border-radius:6px;background:var(--soft);overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:6px;background:var(--accent);transition:width .3s}
.bar.two i{background:var(--ok)}
.bar.two i.seen{background:var(--accent-soft)}
.ttile.done .bar i{background:var(--ok)}
.bprog{display:grid;gap:4px}
.ftile .bprog{padding:0 10px 4px}
@media (max-width:820px){.today{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Configuraciones rápidas del creador de tests */
.presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.preset{display:grid;gap:2px;text-align:left;border:1.5px solid var(--line);background:var(--sheet);border-radius:10px;padding:8px 10px;cursor:pointer}
.preset strong{font-size:.92rem}
.preset span{font-size:.72rem;color:var(--muted);line-height:1.3}
.preset:hover{border-color:var(--accent)}
.preset.on{border-color:var(--accent);background:var(--accent-soft)}
@media (max-width:720px){.presets{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.presets{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Herramientas de cada pregunta: dudosa, editar, favorita */
.qtools{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.qtools .fav{margin-left:0}
.flagq{border:1px solid var(--line);background:none;border-radius:999px;padding:1px 10px;font:inherit;cursor:pointer;color:var(--muted)}
.flagq:hover{border-color:var(--warn);color:var(--warn)}
.flagq.on{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.n.flag{border:1.5px dashed var(--warn)}
.n.flag.cur{outline-color:var(--warn)}

/* Evolución de notas */
.chart{padding:16px 18px;display:grid;gap:8px}
.chart-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline}
.chart svg{width:100%;height:auto;display:block}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.chart .pass{stroke:var(--line);stroke-dasharray:4 4}
.chart .lbl{fill:var(--muted);font:10px var(--f-mono)}
.chart circle{stroke:var(--sheet);stroke-width:1.5}
.chart circle.ok{fill:var(--ok)} .chart circle.ko{fill:var(--bad)}

/* Retoques generales */
.btn{transition:border-color .12s,background .12s,filter .12s,transform .06s}
.btn:active:not(:disabled){transform:translateY(1px)}
.bank{transition:border-color .12s,box-shadow .12s}
.bank:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 2px 10px rgb(0 0 0 / .06)}
.top{box-shadow:0 1px 0 var(--line)}

/* Dificultad */
.dchip{font-family:var(--f-mono);font-size:.7rem;font-weight:600;padding:1px 8px;border-radius:999px;white-space:nowrap}
.dchip.d1{background:var(--ok-soft);color:var(--ok)} .dchip.d2{background:var(--warn-soft);color:var(--warn)} .dchip.d3{background:var(--bad-soft);color:var(--bad)}
.levels{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;grid-column:1/-1}
.levels legend{font-weight:700;font-size:.92rem;padding:0;margin-bottom:6px;width:100%}
.levels legend small{font-weight:400;color:var(--muted)}
.lv{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px 12px;cursor:pointer;font-size:.9rem}
.lv input{accent-color:var(--accent);width:16px;height:16px}
.lv:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}

/* Chat */
.chat-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;align-items:start}
.rooms{display:grid;gap:8px;position:sticky;top:12px}
.rooms-list{display:grid;gap:4px}
.room{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid transparent;background:none;border-radius:10px;padding:8px 10px;cursor:pointer;font:inherit;color:var(--ink)}
.room:hover{background:var(--soft)}
.room.on{background:var(--sheet);border-color:var(--line);font-weight:700}
.room-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-mute{font-size:.8rem;opacity:.7}
.room-n{flex:0 0 auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-mono);font-size:.72rem;font-weight:700;display:grid;place-items:center}
.room.muted .room-n{background:var(--soft);color:var(--muted)}
.room-form{display:grid;gap:6px}
.room-form input{width:100%;border:1px solid var(--line);background:var(--sheet);border-radius:8px;padding:7px 10px;font:inherit;color:var(--ink)}
.room-form .acts{display:flex;gap:6px;flex-wrap:wrap}
.chat-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line)}
.chat-top .room-form{grid-template-columns:minmax(0,1fr) auto;align-items:center;flex:1}
.room-title{font-size:1.05rem}
.chat-top-acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.chat-top .btn.danger{color:var(--bad);border-color:var(--bad)}
.chat-daily{display:grid;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--paper);max-height:45vh;overflow-y:auto}
.daily-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.daily-tt{display:grid;gap:2px;min-width:0;flex:1}
.daily-rank{display:grid;gap:8px;justify-items:start}
.rank{margin:0;padding:0;list-style:none;display:grid;gap:4px;width:100%}
.rank li{display:flex;gap:10px;align-items:baseline;padding:4px 8px;border-radius:8px;background:var(--sheet)}
.rank li.me{outline:1.5px solid var(--accent)}
.rank .pos{flex:0 0 28px;font-family:var(--f-mono)}
.rank .nm{flex:1;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .sc{font-family:var(--f-mono);font-size:.82rem;color:var(--muted)}
.chat-rep{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;padding:0 4px;opacity:.5}
.chat-msg:hover .chat-rep,.chat-rep:focus-visible{opacity:1}
.chat-del{margin-left:0}
.chat-meta .chat-rep{margin-left:auto}
.chat-op{font-size:.7rem;background:var(--soft);border-radius:999px;padding:0 7px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-quote{display:grid;gap:1px;text-align:left;border:0;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:6px;padding:4px 8px;font:inherit;font-size:.82rem;color:var(--ink);cursor:pointer}
.chat-quote span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-quote.gone{color:var(--muted);cursor:default}
.chat-msg.flash{box-shadow:0 0 0 3px var(--accent)}
.chat-reply{display:flex;gap:8px;align-items:center;padding:6px 10px;border-left:3px solid var(--accent);background:var(--paper);border-radius:6px;min-width:0}
.chat-reply-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.chat-reply .chat-del{opacity:1}
.chat-where{text-transform:none;letter-spacing:0;color:var(--muted)}
.stickers{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow-y:auto;padding:4px}
.stk-btn{border:1px solid var(--line);background:var(--sheet);border-radius:10px;font-size:1.5rem;line-height:1;padding:6px 8px;cursor:pointer}
.stk-btn.tx{font-size:.85rem;font-weight:800;padding:8px 10px;color:var(--accent)}
.stk-btn:hover{border-color:var(--accent)}
.chat-msg.stk{background:none;border-color:transparent;padding:4px 6px}
.stk-emo{font-size:3rem;line-height:1.1}
.stk-tx{display:inline-block;justify-self:start;font-weight:900;font-size:1.15rem;color:var(--accent-ink);background:var(--accent);padding:8px 14px;border-radius:14px;transform:rotate(-2deg);box-shadow:0 2px 0 color-mix(in srgb,var(--ink) 25%,transparent)}
.chat-msg.mine .stk-tx{justify-self:end}
#chat-stk[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
@media (max-width:760px){
  .chat-wrap{grid-template-columns:1fr}
  .rooms{position:static;grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .rooms-list{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
  .room{width:auto;flex:0 0 auto;border-color:var(--line);background:var(--sheet)}
  .room-name{max-width:160px}
}
.chat{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;height:min(74vh,720px);min-height:420px;overflow:hidden}
.chat>.chat-log{flex:1;min-height:0}
.chat-log{overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.chat-empty{margin:auto;text-align:center}
.chat-day{align-self:center;font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:4px 10px;background:var(--soft);border-radius:999px}
.chat-msg{max-width:min(78%,620px);align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 12px;display:grid;gap:4px}
.chat-msg.mine{align-self:flex-end;background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:14px 14px 4px 14px}
.chat-msg.q{max-width:min(92%,640px);width:100%;gap:8px;padding:12px 14px}
.chat-meta{display:flex;gap:8px;align-items:baseline;font-size:.78rem;color:var(--muted)}
.chat-meta strong{color:var(--ink);font-size:.85rem}
.chat-del{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;padding:0 4px;opacity:.5}
.chat-msg:hover .chat-del,.chat-del:focus-visible,.chat-del[data-sure]{opacity:1}
.chat-del[data-sure]{color:var(--bad);font-weight:700}
.chat-text{white-space:pre-wrap;overflow-wrap:anywhere}
.chat-text.qt{font-weight:700;font-size:1.02rem}
.chat-qlabel{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.chat-opts{display:grid;gap:6px}
.chat-opts .opt{padding:8px 10px}
.chat-opts .opt .bub{flex-basis:26px;height:26px;font-size:.78rem}
.chat-who{display:grid;gap:2px;font-size:.84rem}
.who-ok{color:var(--ok)} .who-ko{color:var(--bad)}
.chat-form{border-top:1px solid var(--line);padding:10px;display:grid;gap:8px;background:var(--sheet)}
.chat-row{display:flex;gap:8px;align-items:flex-end}
.chat-row textarea{flex:1;min-height:42px;max-height:140px;font-family:var(--f-body);font-size:1rem;resize:vertical}
.chat-q{display:grid;gap:8px}
.chat-qopts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.chat-q input[type=text]#cq-e{width:100%;border:1px solid var(--line);background:var(--sheet);border-radius:8px;padding:8px 10px}
#chat-qtoggle[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
@media (max-width:520px){.chat-qopts{grid-template-columns:1fr}.chat-msg{max-width:92%}
  .chat-row{flex-wrap:wrap}.chat-row textarea{order:-1;flex-basis:100%}.chat-row [type=submit]{margin-left:auto}}

/* Gestor de preguntas */
.qa-filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;padding:16px;align-items:end}
.qa-filters input[type=search]{width:100%;border:1px solid var(--line);background:var(--sheet);border-radius:8px;padding:10px 12px}
.trow.qa{align-items:start}
.qa-opts{margin:4px 0 2px;padding-left:22px;font-size:.88rem;color:var(--muted)}
.qa-opts li.c{color:var(--ok);font-weight:700}
.qa-edit{grid-column:1/-1;display:grid;gap:10px}
@media (max-width:720px){.qa-filters{grid-template-columns:1fr}}

/* Mis test en formato lista */
.tlist{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.trow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 16px;align-items:center;padding:12px 16px}
.trow+.trow,.tmore{border-top:1px solid var(--line)}
.trow:hover{background:var(--paper)}
.tmain{display:grid;gap:2px;min-width:0}
.tmain strong{overflow-wrap:anywhere}
.tscore,.tprog{display:grid;gap:4px;justify-items:end;min-width:120px}
.tprog .progress{width:120px}
.tacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tdel{color:var(--bad)}
.trow .confirm{grid-column:1/-1}
.tmore{padding:12px;text-align:center}
@media (max-width:720px){
  .trow{grid-template-columns:minmax(0,1fr) auto}
  .tacts{grid-column:1/-1;justify-content:flex-start}
}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}

dialog{border:1px solid var(--line);border-radius:14px;padding:0;background:var(--sheet);color:var(--ink);width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 40px)}
dialog::backdrop{background:rgb(10 14 20 / .5)}
dialog .dl{padding:24px;display:grid;gap:16px}
dialog .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--sheet);padding:10px 18px;border-radius:999px;font-weight:700;z-index:20;max-width:calc(100vw - 32px)}

@media (max-width:820px){
  .quiz,.import-grid,.register{grid-template-columns:1fr}
  .omr{position:static}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .score{grid-template-columns:1fr}
  .sheet-art{display:none}
}
@media (max-width:520px){
  .top .wrap{gap:10px}
  .qcard{padding:20px}
  dialog .row2,.cols2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Acceso */
.auth{max-width:440px;margin:4vh auto 0;display:grid;gap:20px}
.auth .panel{display:grid;gap:18px}
.auth h1{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800;letter-spacing:-.02em}
.msg{border-radius:8px;padding:10px 12px;font-size:.92rem}
.msg.err{background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad)}
.msg.ok{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
input[type=email],input[type=password]{width:100%;border:1px solid var(--line);background:var(--sheet);border-radius:8px;padding:10px 12px}
/* Usuarios */
.invite-form{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.invite-form label.f{flex:1 1 260px}
.tag{font-family:var(--f-mono);font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.tag.on{background:var(--ok-soft);color:var(--ok)} .tag.off{background:var(--bad-soft);color:var(--bad)} .tag.wait{background:var(--warn-soft);color:var(--warn)} .tag.adm{background:var(--accent-soft);color:var(--accent)}
td .acts{display:flex;gap:6px;flex-wrap:wrap}
.copybox{display:grid;gap:8px;background:var(--accent-soft);border-radius:8px;padding:12px 14px;font-size:.92rem}
.copybox p{margin:0;white-space:pre-wrap}

/* Test: autor de la pregunta, explicaciones de la comunidad */
.qby{color:var(--muted)}
.notes{display:grid;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.notes-h{font-size:.92rem}
.note{display:grid;gap:2px;background:var(--sheet);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.note .chat-del{margin-left:auto;opacity:.6}
.note-add{display:grid;gap:6px;justify-items:start}
.note-add textarea{width:100%;border:1px solid var(--line);background:var(--sheet);border-radius:8px;padding:8px 10px;font:inherit;color:var(--ink);resize:vertical}
.rv-extra:empty{display:none}
.rv-extra{margin-top:8px}
.rename-in{font:inherit;font-weight:700;width:100%;max-width:520px;border:1px solid var(--accent);background:var(--sheet);border-radius:8px;padding:4px 8px;color:var(--ink)}

/* Actividad */
.act-tbl td{vertical-align:top}
.act-op{font-size:.78rem;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:1px 8px;display:inline-block;margin-top:3px}
.act-on{color:var(--ok);font-weight:700}
.act-on::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:middle}

/* Impugnaciones */
.chal-chip{color:var(--warn);font-weight:700}
.grid-n .n.chal{box-shadow:inset 0 -3px 0 var(--warn)}
.trow.chal .tmain{gap:8px}
.chal-review{display:grid;gap:8px;margin-top:4px}
.chal-review textarea{width:100%;border:1px solid var(--line);background:var(--sheet);border-radius:8px;padding:8px 10px;font:inherit;color:var(--ink);resize:vertical}
.chal-acts{display:flex;gap:8px;flex-wrap:wrap}
.chal-res{display:grid;gap:4px;border-left:3px solid var(--line);padding:4px 10px}
.chal-res.ok{border-color:var(--ok)} .chal-res.ko{border-color:var(--bad)}

/* Botón de instalar la app, al final del menú */
.side-install{margin-top:auto;border-top:1px solid var(--line);border-radius:0 0 10px 10px;padding-top:12px}

/* Cuenta atrás al examen y temas más flojos */
.exam-count{margin:8px 0 0;display:inline-block;font-weight:700;color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:4px 12px;font-size:.92rem}
.weak{display:grid;gap:12px}
.weak-list{display:grid;gap:10px}
.weak-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(80px,1fr) auto;gap:12px;align-items:center}
.weak-name{display:grid;min-width:0}
.weak-name span:first-child{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weak .bar{height:8px;border-radius:999px;background:var(--soft);overflow:hidden}
.weak .bar i{display:block;height:100%;border-radius:999px;background:var(--ok)}
.weak .bar.mid i{background:var(--warn)} .weak .bar.ko i{background:var(--bad)}
@media (max-width:520px){.weak-row{grid-template-columns:minmax(0,1fr) auto}.weak .bar{grid-column:1/-1;grid-row:2}}

/* Batallas */
.bt-newbox{display:grid;gap:12px;max-width:520px}
.bt-newbox .acts{display:flex;gap:8px}
.bt-wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px;align-items:start}
.bt-list{display:grid;gap:6px}
.bt-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid var(--line);background:var(--sheet);border-radius:10px;padding:9px 12px;cursor:pointer;font:inherit;color:var(--ink)}
.bt-item:hover{border-color:var(--accent)}
.bt-item.on{border-color:var(--accent);background:var(--accent-soft)}
.bt-vs{display:grid;flex:1;min-width:0}
.bt-vs strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.bt-main{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-height:420px;height:min(76vh,760px);overflow:hidden}
.bt-main>.kbd,.bt-main>.empty{padding:16px}
.bt-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 16px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);max-height:30vh;overflow-y:auto}
.bt-fighter{display:grid;gap:6px;min-width:0}
.bt-fighter.out{opacity:.5}
.bt-fighter.me .bt-fname strong{color:var(--accent)}
.bt-fname{display:flex;gap:8px;justify-content:space-between;align-items:baseline}
.bt-fname strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-hp{font-family:var(--f-mono);font-weight:700;font-variant-numeric:tabular-nums}
.bt-bar{height:12px;border-radius:999px;background:var(--soft);overflow:hidden}
.bt-bar i{display:block;height:100%;background:var(--ok);border-radius:999px;transition:width .4s}
.bt-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 12px}
.bt-bar.mid i{background:var(--warn)} .bt-bar.low i{background:var(--bad)}
.bt-win{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;background:var(--warn-soft);border-bottom:1px solid var(--line)}
.bt-win.me{background:linear-gradient(90deg,#ffd23f33,var(--warn-soft))}
.bt-crown{font-size:1.8rem;line-height:1}
.bt-log{flex:1;min-height:0}
.bt-controls{display:grid;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.bt-launch{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bt-deck{display:flex;gap:6px;flex:1;min-width:0;flex-wrap:wrap}
.bt-deck select{flex:1 1 160px;min-width:0;width:auto;padding:7px 10px}
.bt-status{margin:0}
.bt-say{display:flex;gap:8px}
.bt-say input{flex:1;min-width:0}
.bt-surrender{justify-self:end}
@media (max-width:760px){.bt-wrap{grid-template-columns:minmax(0,1fr)}.bt-list{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px}.bt-item{flex:0 0 auto;width:auto;max-width:240px}}
.bt-custom{display:grid;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px}
.bt-custom .acts{display:flex;gap:8px;flex-wrap:wrap}
.bt-launch [aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.bt-controls{grid-template-columns:minmax(0,1fr)}
.bt-custom{min-width:0}
.bt-custom .chat-qopts{grid-template-columns:repeat(2,minmax(0,1fr))}
.bt-custom .m-opt{min-width:0}
.bt-custom .m-opt input[type=text]{min-width:0;width:100%}
.bt-custom textarea,.bt-custom>input{width:100%;min-width:0}
@media (max-width:620px){.bt-custom .chat-qopts{grid-template-columns:minmax(0,1fr)}}
.tag.rev{background:var(--warn-soft);color:var(--warn)}
.flagq.del[data-sure]{color:var(--bad);border-color:var(--bad);font-weight:700}

/* Preguntas desde capturas */
.panel.shot{display:grid;gap:16px}
.shot-list{display:grid;gap:12px}
.shot-card{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:10px;background:var(--paper)}
.shot-card.need{border-color:var(--warn)}
.shot-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.shot-head .btn{margin-left:auto}
.shot-body{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:14px;align-items:start}
.shot-img{width:100%;border-radius:8px;border:1px solid var(--line)}
.shot-form{display:grid;gap:10px;min-width:0}
.shot-opts{display:grid;gap:6px}
.shot-opts .m-opt{min-width:0}
.shot-opts .m-opt input[type=text]{min-width:0;width:100%}
.shot-opts .linkbtn{justify-self:start}
.shot-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width:620px){.shot-body{grid-template-columns:minmax(0,1fr)}.shot-img{max-width:260px}}
.hideq.on{color:var(--muted);border-color:var(--muted);background:var(--soft)}
.bt-hpset{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.bt-hpset .f input{max-width:140px}
.bt-hpq{display:flex;gap:6px;flex-wrap:wrap}
.bt-deck input[type=text]{flex:1 1 160px;min-width:0;width:auto;padding:7px 10px}
.bt-group{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:8px 2px 2px}
.bt-none{margin:0;padding:2px}
.bt-tools{display:flex;justify-content:flex-end;padding:6px 10px 0}
.bt-del[data-sure]{color:var(--bad);font-weight:700}
@media (max-width:760px){.bt-group{display:none}.bt-none{display:none}}

/* Desplegable de carpetas en árbol */
.fsel{position:relative;min-width:0;flex:1 1 200px}
.fsel>select{display:none}
.fsel-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:42px;text-align:left;border:1px solid var(--line);background:var(--sheet);border-radius:8px;padding:8px 12px;cursor:pointer;font:inherit;font-weight:400;color:var(--ink)}
.fsel-btn:disabled{opacity:.5;cursor:not-allowed}
.fsel-btn[aria-expanded="true"]{border-color:var(--accent)}
.fsel-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsel-car{color:var(--muted);font-size:.8rem}
.fsel-pop{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);min-width:260px;background:var(--sheet);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px color-mix(in srgb,#000 30%,transparent);padding:8px;display:grid;gap:6px;font-weight:400}
.fsel-q{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:7px 10px;font:inherit;color:var(--ink)}
.fsel-list{max-height:min(50vh,360px);overflow-y:auto;display:grid;gap:1px}
.fsel-sub{padding-left:18px;display:grid;gap:1px}
.fsel-row{display:flex;align-items:center;gap:2px}
.fsel-tog{flex:0 0 24px;height:24px;border:0;background:none;color:var(--muted);cursor:pointer;font-size:.7rem;border-radius:6px;transition:transform .12s}
.fsel-tog:hover{background:var(--soft)}
.fsel-tog[aria-expanded="true"]{transform:rotate(90deg)}
.fsel-tog.sp{cursor:default}
.fsel-it{flex:1;min-width:0;display:flex;align-items:center;gap:8px;text-align:left;border:0;background:none;border-radius:6px;padding:6px 8px;cursor:pointer;font:inherit;color:var(--ink)}
.fsel-it:hover{background:var(--soft)}
.fsel-it.on{background:var(--accent-soft);font-weight:700}
.fsel-it.dim{color:var(--muted);cursor:default}
.fsel-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsel-none{margin:4px}
.bank .mv .fsel{flex:1 1 auto}
.trial-box{display:grid;gap:10px;border:1px solid var(--ok);background:var(--ok-soft);border-radius:12px;padding:14px 16px}
.trial-box .acts{display:flex;gap:10px;flex-wrap:wrap}