/* CSM Quiz — estilos compartidos.
   Manual de Marca St. Mark's School:
   - Colores: verde 3435C, amarillo 123C y los secundarios (azul 3035C, celeste 7711C, verde 356C,
     verde claro 373C, beige) con sus tonos al 40/60/80 %. Cada color sale de una variable con valor
     propio en modo claro y en modo oscuro: ningún estado usa un color que desaparezca en el otro modo.
   - Tipografías: Gotham (institucional) para títulos y números grandes, si el equipo la tiene
     instalada; si no, Roboto. Roboto para todo el texto de la app. Noto Serif para las frases que
     explican cada pantalla del panel docente y del proyector (segundo nivel de lectura).
     Roboto y Noto Serif se sirven desde /fonts (licencia OFL). Gotham es paga: para que se vea en
     todos los dispositivos hace falta la licencia web; con ella, copiar los .woff2 a /fonts y
     descomentar el @font-face de abajo. */
@font-face{font-family:"Roboto";src:url(fonts/roboto-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif";src:url(fonts/notoserif-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Con licencia web de Gotham:
@font-face{font-family:"Gotham";src:url(fonts/gotham-book.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Gotham";src:url(fonts/gotham-bold.woff2) format("woff2");font-weight:700 900;font-display:swap} */

:root{
  --brand:#154734; --accent:#ffc72c; --on-accent:#154734;
  --azul:#003e52; --celeste:#0095a9; --verde:#317b41; --verde-claro:#cbe880; --beige:#f4e8d0;
  /* modo claro: fondo beige al 40 %, superficies blancas, verde 3435C para texto y acciones */
  --bg:#fbf6ec; --surface:#ffffff; --sunken:#f6edd9; --ink:#1c2b25; --muted:#536359; --line:#e6dcc6; --field:#7a877f;
  --heading:#154734; --label:#0095a9; --primary:#154734; --on-primary:#ffffff; --sel:#154734; --focus:#0095a9;
  --ok:#317b41; --bad:#c8372d; --track:#e6dcc6; --timer:#154734; --edge:rgba(28,43,37,.3); --tab:#154734; --hover:#154734;
  --ok-card:color-mix(in srgb,var(--ok) 16%,var(--surface)); --ok-card-ink:var(--ink); --ok-edge:var(--ok); --ok-dot:var(--ok); --ok-dot-ink:var(--surface);
  --overlay:rgba(10,24,18,.55); --shadow:rgba(0,0,0,.16);
  --hc:var(--primary); --hc-ink:var(--on-primary);
  --display:"Gotham","Roboto",system-ui,"Segoe UI",Arial,sans-serif;
  --ui:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --read:"Noto Serif",Georgia,"Times New Roman",serif;
  --r:16px; --tap:48px; color-scheme:light;
}
/* modo oscuro: verde 3435C muy oscuro de fondo, verde claro 373C para títulos y acciones,
   celeste al 60 % para rótulos y foco */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b1f17; --surface:#123528; --sunken:#0e2a20; --ink:#eef3ef; --muted:#a8bcb2; --line:#2a5644; --field:#7f9a8d;
  --heading:#cbe880; --label:#66bfcb; --primary:#cbe880; --on-primary:#154734; --sel:#cbe880; --focus:#66bfcb;
  --ok:#83b08d; --bad:#ef7a6e; --track:#08170f; --timer:#cbe880; --edge:rgba(255,255,255,.32); --tab:#ffc72c; --hover:#ffffff;
  --ok-card:#cbe880; --ok-card-ink:#154734; --ok-edge:#cbe880; --ok-dot:#154734; --ok-dot-ink:#cbe880;
  --overlay:rgba(0,0,0,.66); --shadow:rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b1f17; --surface:#123528; --sunken:#0e2a20; --ink:#eef3ef; --muted:#a8bcb2; --line:#2a5644; --field:#7f9a8d;
  --heading:#cbe880; --label:#66bfcb; --primary:#cbe880; --on-primary:#154734; --sel:#cbe880; --focus:#66bfcb;
  --ok:#83b08d; --bad:#ef7a6e; --track:#08170f; --timer:#cbe880; --edge:rgba(255,255,255,.32); --tab:#ffc72c; --hover:#ffffff;
  --ok-card:#cbe880; --ok-card-ink:#154734; --ok-edge:#cbe880; --ok-dot:#154734; --ok-dot-ink:#cbe880;
  --overlay:rgba(0,0,0,.66); --shadow:rgba(0,0,0,.5); color-scheme:dark}

[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0;overflow-x:clip}
/* tamaño base un punto más chico que el del navegador (15 px), respetando si el usuario lo agrandó */
html{font-size:93.75%}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%}
body.player{font-size:17px}
button,input,select,textarea{font:inherit;color:inherit}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--sel)}
button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* encabezado: siempre el verde de marca con la franja amarilla, en los dos modos */
.hdr{background:var(--brand);color:#fff}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));max-width:1200px;margin:0 auto}
.brandbox{display:flex;align-items:center;gap:14px;min-width:0}
.logo{flex:none;width:132px;height:36px;background:#fff;-webkit-mask:url(img/logo-blanco.png) left center/contain no-repeat;mask:url(img/logo-blanco.png) left center/contain no-repeat}
.brand{font-weight:700;font-size:1rem;border-left:1px solid rgba(255,255,255,.35);padding-left:14px;min-width:0;line-height:1.25}
.brand small{display:block;font-weight:400;color:rgba(255,255,255,.8);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .row{flex-wrap:nowrap;min-width:0}
.hdr .status{color:rgba(255,255,255,.85);white-space:nowrap}
.hdr .status.off{color:var(--accent)}
.hdr .btn,.hdr .btn.ghost{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.hdr .btn:hover{background:rgba(255,255,255,.1)}
.hdr :focus-visible{outline-color:var(--accent)}
.band{height:6px;background:var(--accent)}
body[data-team] .band{background:var(--hc)}
@media (max-width:600px){.logo{width:98px;height:28px}.brand{display:none}#who{display:none}}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--hc);color:var(--hc-ink);font-weight:700;font-size:.95rem;white-space:nowrap;max-width:62vw;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 0 0 2px var(--edge)}
.status{font-size:.8rem;color:var(--muted)}
.status.off{color:var(--bad);font-weight:700}
.demo{background:var(--accent);color:var(--on-accent);text-align:center;font-size:.85rem;padding:4px 12px;font-weight:700}

/* estructura y tipografía */
main{max-width:1200px;margin:0 auto;padding:12px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.narrow{max-width:760px;margin:0 auto}
.screen{display:flex;flex-direction:column;gap:22px}
.center{text-align:center;align-items:center}
h1{font-family:var(--display);font-size:clamp(2rem,6vw,3.4rem);line-height:1.08;margin:0;text-wrap:balance;font-weight:800;color:var(--heading);letter-spacing:-.01em;overflow-wrap:break-word;min-width:0}
h2{font-family:var(--display);font-size:clamp(1.35rem,3.6vw,2rem);line-height:1.15;margin:0;text-wrap:balance;font-weight:700;color:var(--heading);overflow-wrap:break-word;min-width:0}
h3{font-family:var(--display);font-size:1.08rem;margin:0;font-weight:700}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.lead{font-size:1.12rem;color:var(--muted);max-width:60ch}
body:not(.player) .lead{font-family:var(--read);font-size:1.1rem;line-height:1.55}
/* rótulo sobre un título («Torneo actual»): celeste, negrita y a 19 px, que cuenta como texto grande */
.eyebrow{font-size:1.25rem;font-weight:700;line-height:1.2;color:var(--label)}
.hero{background:var(--surface);border-radius:var(--r);padding:36px 24px;border:2px solid var(--line);margin-top:20px}
@media (max-width:520px){.hero{padding:26px 16px;margin-top:8px}}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.card{border:2px solid var(--line);background:var(--surface);border-radius:var(--r);padding:20px;min-width:0}
@media (max-width:520px){.card{padding:16px}}
.tag{border:2px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.9rem;background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.dot{display:inline-block;width:16px;height:16px;border-radius:50%;background-color:var(--c);background-image:var(--pat,none);background-size:var(--pats,auto);box-shadow:inset 0 0 0 1px var(--edge);flex:none}
.empty{border:2px dashed var(--line);border-radius:var(--r);padding:28px;text-align:center;color:var(--muted)}
.msg{font-size:.95rem;border-radius:10px;padding:8px 12px;background:var(--bg);color:var(--ink);border:2px solid var(--line)}
.msg.ok{border-color:var(--ok)}.msg.bad{border-color:var(--bad)}
.field{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:var(--muted);min-width:0}
.field input,.field select,.field textarea{border:2px solid var(--field);background:var(--surface);border-radius:10px;padding:8px 10px;font-size:1rem;color:var(--ink);min-width:0;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sel)}
.link{background:none;border:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:10px 12px;min-height:44px}
.link:hover{color:var(--ink)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
/* campos de a dos: el campo va al fondo de su celda, así quedan alineados aunque un rótulo ocupe dos renglones */
.grid2>.field{justify-content:flex-end}

/* botones: principal (relleno), secundario (borde), fantasma, acento, peligro y de equipo */
.btn{border:2px solid var(--field);color:var(--heading);background:var(--surface);border-radius:14px;padding:10px 22px;min-height:var(--tap);font-weight:700;font-size:1.05rem;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-wrap:balance;text-align:center}
.btn:not(:disabled):hover{border-color:var(--sel)}
.btn:active{transform:translateY(2px)}
.player .btn{min-height:52px}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.primary:not(:disabled):hover{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--primary)}
.btn.accent{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.house{background:var(--hc);color:var(--hc-ink);border-color:var(--hc);box-shadow:inset 0 0 0 2px var(--edge)}
.btn.small{padding:6px 12px;min-height:40px;font-size:.9rem;border-radius:10px}
.btn.ghost{background:transparent}
.btn.danger{border-color:var(--bad);color:var(--bad);background:var(--surface)}
.btn.big{font-size:1.3rem;padding:14px 28px;min-height:60px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:default}

/* equipos: la trama (--pat y --pats, de IH.teamStyle) acompaña siempre al color */
.teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px}
.hcard{border:4px solid var(--c);background:var(--surface);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:16px;font-size:1.25rem;font-weight:700;text-align:left;color:var(--ink);min-height:84px;position:relative}
.hcard i{width:56px;height:56px;border-radius:50%;flex:none;border:3px solid var(--surface);box-shadow:0 0 0 2px var(--c);background-color:var(--c);background-image:var(--pat,none);background-size:var(--pats,auto)}
.hcard[aria-pressed="true"]{background-color:var(--c);background-image:var(--pat,none);background-size:var(--pats,auto);color:var(--ci);box-shadow:0 0 0 4px var(--bg),0 0 0 8px var(--ink)}
.hcard[aria-pressed="true"]::after{content:"✓";content:"✓"/"";margin-left:auto;font-size:1.6rem;line-height:1;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--surface);color:var(--ink);flex:none}
.hcard[aria-pressed="true"] i{border-color:var(--ci);box-shadow:none}
@media (max-height:700px){.hcard{min-height:70px;padding:10px 14px}.hcard i{width:46px;height:46px}.teams{gap:10px}}
.avatar{width:104px;height:104px;border-radius:50%;background:var(--hc);color:var(--hc-ink);display:grid;place-items:center;font-family:var(--display);font-size:2.8rem;font-weight:800;box-shadow:inset 0 0 0 3px var(--edge)}
.codein{font-family:var(--display);font-size:clamp(2.6rem,12vw,3.4rem);font-weight:800;text-align:center;letter-spacing:.28em;padding-left:.28em;width:100%;max-width:340px;min-height:76px;border:3px solid var(--sel);border-radius:16px;background:var(--surface);color:var(--heading);font-variant-numeric:tabular-nums}
.codein::placeholder{color:var(--field);opacity:.55}
.namein{font-size:1.4rem;text-align:center;width:100%;max-width:420px;min-height:60px;border:3px solid var(--field);border-radius:14px;padding:12px;background:var(--surface);color:var(--ink)}
.namein:focus{border-color:var(--sel)}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);width:100%;max-width:420px;font-size:.9rem}
.or::before,.or::after{content:"";flex:1;height:2px;background:var(--line)}

/* pregunta: Roboto grande y con aire, para chicos de 6 a 12 años */
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
/* celular angosto: la categoría arriba y «Pregunta 1 de 2» con los segundos en la misma línea */
@media (max-width:480px){.player .qhead{display:grid;grid-template-columns:1fr auto;gap:8px 10px}.player .qhead .tag{grid-column:1/-1;justify-self:start}}
.timer{height:16px;border-radius:999px;background:var(--track);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.timer>div{height:100%;background:var(--timer);transform-origin:left;transition:transform .2s linear;box-shadow:inset 0 0 0 2px var(--edge)}
body[data-team] .timer>div{background:var(--hc)}
.timer.warn>div,body[data-team] .timer.warn>div{background:var(--bad)}
.timer.paused>div,body[data-team] .timer.paused>div{background:var(--muted);opacity:.55}
.secs{font-family:var(--display);font-variant-numeric:tabular-nums;font-weight:800;font-size:1.5rem;min-width:3ch;text-align:right}
.qtext{font-size:clamp(1.5rem,5vw,2.5rem);line-height:1.28;font-weight:700;text-wrap:balance;overflow-wrap:break-word;color:var(--ink)}
/* imagen de la pregunta (opcional): abajo del texto en el alumno, al lado en el proyector. El alto es fijo y el
   ancho sale de la proporción que viene en cur.img, así el lugar queda reservado mientras baja */
.qrow{display:flex;flex-direction:column;gap:14px}
.qimg{align-self:center;height:min(30vh,300px);max-width:100%;border-radius:var(--r);overflow:hidden;background:var(--sunken);border:2px solid var(--line)}
.qimg img{display:block;width:100%;height:100%;object-fit:contain}
.qimg img:not([src]){visibility:hidden}
.opts{display:grid;gap:12px}
.opt{display:flex;align-items:center;gap:14px;text-align:left;border:3px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px 16px;font-size:clamp(1.2rem,4vw,1.6rem);line-height:1.25;font-weight:500;min-height:76px;color:var(--ink);overflow-wrap:break-word}
.opt .l{font-family:var(--display);flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);border:2px solid var(--field);color:var(--ink);font-size:1.15rem;font-weight:800}
/* solo las opciones del alumno se pueden tocar; en el proyector el remarco al pasar el mouse es solo para señalar.
   Y solo con mouse de verdad: en las tablets el «hover» queda pegado después de tocar y parecería una respuesta elegida. */
@media (hover:hover){button.opt:not(:disabled):hover{border-color:var(--sel)}
  /* proyector: las opciones no se eligen, pero se remarcan con el mouse para señalarlas al explicar */
  .proj .opt:not(.ok):hover{border-color:var(--hover)}}
/* la opción que eligió el alumno: borde grueso, fondo teñido y la letra rellena, en los dos modos */
.opt.sel{border-color:var(--sel);border-width:4px;background:color-mix(in srgb,var(--sel) 13%,var(--surface))}
.opt.sel .l{background:var(--sel);color:var(--on-primary);border-color:var(--sel)}
/* correcta e incorrecta: además del color, ✓ y ✗ (daltonismo); la letra queda porque el mensaje dice «Era la B» */
/* la correcta: en claro, borde y fondo verde 356C suaves; en oscuro, tarjeta rellena de verde claro 373C con letra
   verde 3435C (verde sobre verde no se distinguía en el proyector) */
.opt.ok{border-color:var(--ok-edge);border-width:4px;background:var(--ok-card);color:var(--ok-card-ink)}
.opt.ok .l{background:var(--ok-dot);color:var(--ok-dot-ink);border-color:var(--ok-dot)}
.opt.ok .cnt{color:inherit}
.opt.bad{border-color:var(--bad);border-width:4px;border-style:dashed;background:color-mix(in srgb,var(--bad) 13%,var(--surface))}
.opt.bad .l{background:var(--bad);color:var(--surface);border-color:var(--bad)}
.opt.ok .l,.opt.bad .l{position:relative}
.opt.ok .l::after,.opt.bad .l::after{position:absolute;right:-.5em;top:-.5em;width:1.45em;height:1.45em;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-size:.85em;line-height:1;font-weight:800}
.opt.ok .l::after{content:"✓";content:"✓"/"(correcta)";color:var(--ok-edge);border:2px solid var(--ok-edge)}
.opt.bad .l::after{content:"✗";content:"✗"/"(incorrecta)";color:var(--bad);border:2px solid var(--bad)}
.opts:has(.ok) .opt:not(.ok):not(.bad){opacity:.72}
.opt:disabled{cursor:default}
.opt .cnt{margin-left:auto;font-family:var(--display);font-variant-numeric:tabular-nums;color:var(--muted);font-size:1.1rem;font-weight:700}
/* «Confirmar respuesta»: centrado; en el celular ocupa todo el ancho */
.confirm{align-self:center;width:min(100%,440px)}
.fb{min-height:1.6em;font-size:1.35rem;font-weight:700;text-align:center}
.fb.ok{color:var(--ok)}.fb.bad{color:var(--bad)}
.big{font-family:var(--display);font-size:clamp(3rem,12vw,6rem);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
/* alumno: dos columnas de opciones en notebook y tablet horizontal; compacto en celular acostado */
@media (min-width:900px){.player .opts.two{grid-template-columns:1fr 1fr}}
@media (max-height:520px) and (orientation:landscape){
  .player .qtext{font-size:1.2rem}.player .opts{grid-template-columns:1fr 1fr;gap:8px}
  .player .opt{min-height:52px;padding:8px 12px;font-size:1.05rem}.player .opt .l{width:32px;height:32px}
  .player .confirm{min-height:48px;padding-block:8px;font-size:1.1rem}
  .player .qimg{height:34vh}
  .player .screen{gap:12px}.hdr .top{padding-block:6px}
}

/* barras y podio: la pista contrasta con todos los colores de equipo y el relleno lleva borde (el amarillo sobre beige) */
.bars{display:flex;flex-direction:column;gap:10px;width:100%}
.bar{display:grid;grid-template-columns:minmax(0,11em) 1fr 4ch;align-items:center;gap:12px}
.bname{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.btrack{height:34px;background:var(--track);border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.bfill{height:100%;background-color:var(--c);background-image:var(--pat,none);background-size:var(--pats,auto);border-radius:10px;box-shadow:inset 0 0 0 2px var(--edge);transition:width .8s cubic-bezier(.2,.9,.3,1)}
.bval{font-family:var(--display);font-weight:800;text-align:right;font-variant-numeric:tabular-nums;font-size:1.35rem}
@media (max-width:520px){.bar{grid-template-columns:1fr 4ch;gap:4px 10px}.bname{grid-column:1/-1}}
.stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:12px;max-width:760px;width:100%;margin:0 auto}
.step{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.step .who{font-weight:700;font-size:clamp(.95rem,2.6vw,1.5rem);text-align:center;overflow-wrap:break-word;min-width:0}
.step .pts{font-family:var(--display);font-size:clamp(1.3rem,4vw,2.4rem);font-weight:800;font-variant-numeric:tabular-nums}
.block{width:100%;border-radius:14px 14px 0 0;background-color:var(--c);background-image:var(--pat,none);background-size:var(--pats,auto);box-shadow:inset 0 0 0 2px var(--edge);color:var(--ci);display:flex;justify-content:center;padding-top:10px;font-family:var(--display);font-size:clamp(1.8rem,7vw,3.8rem);font-weight:800;transform-origin:bottom;animation:rise .7s cubic-bezier(.2,.9,.3,1.2) both}
.step:nth-child(1) .block{animation-delay:.35s}.step:nth-child(2) .block{animation-delay:.7s}
@keyframes rise{from{transform:scaleY(.05)}to{transform:none}}
.stage.n4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:960px}
.fourth{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:12px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* tablas y panel */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;border-bottom:2px solid var(--line);text-align:center;white-space:nowrap}
th{color:var(--muted);font-weight:700}
th:first-child,td:first-child{text-align:left}
tfoot td{font-weight:700;border-bottom:none;color:var(--heading)}
.tabs{display:flex;gap:4px;border-bottom:3px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{border:none;background:none;padding:10px 14px;min-height:var(--tap);font-weight:700;border-bottom:4px solid transparent;margin-bottom:-3px;color:var(--muted);white-space:nowrap}
.tabs button:hover{color:var(--ink)}
/* pestaña activa: verde de marca en claro (el amarillo sobre beige no se ve), amarillo en oscuro */
.tabs button[aria-selected="true"]{border-color:var(--tab);color:var(--heading)}
.qlist{display:flex;flex-direction:column;gap:10px}
.qitem{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:start}
.qitem>div{min-width:0}
.qitem .meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.qitem .o{font-size:.92rem;color:var(--muted)}
.qitem .o b{color:var(--ok)}
.pill{font-size:.75rem;border-radius:999px;padding:2px 10px;background:var(--sunken);color:var(--ink);border:1px solid var(--line);font-weight:700;white-space:nowrap}
.pill.E{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.pill.warn{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.picker button{border:3px solid var(--field);background:var(--surface);border-radius:14px;padding:14px 6px;font-family:var(--display);font-size:1.35rem;font-weight:700;color:var(--ink)}
.picker button:hover{border-color:var(--sel)}
.picker button[aria-pressed="true"]{border-color:var(--primary);background:var(--primary);color:var(--on-primary)}
.overlay{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;padding:16px;z-index:50}
.dialog{background:var(--surface);color:var(--ink);border-radius:var(--r);padding:22px;width:min(640px,100%);max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:14px;border:2px solid var(--line);border-top:6px solid var(--primary);box-shadow:0 12px 40px var(--shadow)}

/* configuración */
.cfg{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:860px){.cfg{grid-template-columns:1fr}}
.cfgnav{display:flex;flex-direction:column;gap:4px}
@media (max-width:860px){.cfgnav{flex-direction:row;overflow-x:auto;padding-bottom:4px}}
.cfgnav button{border:none;background:none;text-align:left;padding:10px 12px;min-height:44px;border-radius:10px;font-weight:600;color:var(--muted);display:flex;gap:10px;align-items:center;white-space:nowrap}
.cfgnav button:hover{color:var(--ink);background:var(--sunken)}
.cfgnav button b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sunken);border:1px solid var(--field);color:var(--ink);font-size:.8rem;flex:none}
.cfgnav button[aria-current="true"]{background:var(--surface);color:var(--heading);box-shadow:inset 4px 0 0 var(--tab)}
.cfgnav button[aria-current="true"] b{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.cfgsec{display:flex;flex-direction:column;gap:16px}
.cfgsec>.head p{max-width:65ch;font-family:var(--read);color:var(--muted);line-height:1.55}
.savebar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.trow{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr) auto;gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line)}
@media (max-width:620px){.trow{grid-template-columns:auto minmax(0,1fr) auto}.trow .masc{grid-column:2/4}}
.swbtn{width:44px;height:44px;border-radius:12px;border:3px solid var(--surface);outline:2px solid var(--field);background:var(--c)}
.swatches{display:grid;grid-template-columns:repeat(6,36px);gap:8px}
.swatches button{width:36px;height:36px;border-radius:10px;border:3px solid transparent;background:var(--c);box-shadow:inset 0 0 0 1px var(--edge)}
.swatches button[aria-pressed="true"]{border-color:var(--ink)}
.preview{display:flex;flex-wrap:wrap;gap:8px}
.rounds{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.rounds{grid-template-columns:1fr}}
.round{border:2px solid var(--line);border-radius:var(--r);padding:14px;background:var(--surface);display:flex;flex-direction:column;gap:10px;min-width:0}
.round.E{border-color:var(--sel)}
.round h3{display:flex;align-items:center;gap:8px}
.round h3 .pill{font-weight:600}
.catcard{border:2px solid var(--line);border-radius:12px;padding:10px;display:grid;grid-template-columns:minmax(0,1fr) 72px 64px;gap:8px;align-items:end;background:var(--sunken)}
.catcard .acts{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.catcard .acts .muted{margin-right:auto;font-size:.82rem}
.catcard .field input{padding:6px 8px}
.iconbtn{border:2px solid var(--field);background:var(--surface);border-radius:8px;min-width:34px;height:34px;padding:0 8px;font-weight:700;color:var(--ink);font-size:.85rem}
.iconbtn:hover{border-color:var(--sel)}
.optcards{display:grid;gap:10px}
.optcard{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--line);border-radius:12px;padding:12px;background:var(--surface);color:var(--ink);cursor:pointer}
.optcard:hover{border-color:var(--field)}
.optcard:has(input:checked){border-color:var(--sel);box-shadow:inset 4px 0 0 var(--sel)}
.optcard input{margin-top:4px}

/* proyector: sala, código y equipos */
.lobby{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;align-items:start}
@media (max-width:820px){.lobby{grid-template-columns:1fr}}
.joincode{font-family:var(--display);font-size:clamp(3.2rem,10vw,7.5rem);font-weight:800;letter-spacing:.1em;line-height:1;font-variant-numeric:tabular-nums;background:var(--accent);color:var(--on-accent);border-radius:16px;padding:10px 22px 10px calc(22px + .1em)}
.qr{background:#fff;padding:12px;border-radius:12px;display:inline-block}
.qr img,.qr canvas{display:block}
.hcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.hcol{border:3px solid var(--c);border-radius:14px;padding:12px;background:var(--surface);min-width:0}
.hcol h3{display:flex;align-items:center;gap:10px}
.hcol h3::before{content:"";width:26px;height:26px;border-radius:50%;flex:none;background-color:var(--c);background-image:var(--pat,none);background-size:var(--pats,auto);box-shadow:inset 0 0 0 1px var(--edge)}
.hcol h3>span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}
.hcol ul{list-style:none;margin:8px 0 0;padding:0;font-size:.92rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 6px}
.hcol li button{background:none;border:1px solid transparent;border-radius:8px;padding:2px 6px;color:inherit;text-align:left}
.hcol li button:hover{border-color:var(--field);color:var(--ink)}
.hcol li.rep button{color:var(--ink);font-weight:700;background:color-mix(in srgb,var(--c) 22%,var(--surface));border-color:var(--c)}
.hcol .norep{font-size:.82rem;color:var(--bad);margin-top:6px}
.answered{font-family:var(--display);font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
/* proyector durante la partida: usa todo el ancho y escala con la pantalla para leerse desde el fondo */
main:has(> #s-game:not([hidden])),body:has(.proj:not([hidden])) .top{max-width:min(1760px,100%)}
.proj{gap:clamp(16px,2.4vh,30px)}
.proj .tag,.proj .online{font-weight:600;font-size:clamp(1rem,1.15vw,1.4rem);padding:6px 16px}
.proj .row>.row>.muted{font-size:clamp(1rem,1.15vw,1.4rem)}
.proj .qnum{font-size:clamp(1.1rem,1.5vw,1.85rem)}
.proj .secs{font-size:clamp(1.7rem,2.8vw,3.5rem)}
.proj .timer{height:clamp(16px,1.8vh,26px)}
.proj .qtext{font-size:clamp(2rem,3.9vw,5rem);line-height:1.14;max-width:28ch}
.proj .qrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(16px,2vw,40px)}
/* en el proyector la imagen achica con el alto de la pantalla para que todo entre sin scroll (520 px = encabezado, opciones y pie) */
.proj .qimg{height:max(150px,min(34vh,calc(100vh - 520px),420px));max-width:min(44vw,760px)}
.proj .opts{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(12px,1.4vw,24px)}
.proj .opt{font-size:clamp(1.4rem,2.2vw,2.8rem);font-weight:700;min-height:clamp(84px,13vh,150px);padding:14px clamp(16px,1.6vw,28px);gap:clamp(14px,1.4vw,24px);border-width:4px}
.proj .opt .l{width:clamp(48px,3.7vw,74px);height:clamp(48px,3.7vw,74px);font-size:clamp(1.2rem,1.7vw,2.15rem)}
.proj .opt .cnt{font-size:clamp(1.2rem,1.75vw,2.2rem)}
.proj .answered{font-size:clamp(1.3rem,1.85vw,2.2rem)}
.proj .lead{font-size:clamp(1.1rem,1.5vw,1.75rem)}
.proj .bar{font-size:clamp(1.1rem,1.7vw,2.1rem);grid-template-columns:minmax(0,10em) 1fr 3ch;gap:clamp(12px,1.2vw,20px)}
.proj .bname{font-size:1em}
.proj .btrack{height:clamp(32px,4.4vh,54px)}
.proj .bval{font-size:1.3em}
.proj .hcol h3{font-size:clamp(1.05rem,1.3vw,1.6rem)}
.proj .hcol ul{font-size:clamp(.95rem,1.15vw,1.4rem);color:var(--ink)}
.proj .pill,.proj .hcol .norep{font-size:clamp(.85rem,1vw,1.2rem)}
.proj .pill{padding:4px 12px}
.proj .stage{max-width:min(1200px,100%)}
.proj .step .who{font-size:clamp(1.1rem,2vw,2.4rem)}
.proj .step .pts{font-size:clamp(1.6rem,3vw,3.6rem)}
.proj .btn.big{font-size:clamp(1.3rem,1.6vw,1.9rem);min-height:clamp(60px,7vh,84px)}
.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;width:100%;max-width:900px}
.mcard{border:3px solid var(--line);background:var(--surface);border-radius:var(--r);padding:20px;text-align:left;display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.mcard:not(:disabled):hover{border-color:var(--field)}
.mcard b{font-size:1.25rem;color:var(--heading)}
.mcard span{color:var(--muted);font-size:.95rem}
.mcard.main{border-color:var(--sel)}
.mcard.main:not(:disabled):hover{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--sel)}
.mcard:disabled{opacity:.5}
.share{border-top:2px solid var(--line);padding-top:18px;width:100%;max-width:900px;display:flex;flex-direction:column;gap:12px;align-items:center}
.share .row{justify-content:center}
.repbox{border:3px solid var(--hc);border-radius:var(--r);padding:18px;background:var(--surface);display:flex;flex-direction:column;gap:12px;align-items:center;max-width:520px;width:100%}

/* ---------- v3: portada alumno / docente ---------- */
.welcome{padding-top:18px}
.who-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:stretch}
@media (max-width:720px){.who-grid{grid-template-columns:1fr}}
.who-grid.solo{grid-template-columns:1fr;max-width:520px;width:100%;margin:0 auto}
.who-card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;min-width:0}
.who-card.student{border:3px solid var(--sel)}
.who-card.teacher{background:var(--bg);border-color:var(--field);border-style:dashed}
/* el escudo del colegio en lugar de un ícono genérico (el filete amarillo lo deja usar sobre fondo oscuro) */
.who-card.student .who-ico{width:63px;height:84px;margin:6px 0 4px;border-radius:0;background:url(img/escudo.png) center/contain no-repeat}
.who-card.student .who-ico svg{display:none}
.who-ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary)}
.who-card.teacher .who-ico{background:var(--sunken);color:var(--heading);border:2px solid var(--field)}
/* botón de Google: blanco en los dos modos, como pide la marca de Google */
.gbtn{display:inline-flex;align-items:center;gap:10px;border:1px solid #747775;background:#fff;color:#1f1f1f;border-radius:999px;padding:8px 16px 8px 12px;min-height:44px;font-weight:500;font-size:.92rem;font-family:var(--ui)}
.gbtn:hover{background:#f3f6f4}.gbtn:disabled{opacity:.6}
.gicon{width:18px;height:18px;flex:none}
.foot{text-align:center;color:var(--muted);font-size:.75rem;padding:0 16px 24px}
/* mensajes de espera y progreso del alumno */
.waiting{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-weight:600;font-size:1.05rem}
.dots{display:inline-flex;gap:4px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--hc);box-shadow:inset 0 0 0 1px var(--edge);animation:blink 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.qnum{font-weight:700;color:var(--heading);font-variant-numeric:tabular-nums}
.endbox{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--surface);border:3px solid var(--hc);border-radius:var(--r);padding:22px;width:100%;max-width:560px;text-align:center;align-self:center}
/* ---------- v3: panel docente ---------- */
.homebtn{display:inline-flex;align-items:center;gap:6px}
.brandlink{background:none;border:0;padding:0;color:inherit;display:flex;align-items:center;gap:14px;text-align:left;min-width:0}
.dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.dash>.card{grid-column:span 6;display:flex;flex-direction:column;gap:12px}
.dash>.card.full{grid-column:1/-1}
@media (max-width:860px){.dash>.card{grid-column:1/-1}}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px}
.quick button{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:4px;color:var(--ink)}
.quick button:hover{border-color:var(--field)}
.quick button b{color:var(--heading);font-size:1.05rem}
.quick button span{color:var(--muted);font-size:.85rem}
.quick button.main{background:var(--primary);border-color:var(--primary)}
.quick button.main b,.quick button.main span{color:var(--on-primary)}
.quick button.main:hover{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--primary)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.kpi{background:var(--sunken);border-radius:12px;padding:10px 12px}
.kpi b{display:block;font-family:var(--display);font-size:1.6rem;color:var(--heading);font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:.8rem;color:var(--muted)}
.lvchips{display:flex;flex-wrap:wrap;gap:6px}
.lvchips span{border:2px solid var(--line);border-radius:8px;padding:2px 10px;font-weight:700;font-size:.9rem;color:var(--muted)}
.lvchips span.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.glist{display:flex;flex-direction:column;gap:8px}
.gitem{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:2px solid var(--line);border-radius:12px;padding:10px 12px}
.gitem .row{gap:8px}
.live{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ok)}
.live::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ok);animation:blink 1.6s infinite}
.online{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ok);border-radius:999px;padding:2px 10px;min-height:36px;font-weight:700;font-size:.9rem;background:var(--surface);color:var(--ink)}
.online.warn{border-color:var(--bad);color:var(--bad)}
.hcol li.offl button{opacity:.55;text-decoration:line-through}
.toasts{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px))}
.toast{background:var(--surface);color:var(--ink);border:2px solid var(--line);border-left:6px solid var(--bad);border-radius:12px;padding:10px 12px;box-shadow:0 6px 24px var(--shadow);display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:.92rem}
.toast.ok{border-left-color:var(--ok)}
.toast .x{background:none;border:0;font-size:1.1rem;color:var(--muted);padding:2px 6px}
.ctlban{border:3px solid var(--accent);border-radius:var(--r);padding:24px;background:var(--surface);display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.acl{display:flex;flex-direction:column;gap:6px}
.acl .gitem{padding:6px 10px}
#ac-body{display:flex;flex-direction:column;gap:12px}
.toast .btn{white-space:nowrap}
/* editor de preguntas: vista previa de la imagen */
.imgpick>.row{align-items:center;flex-wrap:nowrap}
.imgprev{flex:none;width:128px;height:96px;border-radius:10px;overflow:hidden;border:2px solid var(--line);background:var(--sunken)}
.imgprev img{display:block;width:100%;height:100%;object-fit:contain}
.imgctl{display:flex;flex-direction:column;gap:6px;min-width:0}