/* Layout: app de trabajo para el profe (carpetas | cuestionarios, lista | pregunta), pantalla de proyector a lo grande y pantallas de alumno centradas. Los 6 colores de respuesta son el sello de la web. */
:root{
  /* Repasópolis de día: cielo muy claro, superficies blancas, tinta azul marino. */
  --bg:#EEF3FB; --surface:#FFFFFF; --surface-2:#E5ECF7; --line:#D2DBEA; --ink:#172036; --muted:#536079;
  --brand:#CC3D27; --brand-ink:#FFFFFF; --brand-deep:#9E2B19; --focus:#2E6FD8; --focus-soft:rgba(46,111,216,.18);
  --a:#DE4339; --b:#2C6BD6; --c:#E8A600; --d:#13906A; --e:#8250D2; --f:#0B8F9C; --c-ink:#2A1E00; --tile-ink:#FFFFFF;
  --ok:#13906A; --bad:#D23B3B; --warn:#A86E00; --ok-soft:#E0F3EB; --bad-soft:#FBE4E2; --warn-soft:#FFF2D6; --mid:#C78100;
  --shadow:0 1px 2px rgba(23,40,90,.06),0 10px 28px rgba(23,40,90,.08); --edge:#C9D3E4; --ground:#C3CDDF;
  --stage:#1d2240; --stage-2:#272e55; --stage-ink:#ffffff;
  --f-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
}
/* De noche (modo oscuro): la misma ciudad con la paleta índigo del proyector. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#10133A; --surface:#191E4D; --surface-2:#242B63; --line:#333C7D; --ink:#EEF0FF; --muted:#AAB2DC;
  --brand:#FF7A62; --brand-ink:#210B06; --brand-deep:#B9442F; --focus:#8DB4FF; --focus-soft:rgba(141,180,255,.25);
  --a:#E2524A; --b:#3F7FE6; --c:#F2B61E; --d:#1C9E73; --e:#9264E0; --f:#16A2AE; --c-ink:#241A00; --tile-ink:#FFFFFF;
  --ok:#2BC08C; --bad:#F26A6A; --warn:#E9AE34; --ok-soft:#133A3A; --bad-soft:#3D1B33; --warn-soft:#3A3120; --mid:#E9AE34;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35); --edge:#0B0E2C; --ground:#0B0E2C; --stage:#0b0f22; --stage-2:#161c3a; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#10133A; --surface:#191E4D; --surface-2:#242B63; --line:#333C7D; --ink:#EEF0FF; --muted:#AAB2DC;
  --brand:#FF7A62; --brand-ink:#210B06; --brand-deep:#B9442F; --focus:#8DB4FF; --focus-soft:rgba(141,180,255,.25);
  --a:#E2524A; --b:#3F7FE6; --c:#F2B61E; --d:#1C9E73; --e:#9264E0; --f:#16A2AE; --c-ink:#241A00; --tile-ink:#FFFFFF;
  --ok:#2BC08C; --bad:#F26A6A; --warn:#E9AE34; --ok-soft:#133A3A; --bad-soft:#3D1B33; --warn-soft:#3A3120; --mid:#E9AE34;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35); --edge:#0B0E2C; --ground:#0B0E2C; --stage:#0b0f22; --stage-2:#161c3a; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--b)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);line-height:1.12;text-wrap:balance;margin:0;font-weight:700}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.muted{color:var(--muted)}
.center{text-align:center;justify-content:center}
.contents{display:contents}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.tight{gap:4px;flex-wrap:nowrap}
.row.between{justify-content:space-between}
.row.center{justify-content:center}
.row.wrap{flex-wrap:wrap}
.stack{display:grid;gap:16px}
.grow{flex:1}
.pad4{padding:0 4px}
.eyebrow{font-size:14px;font-weight:700;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Botones: con un canto inferior que se hunde al pulsar (como las teclas de una recreativa, pero discreto) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--line);background:var(--surface);padding:9px 15px;border-radius:12px;font-weight:700;line-height:1.2;white-space:nowrap;transition:background .15s,border-color .15s,transform .08s,box-shadow .08s;text-decoration:none;color:var(--ink);box-shadow:0 2px 0 var(--edge)}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--edge)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 3px 0 var(--brand-deep)}
.btn.primary:hover{filter:brightness(1.06);background:var(--brand)}
.btn.primary:active{transform:translateY(3px);box-shadow:0 0 0 var(--brand-deep)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--surface-2)}
.btn.ghost:active{transform:none}
.btn.danger{color:var(--bad)}
.btn.danger-fill{background:var(--bad);border-color:var(--bad);color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--bad) 60%,#000)}
.btn.sm{padding:6px 11px;font-size:14px;border-radius:10px}
.btn.big{padding:12px 22px;font-size:17px;border-radius:14px}
.btn.big.primary{box-shadow:0 4px 0 var(--brand-deep)}
.btn.big.primary:active{transform:translateY(4px)}
.btn.huge{padding:15px 28px;font-size:20px;border-radius:16px;font-family:var(--f-display)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none;transform:none;box-shadow:none}
.host .btn:not(.x){box-shadow:none}
.iconbtn{position:relative;width:38px;height:38px;flex:none;display:inline-grid;place-items:center;border-radius:11px;border:1.5px solid transparent;background:transparent;color:var(--muted);font-size:18px;line-height:1}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn.danger{color:var(--bad)}
.iconbtn[disabled]{opacity:.35;cursor:not-allowed;background:transparent}
.linkbtn{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:2px;font-weight:700;color:var(--ink);text-align:left}
.linkbtn:hover span{text-decoration:underline}
.tag,.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap;line-height:1.4}
.tag i{width:8px;height:11px;border-radius:2px 2px 1px 1px;display:inline-block}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.mid{background:var(--warn-soft);color:var(--warn)}
.pill.live{background:var(--b);color:#fff} .pill.task{background:var(--e);color:#fff}
.dotn{position:absolute;top:1px;right:1px;min-width:18px;height:18px;border-radius:9px;background:var(--brand);color:var(--brand-ink);font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 4px;box-shadow:0 0 0 2px var(--surface)}

/* Campos: etiquetas en minúscula normal y un poco más gruesas (sin mayúsculas espaciadas) */
.field{display:grid;gap:6px;min-width:0}
.field.inline{display:flex;align-items:center;gap:10px}
.field.full{grid-column:1/-1}
.lbl,.field>label{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:0;text-transform:none}
.input{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;min-width:0;transition:border-color .15s,box-shadow .15s}
.input:hover:not(:focus):not([readonly]):not([disabled]){border-color:color-mix(in srgb,var(--muted) 45%,var(--line))}
.input.big{font-size:22px;padding:12px 16px;font-family:var(--f-display);font-weight:700}
.input.pin{letter-spacing:.5em;text-align:center;font-size:32px;max-width:220px;margin:0 auto;font-family:var(--f-display);font-weight:800}
textarea.input{resize:vertical;line-height:1.5}
.input:focus{border-color:var(--focus);outline:none;box-shadow:0 0 0 4px var(--focus-soft)}
.hint{font-size:14px;color:var(--muted)}
.err{color:var(--bad);font-weight:700;font-size:14px;min-height:1.2em}
.err:empty{min-height:0}
.note{font-size:13.5px;color:var(--ink);background:var(--warn-soft);border-radius:12px;padding:10px 12px}
.note.warnbox{display:grid;gap:8px;color:var(--ink);font-size:14px;margin-bottom:14px}
.check{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;flex:1 1 260px;transition:border-color .15s,background .15s}
.check:has(input:checked){border-color:color-mix(in srgb,var(--brand) 55%,var(--line));background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--brand)}
.check strong{display:block}
.check small{display:block;color:var(--muted);font-size:13px}
.check:has(input:disabled){opacity:.55;cursor:not-allowed}
.switch{display:inline-flex;gap:8px;align-items:center;font-weight:700;cursor:pointer}
.switch input{width:20px;height:20px;accent-color:var(--brand)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.facts{margin:0;padding-left:20px;display:grid;gap:4px;color:var(--ink)}

/* Barra superior y banda de la vista previa */
.banner{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:color-mix(in srgb,var(--lamp,#FFD84D) 30%,var(--surface));color:var(--ink);font-size:13px;padding-block:6px;text-align:center;border-bottom:1px solid color-mix(in srgb,var(--lamp,#FFD84D) 60%,var(--line))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .banner{background:color-mix(in srgb,var(--lamp,#FFD84D) 10%,var(--surface));border-color:var(--line)}}
:root[data-theme="dark"] .banner{background:color-mix(in srgb,var(--lamp,#FFD84D) 10%,var(--surface));border-color:var(--line)}
.banner b{background:var(--lamp,#FFD84D);color:#3A2A00;border-radius:999px;padding:1px 10px;font-weight:800;font-size:12px}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border-bottom:1px solid var(--line);padding-block:10px;box-shadow:0 1px 0 rgba(23,40,90,.03)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.brand.sm{font-size:19px;gap:8px}
.brandbtn{border:0;background:transparent;padding:0;color:var(--ink);border-radius:10px}
.navtabs{display:flex;gap:2px;background:var(--surface-2);padding:4px;border-radius:999px}
.navtab{border:0;background:transparent;padding:7px 16px;border-radius:999px;font-weight:700;color:var(--muted);white-space:nowrap}
.navtab:hover{color:var(--ink)}
.navtab.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 var(--edge),0 2px 8px rgba(23,40,90,.08)}
.search{flex:1 1 220px;max-width:440px;min-width:0;position:relative}
.search input{padding-left:40px;border-radius:999px;background:var(--bg);border-color:transparent}
.search input:hover:not(:focus){border-color:var(--line)}
.search input:focus{background:var(--surface)}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-family:var(--f-display);font-size:17px;border:0;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--line)}

/* Portada: la ciudad de día (de noche en modo oscuro) */
.landing{max-width:1240px;margin:0 auto;padding-block:14px 56px}
.land-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.land-hero{position:relative;border-radius:32px;overflow:hidden;isolation:isolate;padding:40px 40px 34px;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 78%);border:1px solid color-mix(in srgb,var(--b) 14%,transparent)}
.land-hero.is-night{background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 85%);border-color:#ffffff14}
.land-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:44px;align-items:start}
.land-left{display:grid;gap:14px;align-content:start;padding-bottom:168px}
.land-orb{position:absolute;z-index:-1;top:30px;left:50%;width:84px;height:84px;border-radius:50%;background:#FFD84D;box-shadow:0 0 0 16px rgba(255,216,77,.22),0 0 0 34px rgba(255,216,77,.1)}
.is-night .land-orb{background:#F6F1D8;box-shadow:inset -16px -8px 0 #DCD5B1,0 0 0 18px rgba(246,241,216,.06);width:64px;height:64px}
.land-city{position:absolute;z-index:-1;left:0;right:0;bottom:0;height:196px}
.land-city::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--ground)}
.is-day .land-city{color:#fff}
.land-claim{font-family:var(--f-display);font-weight:800;font-size:clamp(32px,3.6vw,50px);line-height:1.04;letter-spacing:-.015em;color:var(--ink);max-width:17ch;text-wrap:balance}
.land-claim span{display:inline;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--lamp) 80%,transparent) 58%,color-mix(in srgb,var(--lamp) 80%,transparent) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.is-night .land-claim{color:#fff}
.is-night .land-claim span{background:none;color:var(--lamp);text-shadow:0 0 26px rgba(255,216,77,.35)}
.land-sub{font-size:18px;color:var(--ink);max-width:44ch;opacity:.86}
.is-night .land-sub{color:#D9DDFB;opacity:1}
.join-card{position:relative;margin-top:6px;background:var(--surface);color:var(--ink);border-radius:26px;padding:24px 26px 22px;display:grid;gap:10px;max-width:560px;border:2px solid color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:0 7px 0 color-mix(in srgb,var(--b) 22%,var(--edge)),0 26px 50px rgba(23,40,90,.16)}
.is-night .join-card{border-color:#ffffff1f;box-shadow:0 7px 0 #0A0D2A,0 26px 50px rgba(0,0,0,.4)}
.join-card h1{font-size:clamp(28px,3vw,36px);font-weight:800}
.join-card p{color:var(--muted);font-size:16px}
.join-card .err{color:var(--bad)}
.joinform{display:flex;gap:12px;flex-wrap:wrap}
.joinform .btn{flex:none}
.codein{flex:1 1 180px;width:100%;min-width:0;font-family:var(--f-display);font-size:34px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;text-align:center;border-radius:14px;border:3px solid transparent;padding:10px 14px;background:#fff;color:#162033}
.codein::placeholder{color:#b8bfd6}
.codein:focus{outline:none;border-color:var(--c)}
.codein.sm{font-size:24px;background:var(--bg);color:var(--ink);border:1.5px solid var(--line)}
.landing .codein{font-size:clamp(28px,3vw,38px);background:var(--bg);color:var(--ink);border:2.5px solid var(--line);border-radius:16px;padding:8px 12px;min-height:68px;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.landing .codein::placeholder{color:color-mix(in srgb,var(--muted) 42%,transparent)}
.landing .codein:focus{border-color:var(--b);box-shadow:0 0 0 5px var(--focus-soft);background:var(--surface)}
.joinform .btn.primary.big{min-height:68px;padding:0 30px;font-family:var(--f-display);font-size:23px;font-weight:800;border-radius:16px;box-shadow:0 6px 0 var(--brand-deep)}
.joinform .btn.primary.big:active{transform:translateY(5px);box-shadow:0 1px 0 var(--brand-deep)}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:24px 26px;box-shadow:0 26px 50px rgba(23,40,90,.14);display:grid;gap:12px}
.is-night .auth-card{border-color:#ffffff1f;box-shadow:0 26px 50px rgba(0,0,0,.4)}
.auth-card h2{font-size:28px;font-weight:800}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-2);border-radius:999px;padding:4px;gap:2px}
.tabs button{border:0;background:transparent;padding:8px 9px;border-radius:999px;font-weight:700;color:var(--muted)}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 var(--edge),0 2px 8px rgba(23,40,90,.1)}
.tabs.wide{max-width:520px;margin:18px 0 14px}
.provider{width:100%;justify-content:flex-start;gap:12px;padding:11px 16px}
.provider .pmark{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.authform{display:grid;gap:12px}
.authform .btn.primary.big{font-family:var(--f-display);font-size:19px;font-weight:800}
.land-how{margin-top:30px;display:grid;gap:14px}
.land-how h2{font-size:24px;font-weight:800}
.land-how ol{list-style:none;margin:0;padding:22px 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:24px}
.land-how li{display:flex;gap:16px;align-items:flex-end;padding:0 22px}
.land-how li:first-child{padding-left:0}
.land-how li+li{border-left:1.5px dashed var(--line)}
.land-how li div{display:grid;gap:3px;padding-bottom:4px}
.land-how li b{font-family:var(--f-display);font-size:20px;font-weight:800;line-height:1.15}
.land-how li span{color:var(--muted);font-size:15px}
.how-tower{flex:none;overflow:visible}
.how-win rect{fill:#FFC93C}
.how-win rect.off{fill:rgba(255,255,255,.7)}
.how-ground{fill:var(--ground)}

/* Inicio */
.home,.page{max-width:1240px;margin:0 auto;padding-block:26px 60px}
.page{max-width:1120px}
.home{display:grid;grid-template-columns:232px minmax(0,1fr);gap:32px}
.folders{display:grid;gap:3px;align-content:start;position:sticky;top:90px}
.folders h2{font-size:17px;font-family:var(--f-display);font-weight:800;color:var(--ink);margin:0 0 6px 10px}
.frow{display:flex;align-items:center;border-radius:12px}
.frow.on{background:var(--surface);box-shadow:0 1px 0 var(--edge),0 4px 14px rgba(23,40,90,.06)}
.fbtn{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:12px;font-weight:700;color:var(--ink)}
.fbtn:hover{background:var(--surface-2)}
.frow.on .fbtn:hover{background:transparent}
.fbtn i{width:11px;height:15px;border-radius:3px 3px 1px 1px;flex:none}
.fbtn .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbtn .fcount{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:700;min-width:22px;text-align:center;border-radius:999px;padding:0 6px}
.frow.on .fcount{background:var(--surface-2);color:var(--ink)}
.frow .iconbtn{width:30px;height:30px;font-size:16px;opacity:0}
.frow:hover .iconbtn,.frow.on .iconbtn,.frow .iconbtn:focus-visible{opacity:1}
.fsep{height:1px;background:var(--line);margin:10px 6px}
.fextra{display:grid;gap:4px}
.fextra .btn{justify-content:flex-start;white-space:normal;text-align:left}
.hm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.hm-head h1{font-size:36px;font-weight:800}
.hm-head p{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:18px}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.mosaic{display:flex;gap:3px;height:58px;padding:12px 14px 0;align-items:flex-end}
.mosaic span{flex:1;border-radius:4px 4px 0 0;min-width:3px}
.qcard-main{border:0;background:transparent;text-align:left;padding:14px 16px 6px;display:grid;gap:6px;align-content:start;color:var(--ink)}
.qcard-main h3{font-size:20px}
.qcard-main .meta{font-size:14px;color:var(--muted)}
.qcard-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.qcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 12px 16px;border-top:1px solid var(--line)}
.qcard-foot .ago{font-size:13px;color:var(--muted)}
.empty{background:var(--surface);border:1.5px dashed var(--line);border-radius:22px;padding:36px 24px 40px;text-align:center;display:grid;gap:12px;justify-items:center}
.empty h2{font-size:26px;font-weight:800}
.empty p{color:var(--muted);max-width:48ch}
.empty-city{max-width:100%;height:auto;margin-bottom:4px}
.legend{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--muted);margin-top:22px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .legend-t{color:var(--ink);font-weight:700;flex-basis:100%}
.legend i{width:9px;height:13px;border-radius:2px 2px 0 0}

/* Tarjetas de cuestionario: cada pregunta es un edificio de la ciudad (color = tipo, altura = dificultad).
   Van con «.home» delante para mandar sobre las reglas antiguas del inicio que hay en css/editor.css. */
.home .hm-head,.page .hm-head{background:none;border:0;border-radius:0;padding:0;margin-bottom:22px}
.home .hm-head h1,.page .hm-head h1{font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.01em}
.home .grid{gap:18px}
.home .qcard{border-radius:20px;border:1px solid var(--line);box-shadow:0 2px 0 var(--edge);transition:border-color .15s,box-shadow .15s}
.home .qcard:hover{transform:none;border-color:color-mix(in srgb,var(--b) 45%,var(--line));box-shadow:0 2px 0 var(--edge),0 12px 28px rgba(23,40,90,.10)}
.home .qcard:focus-within{border-color:var(--focus)}
.home .qcard .mosaic,.home .qcard:not(.has-cover) .mosaic{position:relative;height:96px;gap:3px;padding:18px 14px 0;margin:0;background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));border-bottom:6px solid var(--ground);overflow:hidden}
.home .qcard.has-cover .mosaic{height:46px;padding-top:8px}
.home .qcard .mosaic span{position:relative;border-radius:4px 4px 0 0;min-width:3px;box-shadow:inset -3px 0 0 rgba(0,0,0,.08)}
/* ventanas: una rejilla de cuadraditos dentro de cada edificio */
.home .qcard .mosaic span::before{content:"";position:absolute;inset:7px 24% 5px;background:repeating-linear-gradient(180deg,var(--winc,rgba(255,255,255,.72)) 0 4px,transparent 4px 8px);-webkit-mask:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 6px);mask:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 6px);transition:background .25s}
.home .qcard .mosaic.dense span::before{display:none}
.home .qcard:hover .mosaic,.home .qcard:focus-within .mosaic{--winc:var(--lamp)}
.home .qcard .mosaic span[style*="--c)"]{--winc:rgba(255,255,255,.85)}
.home .qcard:hover .mosaic span[style*="--c)"]{--winc:#FFF6D1}
.home .qcard-main{padding:14px 16px 8px}
.home .qcard-main h3{font-size:21px;line-height:1.15}
.home .qcard-main:hover h3{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--b) 55%,transparent)}
.home .qcard-foot{background:transparent;padding:10px 12px 12px 16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .home .qcard .mosaic{background:linear-gradient(180deg,var(--night),var(--night-2));--winc:rgba(255,255,255,.22)}}
:root[data-theme="dark"] .home .qcard .mosaic{background:linear-gradient(180deg,var(--night),var(--night-2));--winc:rgba(255,255,255,.22)}

/* Editor */
.topbar.ed{gap:10px}
.title-in{flex:1 1 220px;min-width:0;font-family:var(--f-display);font-size:21px;font-weight:700;border:1.5px solid transparent;background:transparent;border-radius:10px;padding:5px 10px}
.title-in:hover{border-color:var(--line)}
.title-in:focus{border-color:var(--focus);outline:none;background:var(--surface)}
.savestate{font-size:13px;color:var(--ok);font-weight:700;white-space:nowrap}
.savestate.busy{color:var(--muted)}
.ed-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.editor{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:calc(100vh - 100px)}
.qlist{background:var(--surface);border-right:1px solid var(--line);padding:16px 12px 40px;display:grid;gap:10px;align-content:start}
.qlist-head{display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.qlist ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.qitem{border-radius:12px;border:1.5px solid transparent}
.qitem.on{border-color:var(--brand);background:var(--bg)}
.qitem.drop{border-color:var(--focus);border-style:dashed}
.qitem-btn{width:100%;border:0;background:transparent;display:flex;gap:10px;align-items:flex-start;text-align:left;padding:9px 10px;border-radius:11px;position:relative}
.qitem-btn:hover{background:var(--surface-2)}
.qitem.on .qitem-btn:hover{background:transparent}
.qnum{font-family:var(--f-display);font-weight:800;font-size:18px;width:24px;flex:none;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.3}
.qbody{min-width:0;display:grid;gap:2px;flex:1}
.qtype{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700}
.qtype span{color:var(--muted)}
.qtype svg{flex:none}
.qtext{font-size:14px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.qtext em{color:var(--muted)}
.wdot{position:absolute;right:8px;top:10px;width:9px;height:9px;border-radius:50%;background:var(--warn)}
.qlist .add{width:100%}
.qedit{padding-block:26px 80px;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px));max-width:900px;width:100%;display:grid;gap:20px;align-content:start}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.qhead-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qhead-l h2{font-size:26px;font-weight:800}
.typebtn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px 6px 8px;font-weight:700}
.typebtn .tico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff}
.typebtn small{color:var(--muted);font-weight:700;font-size:12px;margin-left:4px}
.qhead-r{display:flex;gap:2px}
.aibar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:8px 10px}
.aibar-l{display:inline-flex;gap:6px;align-items:center;font-weight:800;color:var(--e);padding-right:4px}
.row2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start}
.seg{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;align-content:flex-start}
.seg button{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.seg button:hover{border-color:var(--muted)}
.seg button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.seg.diff button.on[data-v="facil"]{background:var(--d);border-color:var(--d);color:#fff}
.seg.diff button.on[data-v="media"]{background:var(--c);border-color:var(--c);color:var(--c-ink)}
.seg.diff button.on[data-v="dificil"]{background:var(--a);border-color:var(--a);color:#fff}
.seg.diff button.on[data-v="mezcla"]{background:var(--e);border-color:var(--e);color:#fff}
.qtextarea{font-family:var(--f-display);font-size:20px;font-weight:600;line-height:1.3}
.imgrow{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.imgrow .imgzone{flex:1 1 300px}
.imgzone,.dropfile{display:flex;gap:14px;align-items:center;border:1.5px dashed var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;color:var(--muted);background:var(--surface)}
.imgzone:hover,.imgzone.drop,.dropfile:hover,.dropfile.drop{border-color:var(--focus);color:var(--ink)}
.imgzone .ico,.dropfile .ico{width:42px;height:42px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;flex:none}
.imgzone strong,.dropfile strong{color:var(--ink);display:block}
.dropfile{padding:26px 18px;min-height:120px}
.imgbox{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.imgbox img{max-height:220px;width:auto;max-width:100%;border-radius:12px;border:1px solid var(--line)}
.answers{display:grid;gap:12px}
.opts{display:grid;gap:8px}
.opt-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:6px}
.opt-row.is-ok{border-color:var(--ok);background:var(--ok-soft)}
.opt-row .input{border:0;background:transparent;padding:8px 6px;font-size:16px}
.opt-row .input:focus{box-shadow:none}
.letter{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--tile-ink)}
.letter[data-c="c"],.tile[data-c="c"]{color:var(--c-ink)}
[data-c="a"]{background:var(--a)}[data-c="b"]{background:var(--b)}[data-c="c"]{background:var(--c)}[data-c="d"]{background:var(--d)}[data-c="e"]{background:var(--e)}[data-c="f"]{background:var(--f)}
.okbtn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px;color:var(--muted);white-space:nowrap}
.okbtn .box{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;font-size:12px}
.okbtn.multi .box{border-radius:5px}
.okbtn.on{background:var(--ok);border-color:var(--ok);color:#fff}
.okbtn.on .box{background:#fff;color:var(--ok);border-color:#fff}
.tfpick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tfpick button{border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:18px;font-family:var(--f-display);font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px}
.tfpick button.on[data-v="true"]{border-color:var(--d);background:var(--d);color:#fff}
.tfpick button.on[data-v="false"]{border-color:var(--a);background:var(--a);color:#fff}
.gapbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.code{font-family:ui-monospace,Consolas,monospace;background:var(--surface-2);border-radius:6px;padding:1px 6px;font-size:13px}
.gapprev{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:17px;line-height:2.1}
.gpill{display:inline-block;min-width:70px;text-align:center;border-bottom:3px solid var(--c);background:var(--warn-soft);border-radius:8px 8px 2px 2px;padding:0 10px;line-height:1.6;font-weight:700}
.bankprev{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:14px;align-items:center;line-height:1.4}
.bankprev span{border:1.5px solid var(--line);border-radius:999px;padding:2px 10px;font-weight:700}
.bankprev span.hint{border:0;padding:0;font-weight:400}
.bankprev span.trap{border-style:dashed;color:var(--muted)}
.chips-in{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1.5px solid var(--line);border-radius:11px;padding:6px 8px;background:var(--surface)}
.chips-in:focus-within{border-color:var(--focus);box-shadow:0 0 0 4px var(--focus-soft)}
.chips-in input{border:0;outline:none;background:transparent;flex:1;min-width:140px;padding:5px}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border-radius:999px;padding:3px 4px 3px 11px;font-weight:700;font-size:14px}
.chip button{border:0;background:transparent;width:22px;height:22px;border-radius:50%;color:var(--muted);line-height:1}
.chip button:hover{background:var(--line);color:var(--ink)}
.order-ed,.match-ed{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.order-ed li,.match-ed li{display:flex;align-items:center;gap:6px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:6px}
.order-ed .input,.match-ed .input{border:0;background:transparent;font-size:16px;padding:8px 6px}
.order-ed .input:focus,.match-ed .input:focus{box-shadow:none}
.onum{width:34px;height:34px;flex:none;border-radius:10px;background:var(--e);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:800}
.match-ed .link{color:var(--f);font-weight:800;flex:none}
.match-ed .mside{flex:1;min-width:0;display:flex}
.probs{border-radius:14px;padding:12px 16px;display:grid;gap:4px;font-size:14px}
.probs.bad{background:var(--warn-soft)}
.probs.bad strong{color:var(--warn)}
.probs.good{background:var(--ok-soft);color:var(--ok);font-weight:700}
.probs ul{margin:0;padding-left:18px}
.empty-ed{display:grid;gap:14px}
.empty-ed h2{font-size:30px;font-weight:800}
.empty-ed p{color:var(--muted);max-width:56ch}
.typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.typechoice{display:flex;gap:12px;align-items:flex-start;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:14px}
.typechoice:hover{border-color:var(--ink)}
.typechoice.cur{border-color:var(--brand)}
.typechoice .tico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none}
.typechoice strong{display:block;font-family:var(--f-display);font-size:18px;line-height:1.2}
.typechoice span{font-size:13px;color:var(--muted)}
.imgpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:60vh;overflow:auto}
.imgopt{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:6px;display:grid;gap:4px;font-size:12px;color:var(--muted);text-align:left}
.imgopt:hover{border-color:var(--focus)}
.imgopt img{width:100%;height:110px;object-fit:contain;background:var(--bg);border-radius:8px}

/* Asistente de IA */
.dialog.xl{max-width:980px}
.gen{display:grid;gap:16px}
.gen-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gen-head h2{display:flex;gap:10px;align-items:center;color:var(--ink)}
.gen-head h2 svg{color:var(--e)}
.gen-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}
.savedsrc{display:flex;gap:12px;align-items:center;border:1.5px solid var(--ok);background:var(--ok-soft);border-radius:14px;padding:14px}
.savedsrc span{display:block;color:var(--muted);font-size:14px}
.typechecks{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tcheck{display:flex;align-items:center;gap:8px;cursor:pointer}
.tcheck input{width:18px;height:18px;accent-color:var(--brand)}
.tcheck span{display:inline-flex;gap:6px;align-items:center;font-weight:700;font-size:14px}
.tcheck span svg{color:var(--tc)}
.radiocards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.radiocard{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:var(--surface)}
.radiocard:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 3px var(--focus-soft)}
.radiocard input{margin-top:3px;accent-color:var(--brand)}
.radiocard strong{display:block}
.radiocard small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35}
.radiocard.off{opacity:.5;cursor:not-allowed}
.rec{font-style:normal;font-size:11px;background:var(--ok-soft);color:var(--ok);border-radius:6px;padding:1px 6px;margin-left:4px}
.genprog{display:grid;gap:10px}
.pbar{height:14px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.pbar span{display:block;height:100%;width:2%;background:linear-gradient(90deg,var(--e),var(--b));border-radius:9px;transition:width .3s}
.genlist{display:grid;gap:6px;max-height:45vh;overflow:auto}
.gitem{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:var(--bg);font-size:14px;animation:pop .25s ease-out}
.revlist{display:grid;gap:8px;max-height:55vh;overflow:auto;padding-right:4px}
.revitem{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:var(--surface)}
.revitem:has(input:checked){border-color:var(--ok)}
.revitem input{width:20px;height:20px;margin-top:2px;accent-color:var(--ok);flex:none}
.revbody{display:grid;gap:3px;min-width:0;flex:1}
.revpic{display:grid;gap:4px;justify-items:center;flex:none}
.revpic img{width:96px;height:72px;object-fit:cover;border-radius:10px;background:var(--surface-2,#eee)}
@media (max-width:520px){.revpic img{width:64px;height:48px}}
.revans{font-size:13px;color:var(--muted)}

/* Modales y menús */
.scrim{position:fixed;inset:0;background:rgba(12,16,44,.52);backdrop-filter:blur(3px);z-index:120;display:grid;place-items:center;padding:20px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));overflow:auto}
.dialog{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px;width:100%;max-width:490px;display:grid;gap:16px;box-shadow:0 8px 0 rgba(23,40,90,.08),0 30px 70px rgba(10,14,40,.35);animation:pop .18s ease-out}
.dialog.wide{max-width:800px}
.dialog h2{font-size:26px;font-weight:800;display:flex;align-items:center;gap:10px;line-height:1.15}
.dialog h2>svg{flex:none;color:var(--brand);width:30px;height:30px;padding:6px;border-radius:10px;background:color-mix(in srgb,var(--brand) 12%,transparent)}
.dialog p{color:var(--muted)}
.dialog .facts{list-style:none;padding:0;gap:8px}
.dialog .facts li{position:relative;padding-left:22px}
.dialog .facts li::before{content:"";position:absolute;left:2px;bottom:calc(100% - 1.15em);width:9px;height:13px;border-radius:2px 2px 0 0;background:var(--a)}
.dialog .facts li:nth-child(2)::before{background:var(--b);height:16px}
.dialog .facts li:nth-child(3)::before{background:var(--d);height:19px}
.dialog .facts b{font-family:var(--f-display);font-size:1.15em;font-variant-numeric:tabular-nums}
.mrow{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding-top:2px}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:.6}to{transform:none;opacity:1}}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches label{position:relative}
.swatches input{position:absolute;opacity:0}
.swatches span{display:block;width:36px;height:36px;border-radius:11px;border:3px solid transparent;cursor:pointer}
.swatches input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--surface)}
.swatches input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.bigcode{font-family:var(--f-display);font-size:44px;font-weight:800;letter-spacing:.14em;text-align:center;background:var(--bg);border:2px dashed var(--line);border-radius:16px;padding:10px;user-select:all;font-variant-numeric:tabular-nums;color:var(--ink)}
.bigcode.sm{font-size:26px;padding:2px 14px;border-width:1.5px}
.pop{position:absolute;z-index:130;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(10,14,40,.22);padding:6px;display:grid;min-width:220px}
.pop button{border:0;background:transparent;text-align:left;padding:9px 12px;border-radius:10px;font-weight:700;color:var(--ink)}
.pop button:hover,.pop button:focus-visible{background:var(--surface-2)}
.pop button.danger{color:var(--bad)}
.pop button.danger:hover,.pop button.danger:focus-visible{background:var(--bad-soft)}
.pop .info{padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:14px}
.pop .info strong{font-family:var(--f-display);font-size:18px;display:block;line-height:1.2}
.pop .info span{display:block;color:var(--muted);font-size:13px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);background:var(--ink);color:var(--bg);padding:12px 18px 12px 16px;border-radius:16px;font-weight:700;z-index:200;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100vw - 32px);box-shadow:0 14px 34px rgba(10,14,40,.28)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.show::before{content:"";display:inline-block;width:9px;height:11px;border-radius:2px;background:var(--lamp,#FFD84D);margin-right:10px;vertical-align:-1px;box-shadow:0 0 8px var(--lamp-glow,rgba(255,216,77,.55))}
.toast.bad{background:var(--bad);color:#fff}
.toast.bad::before{background:#fff;box-shadow:none}
/* left:50% dejaba al aviso solo media pantalla de ancho y en el móvil partía frases cortas en tres líneas */
.toast{width:max-content;text-align:center}
.toast.has-act{pointer-events:auto;display:flex;align-items:center;gap:14px;text-align:left}
.toast.has-act::before{margin-right:-4px;flex:none}
.toast-act{flex:none;border:0;border-radius:10px;padding:6px 12px;font-weight:800;background:color-mix(in srgb,var(--bg) 22%,transparent);color:inherit;text-decoration:underline;text-underline-offset:3px}
.toast-act:hover{background:color-mix(in srgb,var(--bg) 34%,transparent)}
.notices{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.notices li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.notices li.new{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.notices li span{grid-column:1;color:var(--muted);font-size:13px}
.notices li .btn{grid-row:1/3;grid-column:2}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--surface-2);border-top-color:var(--brand);animation:spin 1s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* Componente de respuesta (alumno y proyector) */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tile{position:relative;border:0;border-radius:16px;padding:18px;min-height:86px;display:flex;align-items:center;gap:14px;text-align:left;color:var(--tile-ink);font-weight:700;font-size:19px;line-height:1.25;box-shadow:inset 0 -5px 0 rgba(0,0,0,.18);transition:transform .1s,opacity .2s;overflow:hidden}
.tile:hover:not([disabled]){transform:translateY(-2px)}
.tile:active:not([disabled]){transform:translateY(1px)}
.tile .tk{font-family:var(--f-display);font-size:24px;font-weight:800;width:40px;height:40px;flex:none;border-radius:10px;background:rgba(255,255,255,.22);display:grid;place-items:center}
.tile .tt{flex:1;min-width:0;position:relative;z-index:1}
.tile .tm{width:30px;height:30px;border-radius:8px;border:3px solid currentColor;flex:none;display:grid;place-items:center;font-size:18px}
.tile.is-sel{outline:4px solid var(--ink);outline-offset:3px}
.tile.is-dim{opacity:.32}
.tile.is-right{outline:4px solid var(--ok);outline-offset:3px}
.tile.is-wrong{outline:4px dashed var(--bad);outline-offset:3px;opacity:.75}
.tile[disabled]{cursor:default}
.tile .badge{font-size:12px;font-weight:800;background:#fff;color:#111;border-radius:999px;padding:2px 8px;flex:none}
.tile .tok{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ok);display:grid;place-items:center}
.tile .tcount{position:absolute;inset:auto 0 0 0;height:100%;display:flex;align-items:stretch;pointer-events:none}
.tile .tcount .tbar{background:rgba(255,255,255,.22);transition:width .8s ease-out}
.tile .tnum{position:relative;z-index:1;font-family:var(--f-display);font-size:1.5em;min-width:1.4em;text-align:right;flex:none}
.tile .tk,.tile .tok,.tile .badge{position:relative;z-index:1}
.gappara{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px;font-size:20px;line-height:2.3}
.slot{display:inline-block;min-width:110px;border:0;border-bottom:3px solid var(--muted);background:var(--surface-2);border-radius:9px 9px 3px 3px;padding:0 12px;margin:0 3px;font-weight:700;line-height:1.7;vertical-align:baseline;color:var(--ink)}
.slot.onhost{min-width:90px;text-align:center;color:var(--muted)}
.slot.is-sel,.slot.drop{border-color:var(--focus);background:var(--focus-soft)}
.slot.is-right{border-color:var(--ok);background:var(--ok-soft)}
.slot.is-wrong{border-color:var(--bad);background:var(--bad-soft);text-decoration:line-through}
.fix{display:inline-block;font-size:14px;font-weight:800;color:var(--ok);background:var(--ok-soft);border-radius:6px;padding:0 7px;line-height:1.6;margin-left:2px}
.bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:48px}
.wchip{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 16px;font-weight:700;font-size:17px;box-shadow:0 3px 0 var(--line);cursor:grab;color:var(--ink)}
.wchip:hover:not([disabled]){border-color:var(--ink)}
.wchip[disabled]{cursor:default}
.pl-ord{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pl-ord li{display:flex;align-items:center;gap:10px;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:10px 12px;font-weight:700;font-size:18px}
.pl-ord li.drop{border-color:var(--focus);border-style:dashed}
.pl-ord li.is-right{border-color:var(--ok);background:var(--ok-soft)}
.pl-ord li.is-wrong{border-color:var(--bad);background:var(--bad-soft)}
.pl-ord .grip{color:var(--muted);cursor:grab;letter-spacing:-2px}
.pl-ord .onum2{min-width:28px;text-align:center;font-family:var(--f-display);font-weight:800;color:var(--e)}
.pl-ord .ot{flex:1;min-width:0}
.pl-match{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.mcol{display:grid;gap:10px;align-content:start}
.mitem{border:2.5px solid var(--line);background:var(--surface);border-radius:14px;padding:13px 14px;font-weight:700;font-size:17px;text-align:left;display:flex;align-items:center;gap:10px;min-height:56px;color:var(--ink)}
.mitem .mdot{width:16px;height:16px;border-radius:50%;flex:none;border:2px solid var(--line)}
.mitem.is-sel{border-color:var(--ink);box-shadow:0 0 0 4px var(--focus-soft)}
.mitem.linked{border-color:var(--mc)}
.mitem.linked .mdot{background:var(--mc);border-color:var(--mc)}
.mitem.is-right{border-color:var(--ok);background:var(--ok-soft)}
.mitem.is-wrong{border-color:var(--bad);background:var(--bad-soft)}
.mitem .mt{flex:1;min-width:0}
.mitem small{display:block;font-size:13px;color:var(--ok);font-weight:800}
.pairsol{display:grid;gap:10px}
.pairrow{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;border:2.5px solid var(--mc);border-radius:14px;padding:12px 16px;font-weight:700;font-size:clamp(18px,1.8vw,26px)}
.pairrow b{color:var(--mc)}
.host .pairrow{background:#ffffff12;color:#fff}
.dist{display:grid;gap:8px;align-content:center}
.drow{display:grid;grid-template-columns:120px 1fr 40px;gap:10px;align-items:center;font-weight:700}
.dtrack{height:22px;border-radius:8px;background:var(--surface-2);overflow:hidden}
.dtrack span{display:block;height:100%;border-radius:8px;transition:width .8s}
.drow b{font-family:var(--f-display);font-size:22px;text-align:right}

/* Vista del alumno (prueba del profe) */
.player{position:fixed;inset:0;z-index:100;background:var(--bg);overflow:auto;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.pl-top{display:flex;align-items:center;gap:12px;padding-block:12px;background:var(--surface);border-bottom:1px solid var(--line)}
.pl-top .pl-count{font-weight:700;color:var(--muted)}
.pl-top .pl-score{margin-left:auto;font-family:var(--f-display);font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.pl-tag{font-size:12px;font-weight:800;background:var(--warn-soft);color:var(--warn);padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.pl-main{flex:1;width:100%;max-width:1000px;margin:0 auto;padding-block:20px 140px;display:grid;gap:20px;align-content:start}
.pl-timer{display:flex;align-items:center;gap:12px}
.pl-track{flex:1;height:12px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.pl-bar{height:100%;background:var(--brand);border-radius:9px;transform-origin:left;transition:transform .2s linear}
.pl-secs{font-family:var(--f-display);font-weight:800;font-size:26px;min-width:48px;text-align:right;font-variant-numeric:tabular-nums}
.pl-q{background:var(--surface);border-radius:20px;padding:22px 24px;display:grid;gap:14px;justify-items:center;text-align:center;border:1px solid var(--line)}
.pl-q h2{font-size:clamp(22px,3vw,32px);font-weight:700}
.pl-q img{max-height:280px;width:auto;max-width:100%;border-radius:12px}
.pl-kind{font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.pl-kind span{color:var(--muted)}
.pl-hint{text-align:center;color:var(--muted);font-size:14px}
.pl-result{position:fixed;left:0;right:0;bottom:0;z-index:101;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:16px calc(16px + env(safe-area-inset-bottom,0px));color:#fff;animation:up .25s ease-out}
.pl-result.ok{background:var(--ok)}.pl-result.mid{background:var(--mid)}.pl-result.bad{background:var(--bad)}
.pl-result strong{font-family:var(--f-display);font-size:28px;font-weight:800;display:block;line-height:1.1}
.pl-result span{font-size:17px;font-weight:700}
.pl-result .btn{background:#fff;color:#111;border-color:#fff}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.pl-end{display:grid;gap:14px;justify-items:center;text-align:center;padding-top:40px}
.pl-end h2{font-size:40px;font-weight:800}
.pl-end .pts{font-family:var(--f-display);font-size:64px;font-weight:800;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}

/* Avatares */
svg.av{display:block;flex:none;overflow:visible}
.av .avb{transform-box:fill-box;transform-origin:50% 100%}
.av.idle .avb{animation:breathe 2.6s ease-in-out infinite}
.av.jump .avb{animation:jump .9s cubic-bezier(.3,.6,.4,1) infinite}
.av.sad .avb{animation:sad 1.6s ease-in-out infinite}
.av.dance .avb{animation:dance 1s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.97)}}
@keyframes jump{0%,100%{transform:translateY(0) scale(1)}15%{transform:translateY(0) scale(1.08,.9)}45%{transform:translateY(-14%) scale(.96,1.05)}75%{transform:translateY(0) scale(1.04,.96)}}
@keyframes sad{0%,100%{transform:rotate(0) translateY(2%)}50%{transform:rotate(-4deg) translateY(3%)}}
@keyframes dance{0%,100%{transform:rotate(-8deg) translateY(0)}25%{transform:rotate(0) translateY(-8%)}50%{transform:rotate(8deg) translateY(0)}75%{transform:rotate(0) translateY(-8%)}}

/* Proyector (pantalla del profe) */
body[data-route="teacher"]:has(.host){background:var(--stage)}
.host{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(1200px 600px at 10% -10%,var(--stage-2),transparent),var(--stage);color:var(--stage-ink)}
.host .btn{background:#ffffff14;border-color:#ffffff2e;color:#fff}
.host .btn:hover{background:#ffffff26}
.host .btn.primary{background:var(--c);border-color:var(--c);color:var(--c-ink)}
.host .btn.ghost{background:transparent;border-color:transparent;color:#cfd5f5}
.host .iconbtn{color:#cfd5f5}
.host .iconbtn:hover{background:#ffffff1f;color:#fff}
.h-top{display:flex;align-items:center;gap:16px;padding-block:12px;flex-wrap:wrap}
.h-top .brand{color:#fff}
.h-title{font-family:var(--f-display);font-size:22px;font-weight:700;flex:1;min-width:0}
.h-qcount{font-family:var(--f-display);font-size:22px;font-weight:700}
.h-top .pl-kind span{color:#cfd5f5}
.h-tools{margin-left:auto;display:flex;align-items:center;gap:4px}
.h-main{flex:1;width:100%;max-width:1500px;margin:0 auto;padding-block:14px 30px;display:grid;gap:22px;align-content:start}
.h-main.center{align-content:center;justify-items:center;text-align:center;gap:20px}
.h-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-block:14px calc(14px + env(safe-area-inset-bottom,0px));background:#0000004d;backdrop-filter:blur(6px)}
.h-foot.dim{opacity:.4}
.h-wait{font-size:22px;color:#cfd5f5}
.joinbox{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;padding-block:6px 10px}
.joinhow{max-width:360px;font-size:20px;color:#cfd5f5;line-height:1.35}
.joinhow b{color:#fff}
.joincode{display:flex;gap:8px}
.joincode span{width:clamp(48px,7vw,92px);height:clamp(64px,9.4vw,118px);background:#fff;color:#162033;border-radius:16px;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:clamp(40px,6.4vw,84px);box-shadow:0 8px 0 #00000040}
.pgrid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-content:flex-start}
.pchip{display:grid;justify-items:center;gap:4px;border:0;background:#ffffff12;border-radius:16px;padding:10px 10px 8px;width:118px;color:#fff;font-weight:700;animation:pop .35s ease-out}
.pchip:hover{background:#ffffff26}
.pchip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.pchip.off{opacity:.45}
.h-empty{display:grid;justify-items:center;gap:14px;color:#cfd5f5;font-size:22px;padding:60px 0}
.dots{display:flex;gap:8px}
.dots i{width:14px;height:14px;border-radius:50%;background:var(--c);animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s;background:var(--b)}.dots i:nth-child(3){animation-delay:.4s;background:var(--d)}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}
.h-count{display:flex;align-items:center;gap:8px;font-size:20px;color:#cfd5f5}
.h-count b{font-family:var(--f-display);font-size:30px;color:#fff}
.host .switch{color:#fff}
.hint.full{width:100%;text-align:center;color:#cfd5f5}
.h-qhead{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center}
.h-qhead .h-qtext{grid-column:2;grid-row:1}
.h-qtext{font-size:clamp(26px,3.4vw,52px);font-weight:800;text-align:center;line-height:1.15}
.h-timer{grid-column:1;grid-row:1;position:relative;width:clamp(86px,9vw,130px);aspect-ratio:1;max-width:100%}
.h-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.h-timer .trk{fill:none;stroke:#ffffff26;stroke-width:8}
.h-timer .rng{fill:none;stroke:var(--c);stroke-width:8;stroke-linecap:round;stroke-dasharray:289;transition:stroke-dashoffset .25s linear,stroke .3s}
.h-timer .rng.urgent{stroke:var(--a)}
.h-timer span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:clamp(34px,3.6vw,54px)}
.h-timer em{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-style:normal;font-weight:800;color:var(--c);font-size:14px;text-transform:uppercase}
.h-timer.paused .rng{stroke:#ffffff66}
.h-answered{grid-column:3;grid-row:1;display:grid;justify-items:center;line-height:1}
.h-answered b{font-family:var(--f-display);font-size:clamp(40px,4vw,64px)}
.h-answered span{font-size:20px;color:#cfd5f5}
.h-answered small{color:#cfd5f5;margin-top:4px}
.h-revtitle{grid-column:1;grid-row:1;display:inline-flex;gap:8px;align-items:center;background:var(--ok);color:#fff;font-weight:800;border-radius:999px;padding:8px 16px}
.h-img{display:flex;justify-content:center}
.h-img img{max-height:32vh;max-width:100%;border-radius:16px;background:#fff}
.tiles.onhost{gap:16px}
.tiles.onhost .tile{min-height:clamp(84px,11vh,130px);font-size:clamp(20px,2.2vw,34px)}
.tiles.onhost .tile .tk{width:56px;height:56px;font-size:32px}
.tiles.onhost .tile.is-dim{opacity:.38}
.host .gappara{background:#ffffff12;border-color:#ffffff22;color:#fff;font-size:clamp(20px,2.2vw,32px)}
.host .slot{background:#ffffff1f;color:#fff;border-color:#ffffff66}
.host .slot.is-right{background:#13906a55;color:#fff}
.host .wchip{background:#ffffff14;color:#fff;border-color:#ffffff40;box-shadow:none}
.host .pl-ord li,.host .mitem{background:#ffffff12;border-color:#ffffff30;color:#fff;font-size:clamp(18px,1.8vw,26px)}
.host .pl-ord li.is-right,.host .mitem.is-right{background:#13906a55;border-color:var(--ok)}
.host .mitem.linked{background:#ffffff1a}
.revgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.host .dist .dl{color:#cfd5f5}
.host .dtrack{background:#ffffff1a}
.bwrap{position:relative;max-width:900px;width:100%;margin:10px auto 0}
.brow{position:absolute;left:0;right:0;top:0;height:68px;display:flex;align-items:center;gap:14px;background:#ffffff14;border-radius:16px;padding:0 18px;transition:transform .9s cubic-bezier(.2,.8,.2,1);font-size:24px;font-weight:800}
.brow.first{background:var(--c);color:var(--c-ink)}
.brank{font-family:var(--f-display);font-size:28px;width:40px;text-align:center}
.bname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;gap:10px;align-items:center}
.bstreak{display:inline-flex;align-items:center;gap:2px;font-size:18px}
.bdelta{font-size:18px;opacity:.75}
.bscore{font-family:var(--f-display);font-size:30px;font-variant-numeric:tabular-nums;min-width:110px;text-align:right}
.peds{display:grid;grid-template-columns:repeat(3,minmax(0,280px));justify-content:center;align-items:end;gap:16px;min-height:62vh}
.ped{display:grid;justify-items:center;align-content:end;gap:10px}
.pedwho{display:grid;justify-items:center;gap:4px;opacity:0;transform:translateY(30px) scale(.8);transition:all .6s cubic-bezier(.2,.9,.3,1.3)}
.ped.shown .pedwho{opacity:1;transform:none}
.pedwho strong{font-family:var(--f-display);font-size:clamp(22px,2.4vw,34px);text-align:center}
.pedwho span{color:#cfd5f5;font-weight:700;font-size:18px}
.pedbox{width:100%;border-radius:18px 18px 0 0;display:grid;place-items:start center;padding-top:14px;font-family:var(--f-display);font-size:48px;color:#fff}
.p1 .pedbox{height:34vh;background:linear-gradient(var(--c),#b57f00)}
.p2 .pedbox{height:24vh;background:linear-gradient(#a8b3c7,#6f7b91)}
.p3 .pedbox{height:17vh;background:linear-gradient(#e0915a,#a15c2c)}
.p1 .pedwho strong{color:var(--c)}
.podall,.plist{display:grid;gap:8px;max-width:820px;width:100%;margin:0 auto}
.prow,.plrow{display:flex;align-items:center;gap:12px;background:#ffffff12;border-radius:12px;padding:8px 14px;font-weight:700;font-size:20px}
.plist .plrow{background:var(--bg);font-size:16px;flex-wrap:wrap}
.plist .bscore{font-size:18px;min-width:70px}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:150}

/* Alumno */
.stu{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.s-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px;background:var(--surface);border-bottom:1px solid var(--line)}
.s-me{display:flex;align-items:center;gap:8px;font-weight:700;min-width:0}
.s-me span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
.s-me b{font-family:var(--f-display);font-size:20px;background:var(--ink);color:var(--bg);border-radius:999px;padding:0 12px;font-variant-numeric:tabular-nums}
.s-lost{background:var(--bad);color:#fff;text-align:center;font-weight:700;padding:8px}
.s-main{flex:1;width:100%;max-width:1000px;margin:0 auto;padding-block:22px 60px;display:grid;gap:18px;align-content:start}
.s-center{display:grid;justify-items:center;text-align:center;gap:14px;padding-top:30px}
.s-center h1{font-size:clamp(28px,4vw,40px);font-weight:800}
.s-center p{max-width:50ch}
.s-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow);display:grid;gap:16px;max-width:560px;width:100%;margin:20px auto 0}
.s-card.wide{max-width:980px}
.s-card h1{font-size:30px;font-weight:800}
.s-card p{color:var(--muted)}
.s-qhead{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;color:var(--muted);flex-wrap:wrap}
.s-wait h2{font-size:30px}
.s-phrase{font-family:var(--f-display);font-size:clamp(20px,2.6vw,26px);font-weight:600;color:var(--ink);max-width:36ch;line-height:1.25}
#s-widget.locked,#t-widget.locked{opacity:.5;pointer-events:none}
.s-result{display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap;border-radius:24px;padding:26px;color:#fff;text-align:left}
.s-result.ok{background:var(--ok)}.s-result.mid{background:var(--mid)}.s-result.bad{background:var(--bad)}.s-result.none{background:#5b6478}
.s-result h1{font-size:clamp(32px,5vw,48px);font-weight:800}
.s-result .s-phrase{color:#fff}
.s-res-txt{display:grid;gap:6px;max-width:520px}
.s-pts{font-family:var(--f-display);font-size:30px;font-weight:800}
.s-bonus{display:inline-flex;align-items:center;gap:6px;font-weight:700;background:#ffffff26;border-radius:999px;padding:4px 12px;width:max-content}
.s-sol{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 16px}
.s-sol summary{cursor:pointer;font-weight:700}
.s-solbody{display:grid;gap:12px;margin-top:12px}
.s-qtxt{font-weight:700}
.s-board .s-rank{font-size:26px}
.s-rank b{font-family:var(--f-display);font-size:1.6em}
.s-total{font-family:var(--f-display);font-size:34px;font-weight:800}
.s-gap{font-size:20px}
.s-record{text-align:center;font-weight:700;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.s-record .up{color:var(--ok)} .s-record .down{color:var(--bad)}
.s-lobby h1{font-size:34px}
.s-final{display:grid;gap:18px}
.minipod{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mp{display:grid;justify-items:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;min-width:120px}
.mp.me{border-color:var(--brand)}
.mp b{font-family:var(--f-display);font-size:22px}
.mp small{color:var(--muted);font-weight:700}
.s-sumh{font-size:22px}
.s-sum{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.s-sum li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.s-sum .mk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;color:#fff;background:var(--muted)}
.s-sum li.ok .mk{background:var(--ok)} .s-sum li.mid .mk{background:var(--mid)} .s-sum li.bad .mk{background:var(--bad)}
.s-sum .t{flex:1;min-width:0}
.s-sum .t details{margin-top:8px}
.s-sum .p{font-family:var(--f-display);font-weight:800;white-space:nowrap}
.newrec{display:inline-flex;gap:8px;align-items:center;background:var(--c);color:var(--c-ink);border-radius:999px;padding:6px 14px;font-weight:800}
.attempts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.attempts li{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--bg);border-radius:10px;padding:8px 12px}
.tboard{display:grid;gap:6px;max-width:640px;width:100%;margin:0 auto}
.trow{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:700}
.trow.me{border:2px solid var(--brand);background:var(--warn-soft)}
.trow .brank{font-size:20px;width:30px}
.trow .bscore{font-size:20px;min-width:70px}
.aved{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
.aved-prev{display:grid;justify-items:center;gap:12px;position:sticky;top:80px}
.aved-pick{display:grid;gap:12px;min-width:0}
.tabs.five{grid-auto-columns:minmax(0,1fr)}
.tabs.five button{font-size:13px;padding:8px 4px}
/* Móvil estrecho: «Personaje» no cabía en su pestaña y tocaba los bordes */
@media (max-width:420px){.tabs.five button{font-size:12px;padding:8px 2px;hyphens:auto;overflow-wrap:anywhere;line-height:1.2}}
.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px;max-height:52vh;overflow:auto;padding:4px}
.avopt{border:2px solid transparent;background:var(--bg);border-radius:14px;padding:3px;display:grid;place-items:center;aspect-ratio:1}
.avopt:hover{border-color:var(--line)}
.avopt.on{border-color:var(--brand);background:var(--warn-soft)}
.avopt.none span{font-weight:700;color:var(--muted);font-size:13px}
.bgopt span{width:80%;aspect-ratio:1;border-radius:50%;display:block}

/* Tareas y resultados */
.tlist,.rlist{display:grid;gap:12px}
.tcard{display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 18px 16px 20px;box-shadow:0 2px 0 var(--edge);position:relative;overflow:hidden}
.tcard::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:5px;border-radius:0 4px 4px 0;background:var(--line)}
.tcard.st-open::before{background:var(--ok)} .tcard.st-pending::before{background:var(--c)}
.tmain{flex:1 1 320px;min-width:0;display:grid;gap:5px;justify-items:start}
.tmain h3{font-size:21px}
.meta{font-size:14px;color:var(--muted)}
.tk-meta,.r-meta{display:flex;flex-wrap:wrap;gap:2px 16px}
.tk-meta .tk-code b{font-family:var(--f-display);font-size:16px;letter-spacing:.08em;color:var(--ink)}
.tnums{display:grid;grid-template-columns:auto auto;gap:4px 18px;color:var(--muted);font-size:14px;align-items:baseline}
.tnums b{font-family:var(--f-display);font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:2px}
.tk-prog{grid-column:1/-1;height:8px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.tk-prog i{display:block;height:100%;border-radius:9px;background:var(--ok)}
.linkbox{display:grid;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px}
.linkbox .row .input{flex:1 1 260px}
.rcard{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:8px 10px 8px 12px;box-shadow:0 2px 0 var(--edge)}
.rkind{width:48px;height:48px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;background:color-mix(in srgb,var(--b) 88%,#000);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.rcard.k-task .rkind{background:color-mix(in srgb,var(--e) 88%,#000)}
.rmain{flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:8px 10px;display:grid;gap:4px;justify-items:start;border-radius:14px;color:var(--ink)}
.rmain:hover{background:var(--bg)}
.rmain h3{font-size:20px}
.backbtn{margin:0 0 10px -10px}
.taskinfo{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;margin-bottom:16px}
.taskinfo summary{cursor:pointer;font-weight:700;display:flex;gap:8px;align-items:center}
.taskinfo .linkbox{margin:12px 0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kpis>div{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px 14px;display:grid;gap:2px;align-content:start;box-shadow:0 2px 0 var(--edge);overflow:hidden}
.kpis b{font-family:var(--f-display);font-size:34px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.kpis b.small{font-size:17px;line-height:1.25}
.kpis span{color:var(--muted);font-size:14px}
.kmeter{display:block;height:8px;border-radius:9px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.kmeter i{display:block;height:100%;border-radius:9px;background:var(--ok)}
.kmeter.mid i{background:var(--mid)} .kmeter.bad i{background:var(--bad)}
.qstats{display:grid;gap:8px;margin-top:12px}
.qstat{background:var(--surface);border:1px solid var(--line);border-radius:16px;border-left:6px solid var(--line)}
.qstat.ok{border-left-color:var(--ok)} .qstat.mid{border-left-color:var(--mid)} .qstat.bad{border-left-color:var(--bad)}
.qstat[open]{box-shadow:var(--shadow)}
.qstat summary{display:flex;gap:14px;align-items:center;padding:12px 14px;cursor:pointer;list-style:none;border-radius:0 14px 14px 0}
.qstat summary:hover{background:color-mix(in srgb,var(--bg) 60%,transparent)}
.qstat summary::-webkit-details-marker{display:none}
.qsn{font-family:var(--f-display);font-weight:800;font-size:20px;width:30px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.qsbody{flex:1;min-width:0;display:grid;gap:2px}
.qsbar{display:flex;align-items:center;gap:10px;width:min(260px,34vw)}
.qstrack{flex:1;height:12px;border-radius:7px;background:var(--surface-2);overflow:hidden}
.qstrack span{display:block;height:100%;border-radius:7px;background:currentColor}
.qstat.ok .qsbar{color:var(--ok)} .qstat.mid .qsbar{color:var(--mid)} .qstat.bad .qsbar{color:var(--bad)}
.qsbar b{font-family:var(--f-display);font-size:20px;min-width:62px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.qsdetail{padding:0 16px 14px 58px;display:grid;gap:10px}
.qsnums{display:flex;gap:6px;flex-wrap:wrap}
.trap{color:var(--warn);font-weight:700;display:flex;gap:6px;align-items:flex-start}
.optstats{display:grid;gap:6px}
.orow{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,2fr) 36px;gap:10px;align-items:center;font-size:14px}
.orow .otext{display:flex;gap:6px;align-items:center;min-width:0}
.orow.ok .otext{color:var(--ok);font-weight:700}
.otrack{height:14px;border-radius:7px;background:var(--surface-2);overflow:hidden}
.otrack span{display:block;height:100%;background:var(--b);border-radius:7px}
.orow.ok .otrack span{background:var(--ok)}
.orow b{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-top:12px}
.stable{border-collapse:collapse;width:100%;font-size:14px}
.stable th,.stable td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
.stable th{font-size:13px;font-weight:700;color:var(--muted);background:color-mix(in srgb,var(--bg) 60%,var(--surface))}
.stable tbody tr:hover td{background:color-mix(in srgb,var(--bg) 55%,transparent)}
.stable td.num,.stable th.num{text-align:right;font-variant-numeric:tabular-nums}
.stable tr:last-child td{border-bottom:0}
.stable.evo td:first-child{white-space:normal;min-width:240px}
.marks{display:flex;gap:3px;flex-wrap:nowrap;align-items:flex-end}
.marks i{width:11px;height:16px;border-radius:3px 3px 1px 1px;background:var(--surface-2)}
.marks i.ok{background:var(--ok)} .marks i.mid{background:var(--mid);height:12px} .marks i.bad{background:var(--bad);height:9px}
.chartbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px;margin-top:10px;overflow-x:auto}
.chartbox svg{width:100%;min-width:480px;height:auto;display:block}
.cgrid{stroke:var(--line);stroke-width:1}
.clab{fill:var(--muted);font-size:12px;font-family:var(--f-body)}
.cval{fill:var(--ink);font-size:13px;font-weight:700;font-family:var(--f-body)}
.cline{fill:none;stroke:var(--b);stroke-width:3;stroke-linejoin:round}
.cdot{fill:var(--surface);stroke:var(--b);stroke-width:3}
.cdot.cur{fill:var(--b)}
.rp-list{margin:0;padding-left:22px;display:grid;gap:4px;max-height:40vh;overflow:auto}
.rp-list li{display:list-item}
.rp-list li .pill{margin-right:8px}
.rp-list li.off{opacity:.35}
.s-sum.wide li{font-size:14px}

/* Móvil */
@media (max-width:900px){
  .land-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .land-hero,.land-hero.is-night{background:none;border:0;border-radius:0;padding:0;overflow:visible}
  .land-left{position:relative;overflow:hidden;isolation:isolate;border-radius:26px;padding:24px 20px 150px;background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom) 80%);border:1px solid color-mix(in srgb,var(--b) 14%,transparent)}
  .is-night .land-left{background:linear-gradient(180deg,var(--night),var(--night-2) 85%);border-color:#ffffff14}
  .land-city{height:150px}
  .land-orb{left:auto;right:22px;top:18px;width:56px;height:56px}
  .is-night .land-orb{width:46px;height:46px}
  .auth-card{max-width:560px;width:100%;justify-self:center}
  .land-how ol{grid-template-columns:minmax(0,1fr);gap:16px;padding:18px 20px}
  .land-how li,.land-how li:first-child{padding:0}
  .land-how li+li{border-left:0;border-top:1.5px dashed var(--line);padding-top:16px}
  .home{grid-template-columns:minmax(0,1fr);gap:18px}
  .folders{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
  .folders h2,.fsep{display:none}
  .frow{flex:none}
  .fbtn{white-space:nowrap}
  .frow .iconbtn{opacity:1}
  .fextra{display:flex;gap:6px}
  .fextra .btn{white-space:nowrap}
  .editor{grid-template-columns:minmax(0,1fr)}
  .qlist{border-right:0;border-bottom:1px solid var(--line);padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
  .qlist ol{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px}
  .qitem{flex:none;width:210px}
  .qedit{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .row2,.gen-grid,.grid2,.revgrid{grid-template-columns:minmax(0,1fr)}
  .navtabs{order:3;width:100%;overflow-x:auto}
  .aved{grid-template-columns:minmax(0,1fr)}
  .aved-prev{position:static}
  .h-qhead{grid-template-columns:auto 1fr}
  .h-qhead .h-qtext{grid-column:1/-1;grid-row:2}
  .h-answered{grid-column:2;justify-self:end}
  .peds{gap:8px}
  .qsdetail{padding-left:16px}
}
@media (max-width:560px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tile{min-height:64px;font-size:17px}
  .pl-match{gap:10px}
  .mitem{font-size:15px;padding:10px}
  .okbtn .t{display:none}
  .hm-head h1{font-size:28px}
  .auth-card,.join-card,.s-card{padding:20px}
  .land-claim{font-size:27px;padding-right:56px}
  .banner{font-size:12px;gap:4px 8px;padding-block:5px}
  .land-sub{font-size:16px}
  .land-left{padding:20px 14px 136px}
  .join-card{padding:18px 16px 16px;border-radius:22px}
  .join-card h1{font-size:27px}
  .joinform{gap:10px}
  .landing .codein{flex-basis:100%;min-height:62px;font-size:32px}
  .joinform .btn.primary.big{width:100%;min-height:58px}
  .rkind{width:40px;height:40px;border-radius:12px}
  .rkind svg{width:18px;height:18px}
  .tnums b{font-size:22px}
  .home .hm-head .row,.page .hm-head .row{width:100%}
  .page .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page .kpis>div{padding:12px 12px 10px}
  .page .kpis b{font-size:24px}
  .page .kpis b.small{font-size:16px}
  .page .kpis span{font-size:13px}
  .typechecks{grid-template-columns:minmax(0,1fr)}
  .brow{font-size:18px;padding:0 10px;gap:8px}
  .bscore{font-size:22px;min-width:70px}
  .bdelta{display:none}
  .qsbar{width:120px}
  .drow{grid-template-columns:90px 1fr 32px}
  .pedwho strong{font-size:18px}
}
@media (max-width:440px){.topbar .brandbtn span{display:none}}

/* ===== Contraste (revisión 4): textos pequeños y letras blancas legibles en claro y en oscuro ===== */
:root{--ok:#0E7D5A; --warn:#8A5A00}
.letter,.tile .tk,.pedbox,.provider .pmark,.s-result h1,.s-result .s-phrase{text-shadow:0 1px 3px rgba(0,0,0,.45)}
.tile .tk{background:rgba(0,0,0,.18)}
.provider .pmark{font-size:13px}
.pedbox{text-shadow:0 2px 8px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.6)}
.h-revtitle{background:#0E7A59}
.s-sum li.mid .mk{color:#1d2240}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .btn.danger-fill,.toast.bad{background:#C93636;border-color:#C93636}
  .s-result.ok{background:#0E7A59}.s-result.bad{background:color-mix(in srgb,var(--bad) 75%,#000)}.s-result.mid{background:#9A6400}
}}
:root[data-theme="dark"] .btn.danger-fill,:root[data-theme="dark"] .toast.bad{background:#C93636;border-color:#C93636}
:root[data-theme="dark"] .s-result.ok{background:#0E7A59}
:root[data-theme="dark"] .s-result.bad{background:color-mix(in srgb,var(--bad) 75%,#000)}
:root[data-theme="dark"] .s-result.mid{background:#9A6400}
@media (max-width:600px){.host.podium .h-title{font-size:clamp(20px,6vw,28px);grid-column:1/-1}}

/* ===== Tareas (revisión 6) ===== */
/* Los avisos de error de las tarjetas del alumno salían en gris (les ganaba «.s-card p»). */
.s-card .err{color:var(--bad)}
.s-card > .pill{justify-self:start;white-space:normal}
.tz-note{grid-column:1/-1;margin:0}
.tk-filter{align-self:center}
.tk-filter small{font-weight:800;opacity:.7;margin-left:2px}
/* Las fechas con valor y vacías del mismo alto */
input[type=datetime-local].input{min-height:46px;line-height:1.2}
input[type=datetime-local].input::-webkit-datetime-edit,input[type=datetime-local].input::-webkit-datetime-edit-fields-wrapper{padding:0;line-height:1.2}
/* Resumen del alumno: el texto de la opción y la etiqueta («Correcta», «va en el puesto 2») ya no se pisan en el móvil */
.s-sum .tiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.s-sum .tile{flex-wrap:wrap;min-height:0;padding:10px 12px;font-size:16px;gap:8px 12px}
.s-sum .tile .tk{width:32px;height:32px;font-size:19px}
.s-sum .tile .tt,.s-sum .pl-ord .ot{flex:1 1 7em;overflow-wrap:anywhere}
.s-sum .pl-ord li{flex-wrap:wrap;font-size:16px}
.s-sum .pl-ord .fix{margin-left:auto}
/* Final del intento: frase de ánimo, aciertos y medallas */
.s-cheer{font-family:var(--f-display);font-size:clamp(20px,3vw,26px);font-weight:700;color:var(--brand);margin:0}
.s-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.s-chips span{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;font-weight:800;font-size:14px;background:var(--surface-2);color:var(--ink)}
.s-chips .ok{background:var(--ok-soft);color:var(--ok)}
.s-chips .mid{background:var(--warn-soft);color:var(--warn)}
.mp.r1 b{color:#B07800}.mp.r2 b{color:#6B7787}.mp.r3 b{color:#A0562B}
.mp.r1{border-color:#E8B400;border-width:2px}
.mp.me.r1{border-color:var(--brand)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mp.r1 b{color:#F2C23A}:root:not([data-theme="light"]) .mp.r2 b{color:#C3CCD8}:root:not([data-theme="light"]) .mp.r3 b{color:#E39A6B}}
:root[data-theme="dark"] .mp.r1 b{color:#F2C23A}:root[data-theme="dark"] .mp.r2 b{color:#C3CCD8}:root[data-theme="dark"] .mp.r3 b{color:#E39A6B}
/* Clasificación de la tarea: sube o baja de puesto */
.s-move{font-weight:800;border-radius:999px;padding:4px 14px;margin:0}
.s-move.up{background:var(--ok-soft);color:var(--ok);animation:tk-pop .5s cubic-bezier(.2,.8,.3,1.4) both}
.s-move.down{background:var(--bad-soft);color:var(--bad)}
@keyframes tk-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.s-move.up{animation:none}}

/* ===== La ciudad (skyline.js): decoración común. Día = pantallas de alumno y profe; noche = proyector. ===== */
:root{ --night:#171B45; --night-2:#232A66; --lamp:#FFD84D; --lamp-glow:rgba(255,216,77,.55); --sky-top:#DCE9FF; --sky-bottom:#F4F8FF; }
.skyline{display:block;width:100%;height:100%;pointer-events:none}
.skyline .win{fill:rgba(255,255,255,.10);transition:fill .5s ease}
.sky-day .win{fill:rgba(255,255,255,.75)}
.skyline .win.on{fill:var(--lamp);filter:drop-shadow(0 0 4px var(--lamp-glow))}
.sky-day .win.on{fill:#FFC93C;filter:none}
.skyline .win.just{animation:win-pop .9s ease}
@keyframes win-pop{0%{fill:#fff}40%{fill:#fff}100%{fill:var(--lamp)}}
.skyline .sky-beacon{animation:beacon 2.4s ease-in-out infinite}
@keyframes beacon{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.skyline .win.just,.skyline .sky-beacon{animation:none}}

/* ===== Pantallas del alumno: la ciudad de día =====
   Partida en directo (móvil del alumno), tarea a su ritmo y «Ver como alumno» del profe.
   Cielo claro de fondo, tarjetas blancas gruesas, botones de recreativa y la ciudad al pie de las pantallas tranquilas.
   En modo oscuro, la misma ciudad de noche. Una sola animación por momento importante; con «reducir movimiento»,
   todo quieto (regla global de styles.css). */

/* ---------- Colores del cielo (día) y de la noche (modo oscuro) ---------- */
.stu,.player{--sky1:var(--sky-top);--sky2:var(--sky-bottom);--street:#C3D2EC;--lampc:#FFC93C;--res-mid:#C25E00}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.stu,.player){
  --sky1:#11143A;--sky2:var(--night);--bg:var(--night);--surface:var(--night-2);--surface-2:#2E3679;--line:#3C4692;
  --muted:#AEB6DA;--ink:#EEF1FA;--card-edge:#0C0F30;--card-edge-2:#080A24;--street:#0E1136;--focus-soft:rgba(111,163,255,.28)}}
:root[data-theme="dark"] :is(.stu,.player){
  --sky1:#11143A;--sky2:var(--night);--bg:var(--night);--surface:var(--night-2);--surface-2:#2E3679;--line:#3C4692;
  --muted:#AEB6DA;--ink:#EEF1FA;--card-edge:#0C0F30;--card-edge-2:#080A24;--street:#0E1136;--focus-soft:rgba(111,163,255,.28)}
body[data-route="student"],body[data-route="task"]{background:var(--sky-bottom)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body:is([data-route="student"],[data-route="task"]){background:var(--night)}}
:root[data-theme="dark"] body:is([data-route="student"],[data-route="task"]){background:var(--night)}

.stu,.player{background:linear-gradient(180deg,var(--sky1),var(--sky2) 560px) var(--sky2);color:var(--ink)}
.stu .s-top{background:transparent;border-bottom:0;padding-block:12px}
.stu .s-main{padding-block:14px 36px;gap:18px}
.stu.has-city .s-main{padding-bottom:22px}

/* Quién soy y cuántos puntos llevo: una pastilla blanca con el marcador en amarillo farola */
.stu .s-me{background:var(--surface);border-radius:999px;padding:3px 4px 3px 3px;gap:8px;box-shadow:0 3px 0 var(--card-edge)}
.stu .s-me b{background:var(--lamp);color:#2A1E00;font-weight:800;font-size:19px;padding:1px 12px;min-width:2.2em;text-align:center}
.stu .s-me svg.av{width:32px;height:32px}

/* ---------- La ciudad al pie ---------- */
.s-city{position:relative;flex:none;height:clamp(92px,15vw,168px);margin-top:auto;overflow:hidden}
.s-city::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:var(--street)}
.s-city .skyline{position:absolute;inset:0 0 6px}
.s-city .city-night{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .s-city .city-day{display:none}:root:not([data-theme="light"]) .s-city .city-night{display:block}}
:root[data-theme="dark"] .s-city .city-day{display:none}
:root[data-theme="dark"] .s-city .city-night{display:block}
:root[data-theme="light"] .s-city .city-night{display:none}

/* ---------- Botones de recreativa (solo en estas pantallas) ---------- */
:is(.stu,.player) .btn{border:0;background:var(--surface);color:var(--ink);min-height:44px;border-radius:13px;box-shadow:0 3px 0 var(--card-edge),inset 0 0 0 2px var(--line);transition:transform .08s,box-shadow .08s,filter .15s;touch-action:manipulation}
:is(.stu,.player) .btn:hover:not([disabled]){background:var(--surface);filter:brightness(.98)}
:is(.stu,.player) .btn:active:not([disabled]){transform:translateY(2px);box-shadow:0 1px 0 var(--card-edge),inset 0 0 0 2px var(--line)}
:is(.stu,.player) .btn.big{min-height:56px;border-radius:16px;padding:12px 26px;font-family:var(--f-display);font-weight:800;font-size:20px;box-shadow:0 5px 0 var(--card-edge),inset 0 0 0 2px var(--line)}
:is(.stu,.player) .btn.big:active:not([disabled]){transform:translateY(3px);box-shadow:0 2px 0 var(--card-edge),inset 0 0 0 2px var(--line)}
:is(.stu,.player) .btn.primary{background:var(--brand);color:var(--brand-ink);box-shadow:0 5px 0 color-mix(in srgb,var(--brand) 60%,#000)}
:is(.stu,.player) .btn.primary:hover:not([disabled]){background:var(--brand);filter:brightness(1.06)}
:is(.stu,.player) .btn.primary:active:not([disabled]){transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--brand) 60%,#000)}
:is(.stu,.player) .btn.primary[disabled]{opacity:1;background:var(--surface-2);color:var(--muted);box-shadow:0 5px 0 var(--card-edge)}
:is(.stu,.player) .btn.ghost{background:transparent;box-shadow:none;min-height:40px}
:is(.stu,.player) .btn.ghost:hover{background:var(--surface-2)}
/* «Enviar respuesta»: siempre a mano del pulgar, pegado abajo */
:is(.stu,.player) .center:has(> [data-act="s-send"],> [data-act="t-send"],> [data-act="pr-send"]){position:sticky;bottom:12px;z-index:6;display:flex;justify-content:center;padding-top:4px}
:is(.stu,.player) .center > :is([data-act="s-send"],[data-act="t-send"],[data-act="pr-send"]){width:min(100%,420px)}

/* ---------- Tarjetas y textos ---------- */
.stu .s-card{border:0;border-radius:26px;padding:26px;box-shadow:0 6px 0 var(--card-edge);gap:16px}
.stu .s-card h1{font-size:clamp(26px,6vw,32px);font-weight:800;line-height:1.08}
.stu .s-center h1{font-weight:800;line-height:1.08}
.stu .s-card p{color:var(--muted)}
.stu .eyebrow{text-transform:none;letter-spacing:0;font-size:15px;font-weight:800;color:color-mix(in srgb,var(--e) 72%,var(--ink))}
.stu .field>label,.stu .lbl{text-transform:none;letter-spacing:0;font-size:15px;font-weight:800;color:var(--ink)}
.stu .input{border:2.5px solid var(--line);background:var(--surface)}
.stu .input.big{min-height:60px;border-radius:16px;font-size:23px}
.stu .input:focus{border-color:var(--b);box-shadow:0 0 0 4px var(--focus-soft)}
.stu .input.pin{max-width:240px;font-size:38px;letter-spacing:.55em;padding-left:.55em;font-weight:800}
.stu .hint{color:var(--muted)}
.s-msg .s-center{background:var(--surface);border-radius:26px;box-shadow:0 6px 0 var(--card-edge);padding:28px 22px;max-width:520px;width:100%;margin:22px auto 0;gap:14px}
.s-msg .s-center h1{font-size:clamp(26px,6vw,34px)}
.s-msg .s-center p{color:var(--muted)}

/* ---------- Entrar en una partida ---------- */
.s-join{text-align:center;justify-items:center;padding:30px 24px 28px;margin-top:clamp(10px,5vh,48px)}
.s-join h1{font-size:clamp(30px,8vw,40px)!important}
.s-join > p{max-width:30ch}
.s-blocks{display:flex;align-items:flex-end;gap:6px;height:58px}
.s-blocks i{width:24px;border-radius:7px 7px 3px 3px;background:var(--a);height:34px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.14);animation:al-build .5s cubic-bezier(.2,.9,.3,1.25) both}
.s-blocks i:nth-child(2){background:var(--b);height:56px;animation-delay:.08s}
.s-blocks i:nth-child(3){background:var(--c);height:42px;animation-delay:.16s}
.s-blocks i:nth-child(4){background:var(--d);height:50px;animation-delay:.24s}
.stu .joinform{flex-direction:column;align-items:stretch;gap:14px;width:100%;max-width:400px}
.stu .codein.sm{flex:none;height:76px;font-size:38px;letter-spacing:.22em;padding:8px 6px 8px calc(6px + .22em);border-radius:18px;background:var(--surface-2);border:3px solid var(--line);color:var(--ink);box-shadow:inset 0 3px 0 rgba(22,32,51,.06)}
.stu .codein.sm::placeholder{color:color-mix(in srgb,var(--muted) 45%,transparent)}
.stu .codein.sm:focus{border-color:var(--b);background:var(--surface);box-shadow:0 0 0 5px var(--focus-soft)}
.stu .joinform .btn{width:100%;min-height:62px;font-size:23px}
.s-join .err{min-height:0}

/* ---------- Nombre y avatar ---------- */
.stu .aved-prev > svg.av{filter:drop-shadow(0 6px 0 var(--card-edge))}
.stu .aved .tabs{padding:5px;border-radius:16px;background:var(--surface-2)}
.stu .aved .tabs button{border-radius:12px;font-weight:800;min-height:40px}
.stu .aved .tabs button.on{background:var(--surface);color:var(--ink);box-shadow:0 3px 0 var(--card-edge)}
.stu .avgrid{gap:10px;padding:4px 4px 8px}
.stu .avopt{border:0;background:var(--surface-2);border-radius:16px;box-shadow:0 3px 0 var(--card-edge);transition:transform .08s,box-shadow .08s}
.stu .avopt:hover{border:0;filter:brightness(1.03)}
.stu .avopt:active{transform:translateY(2px);box-shadow:0 1px 0 var(--card-edge)}
.stu .avopt.on{background:color-mix(in srgb,var(--lamp) 38%,var(--surface));box-shadow:0 3px 0 color-mix(in srgb,var(--c) 70%,#000),inset 0 0 0 3px var(--c)}
.stu .avopt.none span{font-weight:800}

/* ---------- Sala de espera ---------- */
.stu .s-lobby{gap:12px;padding-top:clamp(8px,4vh,40px);animation:al-rise .4s ease-out both}
.s-stage{position:relative;display:grid;place-items:center;padding-bottom:6px}
.s-stage::after{content:"";position:absolute;bottom:0;width:58%;height:14px;border-radius:50%;background:rgba(22,32,51,.12);z-index:-1}
.s-lobby h1{font-size:clamp(30px,7vw,40px)}
.s-lobby > p:not(.hint){color:var(--muted);font-weight:700}
.stu .s-lobby-n{display:inline-flex;align-items:center;gap:10px;background:var(--surface);color:var(--ink);font-weight:800;font-size:16px;border-radius:999px;padding:7px 16px 7px 12px;box-shadow:0 3px 0 var(--card-edge)}
.stu .s-lobby-n::before{content:"";width:12px;height:15px;border-radius:3px;background:var(--lampc);box-shadow:0 0 0 2px color-mix(in srgb,var(--lampc) 40%,transparent)}
.s-lobby-n.bump{animation:al-pop .45s cubic-bezier(.2,.9,.3,1.5)}

/* ---------- Barra de reacciones ---------- */
.reactbar{position:sticky;bottom:12px;z-index:5;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;width:fit-content;max-width:100%;min-width:0;margin:6px auto 0;padding:6px 8px;background:var(--surface);border:0;border-radius:28px;box-shadow:0 4px 0 var(--card-edge),inset 0 0 0 2px var(--line);transition:opacity .2s}
.rbtn{width:54px;height:54px;border:0;border-radius:50%;background:transparent;font-size:30px;line-height:1;display:grid;place-items:center;padding:0;transition:transform .15s,background .15s,opacity .2s;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;touch-action:manipulation}
.rbtn:hover{background:var(--surface-2)}
.rbtn:active{transform:scale(.88)}
.rbtn.pressed{animation:al-pressed .55s cubic-bezier(.2,.9,.3,1.4)}
.reactbar.cool .rbtn{cursor:wait}
.reactbar.cool .rbtn:not(.pressed){opacity:.35}
.reactbar.cool .rbtn:hover{transform:none;background:transparent}
@media (max-width:520px){.rbtn{width:42px;height:42px;font-size:24px}.reactbar{gap:2px;padding:5px 6px}}
@media (max-width:400px){.rbtn{width:38px;height:38px;font-size:22px}.reactbar{gap:1px;padding:4px 5px}}
/* Los 8 emojis en una sola fila también en móviles pequeños */
@media (max-width:370px){.rbtn{width:34px;height:34px;font-size:20px}}
@media (max-width:335px){.rbtn{width:32px;height:32px;font-size:19px}.reactbar{gap:0;padding:3px 4px}}

/* ---------- Presentación del cuestionario ---------- */
.s-intro{display:grid;justify-items:center;text-align:center;gap:14px;padding-top:14px;max-width:760px;width:100%;margin:0 auto}
.s-intro .intro-tiles{display:flex;align-items:flex-end;gap:7px;height:76px;margin-bottom:2px}
.s-intro .intro-tiles span{width:30px;height:46px;border-radius:8px 8px 3px 3px;background:var(--a);box-shadow:inset 0 -5px 0 rgba(0,0,0,.14);animation:al-build .55s cubic-bezier(.2,.9,.3,1.25) both}
.s-intro .intro-tiles span:nth-child(2){background:var(--b);height:72px;animation-delay:.1s}
.s-intro .intro-tiles span:nth-child(3){background:var(--c);height:56px;animation-delay:.2s}
.s-intro .intro-tiles span:nth-child(4){background:var(--d);height:64px;animation-delay:.3s}
.s-intro .intro-cover{margin:0;max-height:none;max-width:100%;background:none;box-shadow:none;border-radius:0}
.s-intro .intro-cover img{max-height:190px;max-width:min(100%,420px);border-radius:18px;box-shadow:0 6px 0 var(--card-edge);object-fit:cover}
.s-intro .intro-kicker{font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:0;text-transform:none;color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--surface));padding:4px 16px;border-radius:999px}
.s-intro .intro-title{font-size:clamp(32px,7vw,58px);font-weight:800;line-height:1.02;color:var(--ink);max-width:20ch;text-shadow:none}
.s-intro .intro-desc{font-size:18px;color:var(--muted);max-width:46ch}
.s-intro .intro-facts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:2px 0}
.s-intro .intro-facts span{background:var(--surface);border:0;border-radius:999px;padding:6px 14px;font-weight:700;color:var(--muted);box-shadow:0 3px 0 var(--card-edge)}
.s-intro .intro-facts b{font-family:var(--f-display);font-weight:800;font-size:19px;color:var(--ink)}
.s-intro .intro-me{display:grid;justify-items:center;gap:6px;margin-top:4px}
.s-intro .intro-me p{font-family:var(--f-display);font-size:clamp(22px,5vw,28px);font-weight:800;color:var(--ink)}
.s-intro .intro-bar{width:min(520px,100%);height:14px;border-radius:9px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line);overflow:hidden;margin-top:6px}
.s-intro .intro-bar i{display:block;height:100%;border-radius:9px;background:var(--b);transform-origin:left;animation:al-drain 4s linear forwards}

/* ---------- «¡Prepárate!» antes de poder contestar ---------- */
.s-ready{display:grid;justify-items:center;text-align:center;gap:16px;padding-top:6px}
.s-ready .ready-meta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;font-weight:700;color:var(--muted)}
.s-ready .ready-num{background:var(--surface);border:0;border-radius:999px;padding:4px 14px;font-weight:800;color:var(--ink);box-shadow:0 3px 0 var(--card-edge)}
.s-ready .ready-kicker{font-family:var(--f-display);font-size:clamp(34px,8vw,48px);font-weight:800;color:var(--brand);line-height:1}
.s-ready .ready-count{position:relative;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:var(--c);box-shadow:0 8px 0 color-mix(in srgb,var(--c) 62%,#000)}
.s-ready .ready-count::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:5px solid var(--c);opacity:0;animation:al-ring 1s ease-out infinite}
.s-ready .ready-count span{color:var(--c-ink);font-family:var(--f-display);font-size:86px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;text-shadow:none}
.s-ready .ready-count span.go{animation:al-countpop .9s cubic-bezier(.2,.9,.3,1.3) both}
.s-ready .ready-q{width:100%}
.s-ready .ready-hint{color:var(--muted);font-weight:700}
.s-ready .ready-last{font-size:18px;padding:4px 16px;margin:-4px 0}

/* ---------- La pregunta ---------- */
.stu.q .s-main{gap:14px;padding-top:6px}
.s-qhead{color:var(--muted)}
.s-qhead > span:first-child,.s-ready .ready-meta .pl-kind,.s-qhead .pl-kind{background:var(--surface);border-radius:999px;padding:4px 12px;box-shadow:0 3px 0 var(--card-edge);font-weight:800;color:var(--ink)}
.s-qhead .pl-kind,.s-ready .pl-kind{font-size:13.5px}
:is(.stu,.player) .pl-kind span{color:var(--ink)}
:is(.stu,.player) .pl-timer{gap:10px}
:is(.stu,.player) .pl-track{height:16px;border-radius:99px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line)}
:is(.stu,.player) .pl-bar{background:var(--b);border-radius:99px}
:is(.stu,.player) .pl-secs{min-width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:0 3px 0 var(--card-edge);text-align:center;font-size:24px}
.pl-timer.urgent .pl-bar{background:var(--a);animation:al-blink .5s ease-in-out infinite alternate}
.pl-timer.urgent .pl-secs{color:#fff;background:var(--a);box-shadow:0 3px 0 color-mix(in srgb,var(--a) 60%,#000);animation:al-countpop .5s ease-out}
:is(.stu,.player) .pl-q{border:0;border-radius:22px;box-shadow:0 5px 0 var(--card-edge);padding:20px 22px}
:is(.stu,.player) .pl-q h2{font-size:clamp(22px,4.6vw,32px);font-weight:700;line-height:1.18}
:is(.stu,.player) .pl-hint{font-size:14px;color:var(--muted);max-width:52ch;margin:0 auto}
.stu #s-widget .slot{min-height:44px}
/* Opciones más grandes en tablet y ordenador */
@media (min-width:561px){
  .stu.q #s-widget .tiles:not(.tf) .tile,.player .pl-main > .tiles:not(.tf) .tile,.stu.q #t-widget .tiles:not(.tf) .tile{min-height:clamp(86px,13vh,140px);font-size:clamp(21px,2.4vw,26px)}
  .stu.q #s-widget .tiles .tile .tk{width:50px;height:50px;font-size:29px}
  .stu.q #s-widget .tiles.tf .tile,.stu.q #t-widget .tiles.tf .tile{min-height:clamp(150px,24vh,220px)}
}

/* Pausa del alumno */
.s-pause h2{font-size:32px;display:inline-flex;align-items:center;gap:10px;font-weight:800}
.s-pauseico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--c);color:var(--c-ink);font-size:22px;box-shadow:0 3px 0 color-mix(in srgb,var(--c) 62%,#000)}
.s-pause p{color:var(--muted);font-weight:700}

/* ---------- Respuesta enviada: esperando a los demás ---------- */
.stu .s-wait{gap:12px;padding-top:18px}
.s-wait h2{font-size:clamp(28px,7vw,36px);font-weight:800;animation:al-pop .35s cubic-bezier(.2,.9,.3,1.4) both}
.s-mine{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;max-width:100%}
.s-mine-l{font-weight:700;color:var(--muted)}
.s-mine-o{display:inline-flex;align-items:center;gap:8px;max-width:100%;background:var(--surface);border:0;border-radius:999px;padding:4px 16px 4px 4px;font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink);text-align:left;box-shadow:0 3px 0 var(--card-edge)}
.s-mine-o .letter{width:32px;height:32px;font-size:17px;border-radius:50%}
.s-mine-o > span:last-child{min-width:0;overflow-wrap:anywhere}
.s-wstreak{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:800;font-size:19px;color:var(--ink);background:color-mix(in srgb,var(--a) 14%,var(--surface));border-radius:999px;padding:4px 14px 4px 10px;animation:al-pop .45s .2s cubic-bezier(.2,.9,.3,1.4) both}
.s-wstreak svg{color:var(--a);animation:al-flicker .7s ease-in-out infinite alternate;transform-origin:50% 90%}
.s-wait .s-phrase{font-size:clamp(19px,4.6vw,24px)}

/* ---------- Corrección: el gran panel de color ---------- */
.stu .s-result{--res:var(--d);position:relative;isolation:isolate;overflow:hidden;flex-direction:column;flex-wrap:nowrap;text-align:center;gap:10px;padding:24px 20px 26px;border-radius:28px;width:100%;max-width:640px;margin:0 auto;background:var(--res);box-shadow:0 8px 0 color-mix(in srgb,var(--res) 62%,#000)}
.stu .s-result.ok{--res:var(--d)}
.stu .s-result.mid{--res:var(--res-mid)}
.stu .s-result.bad{--res:var(--bad)}
.stu .s-result.none{--res:#5B6478}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stu .s-result{background:var(--res)}:root:not([data-theme="light"]) .stu .s-result.bad{--res:#C93636}}
:root[data-theme="dark"] .stu .s-result{background:var(--res)}
:root[data-theme="dark"] .stu .s-result.bad{--res:#C93636}
.stu.rev .s-result{animation:al-pop .4s cubic-bezier(.2,.9,.3,1.25) both}
.s-rays{position:absolute;inset:-60%;z-index:-1;background:repeating-conic-gradient(from 0deg at 50% 36%,rgba(255,255,255,.15) 0 9deg,transparent 9deg 18deg);transform-origin:50% 36%;animation:al-rayin .7s .1s cubic-bezier(.2,.8,.3,1) both}
.s-res-av{display:grid;place-items:center;width:136px;height:136px;border-radius:50%;background:rgba(255,255,255,.2)}
.s-res-av svg.av{width:116px;height:116px}
.s-res-txt{justify-items:center;gap:8px;max-width:520px}
.stu .s-result h1{font-size:clamp(36px,9vw,54px);line-height:1;color:#fff}
.s-pts{font-family:var(--f-display);font-size:24px;font-weight:800;color:#fff;background:rgba(0,0,0,.16);border-radius:999px;padding:2px 18px 2px 14px;line-height:1.3}
.s-pts b{font-size:40px;font-variant-numeric:tabular-nums;vertical-align:-2px}
.stu .s-result .s-phrase{color:#fff;font-weight:700;font-size:clamp(19px,4.6vw,23px);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.s-streak{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;font-family:var(--f-display);font-size:22px;font-weight:800;color:#2A1E00;background:var(--lamp);border-radius:999px;padding:4px 16px 4px 10px;box-shadow:0 3px 0 rgba(0,0,0,.2);text-shadow:none;animation:al-pop .45s .3s cubic-bezier(.2,.9,.3,1.4) both}
.s-streak svg{color:var(--a);animation:al-flicker .7s ease-in-out infinite alternate;transform-origin:50% 90%}
.s-streak span{font-size:17px}
.s-bonus{color:#fff;background:rgba(0,0,0,.16)}
.s-fast{justify-self:center;text-align:center;font-weight:700;background:var(--surface);border:0;border-radius:999px;padding:8px 18px;color:var(--ink);box-shadow:0 3px 0 var(--card-edge)}
.s-fast.me{font-family:var(--f-display);font-size:clamp(17px,4.6vw,21px);border-radius:20px;font-weight:800;background:var(--c);color:var(--c-ink);box-shadow:0 4px 0 color-mix(in srgb,var(--c) 62%,#000);animation:al-pop .45s .45s cubic-bezier(.2,.9,.3,1.4) both}
.stu .s-sol{max-width:640px;width:100%;margin:0 auto;border:0;border-radius:20px;box-shadow:0 5px 0 var(--card-edge);padding:14px 16px}
.stu .s-sol summary{font-family:var(--f-display);font-weight:800;font-size:18px}
.stu .s-qtxt{font-family:var(--f-display);font-size:18px}
.s-late{animation:al-rise .4s ease-out both}
.s-late p{max-width:34ch;color:var(--muted);font-weight:700}

/* ---------- Clasificación: mi edificio crece cuando subo ---------- */
.stu .s-board{gap:10px;padding-top:12px}
.s-tower{display:flex;flex-direction:column;align-items:center}
.s-tower svg.av{position:relative;z-index:1;margin-bottom:-4px}
.s-tw{--tw:var(--b);display:block;width:124px;height:calc(34px + var(--up,0) * 96px);border-radius:12px 12px 0 0;background:repeating-linear-gradient(90deg,var(--tw) 0 14px,transparent 14px 28px) -1px 0,repeating-linear-gradient(180deg,var(--tw) 0 12px,var(--lampc) 12px 26px) 0 2px var(--tw);transform-origin:bottom;animation:al-build .7s .1s cubic-bezier(.2,.9,.3,1.15) both}
.s-board::after{content:"";width:min(260px,80%);height:8px;border-radius:4px;background:var(--street);margin-top:-10px}
.s-board .s-rank{font-size:24px;font-weight:700;order:0}
.s-board .s-rank b{font-family:var(--f-display);font-size:1.9em;font-weight:800;color:var(--ink)}
.s-board > *:not(.s-tower){order:2}
.s-board::after{order:1}
.s-board .s-move{font-size:15px;vertical-align:middle}
.s-board .s-move.up{animation:al-climb .8s .2s cubic-bezier(.2,.9,.3,1.3) both}
.s-board .s-move.down{animation:al-rise .5s .2s ease-out both}
.s-board #s-rank-n,.s-board #s-total-n{font-variant-numeric:tabular-nums}
.stu .s-total{font-size:30px;font-weight:800}
.stu .s-gap{font-size:19px}
.s-last{display:inline-block;vertical-align:middle;font-size:16px;font-weight:800;color:var(--ok);background:var(--ok-soft);border-radius:999px;padding:2px 10px;animation:al-rise .5s .3s ease-out both}
.stu .s-phrase{font-weight:700}
.stu .s-record{border:0;border-radius:14px;box-shadow:0 3px 0 var(--card-edge)}
/* Tabla de la tarea */
.stu .tboard{gap:10px}
.stu .trow{border:0;border-radius:14px;padding:8px 14px 8px 8px;box-shadow:0 3px 0 var(--card-edge);gap:10px;font-family:var(--f-display);font-size:18px}
.stu .trow .brank{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--surface-2);font-weight:800;font-size:19px;flex:none}
.stu .trow:nth-child(1) .brank{background:#F2B61E;color:#2A1E00}
.stu .trow:nth-child(2) .brank{background:#B8C2D3;color:#1E2738}
.stu .trow:nth-child(3) .brank{background:#D98A55;color:#2A1300}
.stu .trow .bname{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.stu .trow .bname .pill{font-family:var(--f-body)}
.stu .trow .bscore{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.stu .trow.me{border:0;background:color-mix(in srgb,var(--lamp) 34%,var(--surface));box-shadow:0 3px 0 color-mix(in srgb,var(--c) 70%,#000),inset 0 0 0 3px var(--c)}

/* ---------- Final: mini podio de tres torres y resumen ---------- */
.stu .s-final{gap:18px;max-width:720px;width:100%;margin:0 auto}
.stu .s-final > .s-center{padding-top:10px;gap:10px}
.stu .s-final h1{font-size:clamp(34px,8vw,48px)}
.stu .s-final .minipod{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:10px;max-width:460px;width:100%;margin:6px auto 0}
.stu .s-final .minipod .mp{--o:0;--th:70px;--tw:#C9773F;--tk:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;flex:1 1 0;min-width:0;max-width:150px;background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.stu .s-final .minipod .mp.pos0{--o:2;--th:132px;--tw:#F2B61E;--tk:#2A1E00;order:2}
.stu .s-final .minipod .mp.pos1{--o:1;--th:98px;--tw:#9AA6BA;--tk:#fff;order:1}
.stu .s-final .minipod .mp.pos2{order:3}
/* Si hay menos de tres, la torre del primero no espera a las que no existen */
.stu .s-final .minipod .mp.pos0:only-child{--o:0}
.stu .s-final .minipod .mp.pos0:nth-last-child(2){--o:1}
.stu .s-final .minipod .mp.pos1:last-child{--o:0}
.stu .s-final .minipod .mp svg.av{order:0;width:54px;height:54px;animation:al-rise .4s calc(.55s + var(--o) * .3s) ease-out both}
.stu .s-final .minipod .mp > span{order:1;font-family:var(--f-display);font-weight:800;font-size:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.stu .s-final .minipod .mp > small{order:2;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.stu .s-final .minipod .mp b{order:3;display:grid;place-items:start center;width:100%;height:var(--th);margin-top:4px;padding-top:8px;border-radius:12px 12px 0 0;font-size:28px;font-weight:800;color:var(--tk);text-shadow:none;
  background:repeating-linear-gradient(90deg,var(--tw) 0 12px,transparent 12px 24px) 6px 46px/100% calc(100% - 46px) no-repeat,repeating-linear-gradient(180deg,var(--tw) 0 8px,rgba(255,255,255,.55) 8px 18px) 0 46px/100% calc(100% - 46px) no-repeat,var(--tw);
  transform-origin:bottom;animation:al-build .6s calc(.2s + var(--o) * .3s) cubic-bezier(.2,.9,.3,1.15) both}
.stu .s-final .minipod .mp.me svg.av{border-radius:50%;box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--brand)}
.stu .s-final .minipod .mp.me > span{color:var(--brand)}
.stu .s-final .minipod::after{display:none}
.stu .s-final .minipod{position:relative;padding-bottom:8px;border-bottom:8px solid var(--street);border-radius:0}
.stu .s-sumh{font-size:22px;font-weight:800;margin-top:6px}
.stu .s-sum{gap:10px}
.stu .s-sum li{border:0;border-radius:14px;box-shadow:0 3px 0 var(--card-edge);padding:10px 14px 10px 10px;align-items:center}
.stu .s-sum .mk{width:32px;height:32px}
.stu .s-sum .t{font-weight:700}
.stu .s-sum .p{font-size:18px;font-variant-numeric:tabular-nums}
.stu .s-sum .tiles.tf:not(.onhost){grid-template-columns:repeat(2,minmax(0,1fr))}
.stu .s-sum .tiles.tf:not(.onhost) .tile{flex-direction:row;min-height:0;font-size:16px;padding:10px 12px;justify-content:flex-start;text-align:left}
.stu .s-sum .tiles.tf:not(.onhost) .tile .tk{width:32px;height:32px;font-size:19px}
.stu .s-sum .tiles.tf:not(.onhost) .tile .badge{position:static}
.stu .s-final .s-rank{font-size:18px}
.stu .s-final .s-rank b{font-family:var(--f-display);font-size:1.5em;font-weight:800}
.stu .s-cheer{font-weight:800}
.stu .newrec{box-shadow:0 3px 0 color-mix(in srgb,var(--c) 62%,#000)}
.stu .s-chips span{box-shadow:0 2px 0 var(--card-edge)}
@media (max-width:420px){
  .stu .s-final .minipod{gap:6px}
  .stu .s-final .minipod .mp{--th:58px}
  .stu .s-final .minipod .mp.pos0{--th:104px}
  .stu .s-final .minipod .mp.pos1{--th:78px}
  .stu .s-final .minipod .mp svg.av{width:46px;height:46px}
  .stu .s-final .minipod .mp > span{font-size:14px}
  .stu .s-final .minipod .mp b{font-size:24px;background-position:4px 40px,0 40px,0 0;background-size:100% calc(100% - 40px),100% calc(100% - 40px),auto}
}

/* ---------- Tarea: portada, PIN y casa ---------- */
.stu.task .s-card > .pill{font-size:13px;padding:4px 12px}
.stu .facts{list-style:none;padding:0;gap:8px}
.stu .facts li{position:relative;padding-left:26px}
.stu .facts li::before{content:"";position:absolute;left:4px;top:.35em;width:11px;height:14px;border-radius:3px;background:var(--lampc);box-shadow:0 0 0 2px color-mix(in srgb,var(--lampc) 35%,transparent)}
.stu .facts b{font-family:var(--f-display);font-weight:800}
.stu .t-who{gap:14px;background:var(--surface-2);border-radius:20px;padding:12px 16px;justify-content:flex-start}
.stu .t-who h2{font-size:24px;font-weight:800}
.stu .t-who p{color:var(--muted)}
.stu .attempts li{background:var(--surface-2);border-radius:12px;font-weight:700}
.stu .attempts b{font-family:var(--f-display);font-weight:800}

/* ---------- Se ha perdido la conexión ---------- */
.stu .s-lost{display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:calc(100% - 32px);margin:4px auto 0;border-radius:999px;padding:8px 18px 8px 14px;background:var(--bad);color:#fff;font-weight:800;box-shadow:0 4px 0 color-mix(in srgb,var(--bad) 60%,#000);text-align:left}
.stu .s-lost::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:#fff;animation:al-blink .7s ease-in-out infinite alternate}
.stu .s-main > .s-lost{margin:0 auto}

/* ---------- «Ver como alumno» del profe ---------- */
.player:focus{outline:none}
.player .pl-top{background:transparent;border-bottom:0;padding-block:12px}
.player .pl-tag{text-transform:none;letter-spacing:0;font-size:13px;font-weight:800;background:var(--lamp);color:#2A1E00;padding:3px 12px;box-shadow:0 2px 0 color-mix(in srgb,var(--lamp) 55%,#000)}
.player .pl-top .pl-count{color:var(--ink);font-weight:800}
.player .pl-top .pl-score{background:var(--surface);border-radius:999px;padding:0 14px;box-shadow:0 3px 0 var(--card-edge)}
.player .pl-top .iconbtn{background:var(--surface);color:var(--ink);box-shadow:0 3px 0 var(--card-edge);width:40px;height:40px;border-radius:12px;font-size:22px}
.player .pl-main{gap:16px}
.player.pl-calm .pl-main{padding-bottom:26px}
.pl-top .pl-tag,.pl-top .pl-count,.pl-top .pl-score{white-space:nowrap}
.pl-result{gap:14px;padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));border-radius:26px 26px 0 0;flex-wrap:nowrap;box-shadow:0 -4px 0 rgba(0,0,0,.12)}
.pl-result.ok{background:var(--d)}.pl-result.mid{background:var(--res-mid)}.pl-result.bad{background:var(--bad)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pl-result.bad{background:#C93636}:root:not([data-theme="light"]) .pl-result.bad .pl-rmark{color:#C93636}}
:root[data-theme="dark"] .pl-result.bad{background:#C93636}
:root[data-theme="dark"] .pl-result.bad .pl-rmark{color:#C93636}
.pl-result > div{flex:1;min-width:0}
.pl-rmark{flex:none;width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:30px;box-shadow:0 3px 0 rgba(0,0,0,.2);animation:al-countpop .5s .1s cubic-bezier(.2,.9,.3,1.3) both}
.pl-result.ok .pl-rmark{color:var(--d)}.pl-result.mid .pl-rmark{color:var(--res-mid)}.pl-result.bad .pl-rmark{color:var(--bad)}
.pl-result strong{font-size:30px;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.pl-result span{font-size:19px;font-weight:700}
.pl-result .btn.big{flex:none;background:#fff;color:#14203a;box-shadow:0 5px 0 rgba(0,0,0,.25)}
.pl-result .btn.big:hover:not([disabled]){background:#fff}
.pl-result .btn.big:active:not([disabled]){box-shadow:0 2px 0 rgba(0,0,0,.25)}
.pl-end{gap:12px;padding-top:30px}
.pl-end h2{font-size:clamp(32px,8vw,44px);font-weight:800}
.pl-end .pts{font-size:clamp(64px,16vw,88px);color:var(--ink);background:var(--lamp);color:#2A1E00;border-radius:24px;padding:4px 28px;box-shadow:0 6px 0 color-mix(in srgb,var(--lamp) 55%,#000);animation:al-pop .45s cubic-bezier(.2,.9,.3,1.3) both}
.pl-end > p{font-weight:700;color:var(--muted)}
@media (max-width:560px){
  .pl-result{flex-wrap:wrap}
  .pl-result .btn.big{width:100%}
  .pl-result strong{font-size:26px}
}
@media (max-width:420px){
  .pl-top{gap:8px}
  .pl-top .pl-tag{font-size:11.5px;padding:3px 8px}
  .pl-top .pl-count{font-size:13px}
  .pl-top .pl-score{font-size:17px}
  .pl-top .pl-wide{display:none}
}
@media (max-width:380px){.pl-top .pl-tag{display:none}}

/* ---------- Chispas al acertar ---------- */
.spark{position:fixed;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;z-index:160;animation:al-spark .85s cubic-bezier(.15,.7,.3,1) forwards}
.spark:nth-child(3n){width:7px;height:7px;border-radius:2px}

/* ---------- Imagen de la pregunta con su crédito ---------- */
.qimg{margin:0;display:grid;justify-items:center;gap:4px;max-width:100%}
.qimg img{display:block;max-height:280px;width:auto;max-width:100%;border-radius:12px}
.qimg figcaption{font-size:11.5px;line-height:1.3;color:var(--muted);max-width:60ch;text-align:center;overflow-wrap:anywhere}
.qimg.sm img{max-height:150px}
/* «rm -r», «ls -la»: el guion no parte la palabra */
.nobr{white-space:nowrap}

/* ---------- Móvil ---------- */
/* Nada se sale por los lados */
.stu .s-main{grid-template-columns:minmax(0,1fr)}
/* En pantallas estrechas se quita la palabra «Repasópolis» de arriba para que quepa el nombre del alumno */
@media (max-width:420px){.stu .s-top:has(.s-me) .brand span{display:none}.stu .s-me span{max-width:46vw}}
@media (max-width:560px){
  .stu .s-card{padding:22px 18px}
  .aved-prev{grid-template-columns:auto auto;justify-content:center;align-items:center;gap:14px}
  .aved-prev > svg{width:120px;height:120px}
  .stu .s-result{padding:20px 16px 22px;gap:8px}
  .s-res-av{width:118px;height:118px}
  .s-res-av svg.av{width:100px;height:100px}
}
@media (max-width:420px){
  .aved .tabs.five{display:flex;flex-wrap:wrap}
  .aved .tabs.five button{flex:1 1 auto;hyphens:none;overflow-wrap:normal;padding:8px 10px;font-size:13px}
}
/* Móvil bajito (320 × 640): la pregunta y sus opciones caben sin tanto desplazamiento */
@media (max-width:560px) and (max-height:720px){
  .stu.q .s-main{gap:10px}
  :is(.stu,.player) .pl-q{padding:14px 14px}
  :is(.stu,.player) .pl-q h2{font-size:20px}
  .stu.q .tile,.player .tile{min-height:58px}
  .stu.q .tiles,.player .tiles{gap:14px}
}
@media (max-width:360px){
  .s-qhead{flex-wrap:nowrap;gap:6px}
  .s-qhead > span:first-child,.s-qhead .pl-kind{font-size:12.5px;padding:3px 9px;white-space:nowrap}
  .stu .codein.sm{font-size:32px;letter-spacing:.16em;padding-left:calc(6px + .16em)}
  .s-pts b{font-size:34px}
  :is(.stu,.player) .pl-secs{min-width:46px;height:46px;font-size:21px}
}
/* Móvil en horizontal: la cuenta atrás y la presentación ocupan menos alto */
@media (max-height:500px) and (orientation:landscape){
  .s-ready{gap:8px}
  .s-ready .ready-count{width:84px;height:84px}
  .s-ready .ready-count span{font-size:54px}
  .s-intro{gap:8px;padding-top:4px}
  .s-intro .intro-me > svg{width:80px;height:80px}
  .stu .s-center{padding-top:8px}
  .s-city{height:70px}
}

/* ---------- Animaciones ---------- */
@keyframes al-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes al-pop{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:none}}
@keyframes al-build{0%{transform:scaleY(0)}100%{transform:none}}
@keyframes al-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes al-countpop{0%{opacity:0;transform:scale(2.2)}55%{opacity:1;transform:scale(.92)}100%{transform:scale(1)}}
@keyframes al-ring{0%{opacity:.6;transform:scale(.9)}100%{opacity:0;transform:scale(1.3)}}
@keyframes al-pressed{0%{transform:scale(1)}35%{transform:scale(1.45) rotate(-10deg)}70%{transform:scale(.9) rotate(4deg)}100%{transform:scale(1)}}
@keyframes al-spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.3)}}
@keyframes al-flicker{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.15) rotate(4deg)}}
@keyframes al-climb{0%{opacity:0;transform:translateY(18px) scale(.8)}60%{opacity:1;transform:translateY(-6px) scale(1.12)}100%{transform:none}}
@keyframes al-rayin{from{opacity:0;transform:rotate(-25deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes al-blink{from{opacity:1}to{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .spark{display:none}
  .s-intro .intro-bar i{transform:scaleX(.5)}
}

/* ===== Botones de respuesta «arcade» (toda la web: móvil del alumno, tareas, «Ver como alumno» y proyector) =====
   Cada opción es un botón gordo de su color, con el borde de abajo más oscuro que se hunde al pulsarlo.
   El proyector solo cambia los tamaños (proyector.css). */
:root{--card-edge:#C9D4E6; --card-edge-2:#B4C1D8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--card-edge:#090C22; --card-edge-2:#05071A}}
:root[data-theme="dark"]{--card-edge:#090C22; --card-edge-2:#05071A}

/* ---------- Opciones (elegir, varias correctas, verdadero o falso) ---------- */
.tiles{gap:18px 14px}
.tile[data-c="a"]{--tc:var(--a)}.tile[data-c="b"]{--tc:var(--b)}.tile[data-c="c"]{--tc:var(--c)}
.tile[data-c="d"]{--tc:var(--d)}.tile[data-c="e"]{--tc:var(--e)}.tile[data-c="f"]{--tc:var(--f)}
.tile{
  --tc:var(--b); --edge:color-mix(in srgb,var(--tc) 66%,#000); --lift:6px;
  background:var(--tc); border:0; border-radius:18px; padding:14px 16px 14px 14px; min-height:80px; gap:14px;
  font-family:var(--f-display); font-weight:700; font-size:21px; line-height:1.15; letter-spacing:.005em;
  box-shadow:0 var(--lift) 0 var(--edge); text-shadow:0 1px 1px rgba(0,0,0,.18);
  transition:transform .08s ease-out,box-shadow .08s ease-out,opacity .25s,filter .25s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.tile[data-c="c"]{text-shadow:none}
.tile:hover:not([disabled]){transform:none;filter:brightness(1.06)}
.tile:active:not([disabled]){transform:translateY(calc(var(--lift) - 2px));box-shadow:0 2px 0 var(--edge)}
.tile:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.tile .tt{overflow-wrap:anywhere}
/* La letra (o V / F): una tecla blanca con la letra del color de la opción */
.tile .tk{width:46px;height:46px;border-radius:13px;background:#fff;color:var(--edge);font-size:27px;font-weight:800;text-shadow:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.13);line-height:1}
/* Casilla de «varias correctas» */
.tile .tm{width:34px;height:34px;border-radius:10px;border:3px solid currentColor;background:rgba(255,255,255,.16);font-size:20px;font-weight:800;text-shadow:none;opacity:.9}
/* Marcada (varias correctas): hundida, con un aro por dentro y la casilla rellena */
.tile.is-sel{outline:0;transform:translateY(calc(var(--lift) - 2px));box-shadow:0 2px 0 var(--edge),inset 0 0 0 4px currentColor}
.tile.is-sel .tm{background:#fff;border-color:#fff;color:var(--edge);opacity:1}
.tile[data-c="c"].is-sel .tm{background:var(--c-ink);border-color:var(--c-ink);color:var(--c)}
/* Corrección: la buena se queda de color con un aro verde; las demás se apagan */
.tile.is-right,.tile.is-wrong{--lift:3px}
.tile.is-right{outline:4px solid var(--ok);outline-offset:4px;opacity:1}
.tile.is-wrong{outline:4px dashed var(--bad);outline-offset:4px;opacity:.85;background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.16) 0 9px,transparent 9px 18px)}
.tile.is-dim{--lift:0px;opacity:.34;filter:saturate(.55)}
.tile .badge{font-family:var(--f-body);font-size:13px;font-weight:800;background:#fff;color:#14203a;border-radius:999px;padding:3px 10px;text-shadow:none;white-space:nowrap}
.tile.is-right .badge{color:#0B6B4C}
.tile.is-right .badge::before{content:"✓ "}
.tile.is-wrong .badge{color:#B02A2A}
.tile.is-wrong .badge::before{content:"✗ "}
.tile .tok{width:44px;height:44px;box-shadow:0 3px 0 rgba(0,0,0,.18)}
/* Cuántos la han elegido (proyector) */
.tile .tcount .tbar{background:rgba(255,255,255,.2)}
.tile .tnum{font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.tile[data-c="c"] .tnum{text-shadow:none}

/* Verdadero o falso: dos botones grandes, uno al lado del otro, también en el móvil */
.tiles.tf:not(.onhost){grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles.tf:not(.onhost) .tile{flex-direction:column;justify-content:center;text-align:center;gap:10px;min-height:132px;font-size:24px;font-weight:800;padding:16px 10px}
.tiles.tf:not(.onhost) .tile .tk{width:58px;height:58px;font-size:34px;border-radius:16px}
.tiles.tf:not(.onhost) .tile .tt{flex:none}
.tiles.tf:not(.onhost) .tile .badge{position:absolute;top:8px;right:8px}

/* ---------- Rellenar huecos ---------- */
.gappara{border:0;border-radius:20px;box-shadow:0 5px 0 var(--card-edge);line-height:2.5;font-size:20px}
.slot{min-width:96px;min-height:42px;border:2.5px dashed color-mix(in srgb,var(--b) 50%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--b) 7%,var(--surface));padding:0 12px;margin:0 3px;font-family:var(--f-display);font-weight:700;font-size:.95em;line-height:1.6;vertical-align:middle;color:var(--ink);transition:transform .08s,box-shadow .08s}
.slot:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.slot.has{border:0;background:var(--b);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--b) 62%,#000);padding:2px 14px;animation:bt-drop .22s cubic-bezier(.2,.9,.3,1.3)}
.slot.is-sel,.slot.drop{border-style:solid;border-color:var(--focus);background:var(--focus-soft);box-shadow:0 0 0 4px var(--focus-soft)}
.slot.is-right{border:0;background:var(--ok);color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--ok) 60%,#000)}
.slot.is-wrong{border:2.5px solid var(--bad);background:var(--bad-soft);color:var(--bad)}
.slot.onhost{border-style:dashed}
.fix{font-family:var(--f-display);font-weight:800;border-radius:8px;padding:1px 8px}
.bank{gap:12px 10px;min-height:52px}
.wchip{--wc:var(--b);border:0;background:var(--wc);color:#fff;border-radius:14px;padding:10px 18px;font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.2;box-shadow:0 5px 0 color-mix(in srgb,var(--wc) 64%,#000);text-shadow:0 1px 1px rgba(0,0,0,.18);transition:transform .08s,box-shadow .08s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.wchip:nth-child(6n+1){--wc:var(--b)}.wchip:nth-child(6n+2){--wc:var(--e)}.wchip:nth-child(6n+3){--wc:var(--d)}
.wchip:nth-child(6n+4){--wc:var(--a)}.wchip:nth-child(6n+5){--wc:var(--f)}.wchip:nth-child(6n){--wc:var(--c);color:var(--c-ink);text-shadow:none}
.wchip:hover:not([disabled]){border:0;filter:brightness(1.07)}
.wchip:active:not([disabled]){transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--wc) 64%,#000)}
.wchip:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- Ordenar ---------- */
.pl-ord{gap:12px}
.pl-ord li{border:0;border-radius:16px;background:var(--surface);box-shadow:0 5px 0 var(--card-edge);padding:9px 10px 9px 10px;font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1.2;gap:10px}
.pl-ord .onum2{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);font-size:22px}
.pl-ord .grip{letter-spacing:-3px;font-size:18px}
.pl-ord li.drop{box-shadow:0 5px 0 var(--focus),inset 0 0 0 3px var(--focus)}
.pl-ord li.is-right{background:var(--ok-soft);box-shadow:0 4px 0 var(--ok),inset 0 0 0 2.5px var(--ok)}
.pl-ord li.is-right .onum2{background:var(--ok);color:#fff}
.pl-ord li.is-wrong{background:var(--bad-soft);box-shadow:0 4px 0 var(--bad),inset 0 0 0 2.5px var(--bad)}
.pl-ord li.is-wrong .onum2{background:var(--bad);color:#fff}
.pl-ord .iconbtn{width:44px;height:44px;border-radius:12px;background:var(--surface-2);color:var(--ink);font-size:20px;font-weight:800;box-shadow:0 3px 0 var(--card-edge-2);transition:transform .08s,box-shadow .08s}
.pl-ord .iconbtn:hover:not([disabled]){background:color-mix(in srgb,var(--e) 14%,var(--surface-2))}
.pl-ord .iconbtn:active:not([disabled]){transform:translateY(2px);box-shadow:0 1px 0 var(--card-edge-2)}
.pl-ord .iconbtn[disabled]{box-shadow:none;opacity:.3}

/* ---------- Unir parejas ---------- */
.pl-match{gap:12px 22px}
.mcol{gap:14px}
.mitem{border:0;border-radius:16px;background:var(--surface);box-shadow:0 5px 0 var(--card-edge);padding:12px 14px;min-height:58px;font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.2;transition:transform .08s,box-shadow .08s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mitem .mdot{width:18px;height:18px;border:3px solid var(--card-edge-2)}
.mitem .mt{overflow-wrap:anywhere}
.mitem:active:not([disabled]){transform:translateY(3px);box-shadow:0 2px 0 var(--card-edge)}
.mitem.linked{border:0;background:color-mix(in srgb,var(--mc) 15%,var(--surface));box-shadow:0 5px 0 var(--mc),inset 0 0 0 3px var(--mc)}
.mitem.is-sel{transform:translateY(3px);box-shadow:0 2px 0 var(--ink),inset 0 0 0 3px var(--ink)}
.mitem.is-right{background:var(--ok-soft);box-shadow:0 4px 0 var(--ok),inset 0 0 0 3px var(--ok)}
.mitem.is-wrong{background:var(--bad-soft);box-shadow:0 4px 0 var(--bad),inset 0 0 0 3px var(--bad)}
.mitem small{font-family:var(--f-body)}

@keyframes bt-drop{0%{transform:translateY(-8px) scale(.9)}100%{transform:none}}

/* Móvil: una columna, textos grandes (letra de 20 px en negrita: se lee bien sobre el color) */
@media (max-width:560px){
  .tiles{gap:16px}
  .tile{min-height:68px;font-size:20px;padding:12px 14px 12px 12px;border-radius:16px}
  .tile .tk{width:42px;height:42px;font-size:24px}
  .tiles.tf:not(.onhost){gap:14px}
  .tiles.tf:not(.onhost) .tile{min-height:156px;font-size:23px}
  .pl-ord li{font-size:18px}
  .mitem{font-size:16px;padding:10px 10px;min-height:54px}
  .pl-match{gap:10px 12px}
  .gappara{font-size:18px;padding:16px 16px}
  .wchip{font-size:18px;padding:9px 15px}
}
@media (prefers-reduced-motion:reduce){.tile,.wchip,.mitem,.slot{transition:none}}

/* Editor: tarjeta «Presentación», buscador de imágenes. Usa las variables de :root (claro y oscuro). */

/* ---------- Inicio: solo la estructura de la foto de portada y los recortes de texto (los estilos nuevos del inicio no los definen) ---------- */
.qcard.has-cover{grid-template-rows:auto auto 1fr auto}
.qcover{height:128px;overflow:hidden;cursor:pointer;background:var(--surface-2);position:relative}
.qcover img{width:100%;height:100%;object-fit:cover;display:block}
.qcard-desc{font-size:14px;color:var(--ink);opacity:.85;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.qcard-main h3{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.qcard-foot .ago{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------- Editor: lista lateral ---------- */
.qitem{transition:border-color .15s,background .15s}
.qitem.on{box-shadow:inset 3px 0 0 var(--brand)}
.prescard{width:100%;text-align:left;display:grid;gap:4px;padding:12px 13px;border-radius:14px;border:1.5px solid var(--line);background:linear-gradient(135deg,var(--stage),var(--stage-2));color:var(--stage-ink);position:relative;overflow:hidden;transition:transform .12s,border-color .15s,box-shadow .15s}
.prescard::before{content:"";position:absolute;right:-30px;bottom:-34px;width:84px;height:84px;border-radius:24px;background:conic-gradient(var(--a) 0 25%,var(--b) 0 50%,var(--c) 0 75%,var(--d) 0);opacity:.22;transform:rotate(18deg)}
.prescard:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.prescard.on{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent)}
.prescard-top{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.prescard-ico{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--brand);color:var(--brand-ink)}
.prescard-n{margin-left:auto;position:relative;z-index:1;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;background:rgba(255,255,255,.14);padding:1px 8px;border-radius:999px}
.prescard-title{font-family:var(--f-display);font-size:18px;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;position:relative}
.prescard-desc{font-size:13px;opacity:.85;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prescard-desc.muted{color:inherit;opacity:.6}
.prescard-hint{font-size:12px;opacity:.7;line-height:1.3;margin-top:2px}

/* ---------- Editor: panel de la presentación ---------- */
.pres-badge{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.pres-intro{color:var(--muted);max-width:62ch}
.pres-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:start}
.pp-stage{border-radius:18px;background:radial-gradient(120% 90% at 50% 0%,var(--stage-2),var(--stage));color:var(--stage-ink);padding:22px 18px 16px;display:grid;gap:14px;box-shadow:var(--shadow);aspect-ratio:16/10;align-content:center;overflow:hidden}
.pp-card{display:grid;justify-items:center;text-align:center;gap:8px}
.pp-cover{max-height:110px;max-width:70%;border-radius:12px;object-fit:cover;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.pp-art{display:flex;gap:6px}
.pp-art span{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--tc);color:#fff;animation:pp-pop .5s both;animation-delay:var(--d)}
@keyframes pp-pop{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.pp-kicker{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.pp-title{font-size:26px;font-weight:800;line-height:1.1;max-width:22ch;overflow-wrap:anywhere}
.pp-desc{font-size:14px;opacity:.85;max-width:44ch;overflow-wrap:anywhere}
.pp-facts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;font-size:12px}
.pp-facts span{background:rgba(255,255,255,.12);padding:3px 10px;border-radius:999px}
.pp-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.pp-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--a),var(--c),var(--d),var(--b));transform-origin:left;animation:pp-bar 5s linear infinite}
@keyframes pp-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Editor: imagen de la pregunta ---------- */
.edimg{margin:0;display:grid;gap:6px;max-width:100%}
.edimg img{max-height:220px;width:auto;max-width:100%;border-radius:12px;border:1px solid var(--line);background:var(--surface-2)}
.imgcredit{font-size:12px;color:var(--muted);max-width:52ch}
.imgcredit a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.imgrow .imgfind{border-style:dashed}

/* ---------- Buscar imagen ---------- */
.imgsearch{display:grid;gap:14px}
.is-form{display:flex;gap:8px}
.is-form .input{flex:1}
.is-res{min-height:120px}
.is-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:56vh;overflow:auto;padding:2px}
.is-opt{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:6px;display:grid;gap:5px;text-align:left;font-size:12px;color:var(--muted);transition:border-color .15s,transform .12s}
.is-opt:hover{border-color:var(--focus);transform:translateY(-1px)}
.is-opt img{width:100%;height:112px;object-fit:cover;border-radius:8px;background:var(--bg)}
.is-opt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.is-skel{height:140px;border-radius:12px;background:linear-gradient(90deg,var(--surface-2),var(--bg),var(--surface-2));background-size:200% 100%;animation:is-sh 1.2s linear infinite}
@keyframes is-sh{from{background-position:200% 0}to{background-position:-200% 0}}

@media (max-width:900px){
  .pres-grid{grid-template-columns:minmax(0,1fr)}
  .prescard-hint{display:none}
}
@media (max-width:520px){
  .is-form{flex-wrap:wrap}
  .is-form .btn{width:100%}
  .is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-title{font-size:21px}
}

/* Contraste (modo claro): el verde y el ámbar de :root se quedan cortos como texto pequeño sobre blanco o sobre su fondo suave. */
/* (también las pastillas de resultados y tareas, y la opción correcta en las estadísticas) */
:root{--ok-text:#0B6E50;--warn-text:#7E5200;--bad-text:#B02A2A;--ok-fill:#0E7A59;--bad-fill:var(--bad);--bad-fill-ink:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ok-text:var(--ok);--warn-text:var(--warn);--bad-text:var(--bad);--bad-fill:#C93636}}
:root[data-theme="dark"]{--ok-text:var(--ok);--warn-text:var(--warn);--bad-text:var(--bad);--bad-fill:#C93636}
.savestate{color:var(--ok-text)}
.probs.good{color:var(--ok-text)}
.probs.bad strong{color:var(--warn-text)}
.okbtn.on{background:var(--ok-fill);border-color:var(--ok-fill)}
.okbtn.on .box{color:var(--ok-fill)}
.match-ed .link{color:color-mix(in srgb,var(--f) 70%,var(--ink))}
.btn.danger-fill{background:var(--bad-fill);border-color:var(--bad-fill);color:var(--bad-fill-ink)}
.onum{background:color-mix(in srgb,var(--e) 88%,#000)}
.aibar-l{color:color-mix(in srgb,var(--e) 80%,var(--ink))}
/* Emparejar en el móvil: cada pareja en dos líneas (en una sola no cabía el texto y se veía cortado). */
@media (max-width:560px){
  .match-ed li{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"l l x" "k r x";row-gap:0}
  .match-ed li>.mside:first-child{grid-area:l}
  .match-ed li>.link{grid-area:k;padding-left:8px}
  .match-ed li>.mside:nth-child(3){grid-area:r}
  .match-ed li>.iconbtn{grid-area:x}
}
/* Móvil: la barra del editor ocupa cinco líneas; fija tapaba un tercio de la pantalla al escribir. */
@media (max-width:700px){
  .topbar.ed,body[data-route="teacher"] .topbar.gut{position:static}
  .topbar.ed .ed-actions .btn{padding-inline:12px}
}
.pill.ok{color:var(--ok-text)} .pill.bad{color:var(--bad-text)} .pill.mid{color:var(--warn-text)}
.orow.ok .otext{color:var(--ok-text)}
.pill.live{background:color-mix(in srgb,var(--b) 85%,#000)} .pill.task{background:color-mix(in srgb,var(--e) 85%,#000)}
/* Resultados en el móvil: las cifras de dos en dos (una debajo de otra ocupaban casi dos pantallas). */
@media (max-width:560px){
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpis div{padding:10px 12px}
  .kpis b{font-size:24px}
  .kpis div:nth-child(4){grid-column:1/-1}
}
.seg.diff button.on[data-v="facil"]{background:var(--ok-fill);border-color:var(--ok-fill)}
/* Ficha de un alumno en Resultados: marcas legibles (blanco sobre gris o ámbar no se leía). */
.s-sum.wide li.none .mk,.s-sum.wide li.mid .mk{color:#1d2240}
.s-sum.wide li.ok .mk{background:var(--ok-fill)}
.s-sum.wide li.bad .mk{background:color-mix(in srgb,var(--bad) 85%,#000)}

/* ===== Revisión 5 ===== */
/* «Deshacer» junto al estado de guardado */
.undobtn[hidden]{display:none}
.undobtn{white-space:nowrap}
/* Los cuadros de texto del editor crecen con el texto (el alto lo pone el código; aquí solo se evita la barra mientras cabe). */
#qedit textarea{overflow-y:auto;min-height:3.2em}
/* Móvil: el botón de modo oscuro sube a la primera línea, junto a «Mis cuestionarios» (antes quedaba solo en una línea). */
@media (max-width:700px){
  .topbar.ed>*{order:2}
  .topbar.ed>.ed-back{order:0}
  .topbar.ed>.ed-theme{order:1;margin-left:auto}
}
/* Resultados en el móvil: la barra de acierto va debajo del enunciado (al lado dejaba tres palabras por línea). */
@media (max-width:560px){
  .qstat summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px}
  .qstat .qsbar{grid-column:2;width:100%}
  .qsbar b{min-width:52px;font-size:18px}
  .qsdetail{padding-left:14px}
}

/* ===== Revisión 7: el editor como una herramienta creativa ===== */
/* Cada tipo de pregunta tiene su color (el mismo en la lista, el panel, el menú de tipos y el asistente de IA). */
.qedit[data-type="single"]{--tc:var(--b)} .qedit[data-type="multi"]{--tc:var(--d)} .qedit[data-type="tf"]{--tc:var(--a)}
.qedit[data-type="gaps"]{--tc:var(--c)} .qedit[data-type="order"]{--tc:var(--e)} .qedit[data-type="match"]{--tc:var(--f)}
.qedit[data-type="pres"],.qedit[data-type=""]{--tc:var(--b)}
.qedit,.qitem,.typechoice,.tcheck,.revitem,.gitem{--tc-text:color-mix(in srgb,var(--tc,var(--b)) 60%,var(--ink));--tc-soft:color-mix(in srgb,var(--tc,var(--b)) 9%,var(--surface));--tc-line:color-mix(in srgb,var(--tc,var(--b)) 34%,var(--line))}
.qedit[data-type="gaps"]{--tc-on:var(--c-ink)}
:root{--lamp-ring:#E0A800}

/* Etiquetas en minúsculas y con más peso (antes MAYÚSCULAS espaciadas) */
.qedit .lbl,.qedit .field>label,.qlist .lbl,.gen .lbl,.gen .field>label,#setform .lbl,#setform .field>label{text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:700;color:var(--ink)}
.qedit .lbl,.qedit .field>label{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.qedit .lbl svg{color:var(--muted)}
.lbl-hint{font-weight:400;color:var(--muted);font-size:13.5px}

/* Barra de arriba */
.topbar.ed .title-in{font-size:22px;font-weight:800}
.savestate{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:13px}
.savestate::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.savestate.busy{color:var(--muted)}
.savestate.busy::before{background:var(--muted);animation:ed-blink 1s ease-in-out infinite}
.savestate.bad{color:var(--bad-text,var(--bad))}.savestate.bad::before{background:var(--bad)}
@keyframes ed-blink{50%{opacity:.25}}
.topbar.ed .btn.primary{box-shadow:0 4px 0 color-mix(in srgb,var(--brand) 62%,#000);margin-bottom:4px;margin-top:-4px;transition:transform .08s,box-shadow .08s,filter .15s}
.topbar.ed .btn.primary:active:not([disabled]){transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--brand) 62%,#000)}
.topbar.ed .btn.primary[disabled]{box-shadow:none}

/* Lista de preguntas: la ciudad del cuestionario arriba y cada pregunta con su color */
.qlist{background:var(--surface)}
.qlist-head .lbl{font-size:15px;font-family:var(--f-display);font-weight:800}
.qcity{display:flex;align-items:flex-end;gap:2px;height:44px;padding:0 6px;border-bottom:3px solid var(--line);margin:-2px 0 2px}
.qcity i{flex:1 1 0;min-width:2px;max-width:24px;height:var(--h);border-radius:4px 4px 0 0;background-color:color-mix(in srgb,var(--tc) 45%,var(--surface));
  background-image:conic-gradient(from 270deg at 3px 4px,rgba(255,255,255,.55) 25%,transparent 0);background-size:6px 7px;background-position:2px 4px;transition:background-color .2s}
.qcity i.on{background-color:var(--tc);background-image:conic-gradient(from 270deg at 3px 4px,var(--lamp) 25%,transparent 0)}
.qitem{transition:border-color .15s,background .15s}
.qitem .qnum{width:30px;height:30px;border-radius:9px 9px 3px 3px;display:grid;place-items:center;text-align:center;font-size:16px;line-height:1;background:var(--tc-soft);color:var(--tc-text);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--tc) 30%,transparent)}
.qitem.on{border-color:var(--tc);background:var(--tc-soft);box-shadow:none}
.qitem.on .qnum{background:var(--tc);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.qitem.on[style*="--c)"] .qnum{color:var(--c-ink)}
.qitem-btn{padding:9px 10px 9px 8px}
.qlist .add{justify-content:flex-start;padding-inline:14px}

/* Tarjeta «Presentación»: la ciudad de noche, con una ventana encendida por cada pregunta */
.prescard{background:var(--night);border-color:rgba(255,255,255,.14);padding-bottom:0;gap:5px}
.prescard::before{display:none}
.prescard:hover{border-color:color-mix(in srgb,var(--lamp) 40%,transparent)}
.prescard.on{border-color:var(--night);box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--lamp-ring)}
.prescard-top{text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:700;opacity:1;color:#E6E9FF}
.prescard-ico{background:var(--lamp);color:var(--night)}
.prescard-n{background:rgba(255,255,255,.12);color:#fff}
.prescard-hint{color:#C8CEF0;opacity:1}
.prescard-city{height:38px;width:calc(100% + 26px);margin:4px -13px 0}

/* Panel de la pregunta */
.qedit{gap:18px;container-type:inline-size}
.qhead-l h2{font-size:28px}
.qhead-l h2 .muted{font-weight:600}
.typebtn{background:var(--tc-soft);border-color:var(--tc-line);padding:5px 6px 5px 6px;gap:9px;transition:border-color .15s,background .15s}
.typebtn:hover{border-color:var(--tc)}
.typebtn .tico{width:28px;height:28px}
.qedit[data-type="gaps"] .typebtn .tico{color:var(--c-ink)}
.typebtn small{margin-left:2px;background:var(--surface);color:var(--ink);border-radius:999px;padding:3px 10px;font-size:12.5px}

/* Ayuda de la IA */
.aibar{background:color-mix(in srgb,var(--e) 6%,var(--surface));border:1.5px solid color-mix(in srgb,var(--e) 22%,var(--line));padding:8px 10px;gap:8px}
.aibar-l{gap:7px}
.aibar-l svg{width:26px;height:26px;padding:5px;border-radius:8px;background:var(--e);color:#fff}
.aibar .btn.sm{background:var(--surface)}
.aibar .btn.sm:hover{border-color:color-mix(in srgb,var(--e) 50%,var(--line));background:color-mix(in srgb,var(--e) 8%,var(--surface))}
.aibar .hint{font-size:13px}

/* Tiempo y dificultad */
.seg button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;transition:background .12s,border-color .12s}
.qedit .seg:not(.diff) button.on{background:var(--tc);border-color:var(--tc);color:#fff}
.qedit[data-type="gaps"] .seg:not(.diff) button.on{color:var(--c-ink)}
.dlv{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.dlv b{width:4px;border-radius:1.5px 1.5px 0 0;background:currentColor;opacity:.28}
.dlv b:nth-child(1){height:5px}.dlv b:nth-child(2){height:8.5px}.dlv b:nth-child(3){height:12px}
.dlv.l1 b:nth-child(1),.dlv.l2 b:nth-child(-n+2),.dlv.l3 b{opacity:1}

/* Enunciado e imagen: como la pantalla que verá el alumno */
.qstage{display:grid;gap:14px;padding:16px;border-radius:20px;background:var(--tc-soft);border:1.5px solid var(--tc-line)}
.qstage-ico{width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;background:var(--tc);color:#fff}
.qedit[data-type="gaps"] .qstage-ico{color:var(--c-ink)}
.qstage .qtextarea{font-size:23px;font-weight:700;text-align:center;padding:16px 18px;border-color:transparent;border-radius:14px;box-shadow:0 2px 0 var(--tc-line)}
.qstage .qtextarea:focus{border-color:var(--focus)}
.qstage .imgzone,.qstage .imgfind,.qstage .imgrow .btn{background:var(--surface)}
.qstage .imgbox{justify-content:center}
.qstage .edimg{justify-items:center}

/* Opciones: fichas de colores como las del alumno (vacías, solo con el borde de su color) */
.opt-row{--tile:var(--a);background:var(--tile);border:0;border-radius:14px;padding:6px 8px 6px 6px;margin-bottom:4px;color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--tile) 62%,#000);transition:background .15s,box-shadow .15s}
.opt-row[data-c="b"]{--tile:var(--b)}.opt-row[data-c="c"]{--tile:var(--c)}.opt-row[data-c="d"]{--tile:var(--d)}.opt-row[data-c="e"]{--tile:var(--e)}.opt-row[data-c="f"]{--tile:var(--f)}
.opt-row[data-c="c"]{color:var(--c-ink)}
.opt-row.is-ok{background:var(--tile);border-color:transparent;outline:3px solid var(--ok-fill);outline-offset:3px}
.opt-row .letter{background:rgba(0,0,0,.16);color:inherit;text-shadow:none}
.opt-row .input{color:inherit;font-family:var(--f-display);font-size:19px;font-weight:700;padding:8px 6px}
.opt-row .input::placeholder{color:currentColor;opacity:.7}
.opt-row:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.opt-row .okbtn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);color:inherit}
.opt-row[data-c="c"] .okbtn{background:rgba(255,255,255,.3);border-color:rgba(42,30,0,.45)}
.opt-row .okbtn:hover{background:rgba(255,255,255,.3)}
.opt-row .okbtn.on,.opt-row[data-c="c"] .okbtn.on{background:#fff;border-color:#fff;color:var(--ok-fill)}
.opt-row .okbtn.on .box{background:var(--ok-fill);border-color:var(--ok-fill);color:#fff}
.opt-row .iconbtn{color:inherit;opacity:.85}
.opt-row .iconbtn:hover{background:rgba(255,255,255,.2);color:inherit;opacity:1}
.opt-row .iconbtn[disabled]{opacity:.35}
/* Opción todavía vacía */
.opt-row:has(.input:placeholder-shown){background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--tile) 45%,var(--line))}
.opt-row:has(.input:placeholder-shown) .letter{background:var(--tile);color:var(--tile-ink)}
.opt-row[data-c="c"]:has(.input:placeholder-shown) .letter{color:var(--c-ink)}
.opt-row:has(.input:placeholder-shown) .input{font-family:var(--f-body);font-weight:400;font-size:16px}
.opt-row:has(.input:placeholder-shown) .input::placeholder{color:var(--muted);opacity:1}
.opt-row:has(.input:placeholder-shown) .okbtn{background:var(--surface);border-color:var(--line);color:var(--muted)}
.opt-row:has(.input:placeholder-shown) .iconbtn{color:var(--muted)}
@container (min-width:700px){.qedit .opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}}

/* Verdadero o falso: dos fichas grandes, la correcta con su marca */
.tfpick{gap:14px}
.tfpick button{--tile:var(--d);border:0;border-radius:16px;padding:14px 16px;min-height:80px;justify-content:flex-start;gap:14px;font-size:24px;background:var(--tile);color:#fff;box-shadow:0 5px 0 color-mix(in srgb,var(--tile) 62%,#000);transition:transform .08s,box-shadow .08s}
.tfpick button[data-v="false"]{--tile:var(--a)}
.tfpick button.on[data-v="true"],.tfpick button.on[data-v="false"]{background:var(--tile);border-color:transparent;outline:3px solid var(--ok-fill);outline-offset:3px}
.tfpick button:not(.on){background:var(--surface);color:color-mix(in srgb,var(--tile) 70%,var(--ink));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--tile) 40%,var(--line))}
.tfpick button:not(.on):hover{box-shadow:inset 0 0 0 2px var(--tile)}
.tfpick button:active{transform:translateY(3px)}
.tfpick .tk{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(0,0,0,.16);font-size:22px}
.tfpick button:not(.on) .tk{background:var(--tile);color:#fff}
.tfpick .tt{flex:1;text-align:left}
.tfok{display:inline-flex;align-items:center;gap:5px;background:#fff;color:var(--ok-fill);border-radius:999px;padding:4px 11px;font-family:var(--f-body);font-size:13px;font-weight:800}

/* Rellenar huecos: la vista previa como la tarjeta del alumno */
.gapprev{border-radius:16px;border:1.5px solid var(--tc-line);box-shadow:0 2px 0 var(--tc-line);font-size:18px}
.gpill{background:var(--c);color:var(--c-ink);border-bottom:0;border-radius:8px;box-shadow:0 3px 0 color-mix(in srgb,var(--c) 60%,#000);padding:0 12px;margin:0 2px}
.bankprev span{background:var(--surface-2);border-color:transparent}
.bankprev span.hint{background:none}
.bankprev span.trap{background:transparent;border-color:var(--line)}

/* Ordenar: cada elemento es una planta del edificio */
.order-ed li{background:color-mix(in srgb,var(--e) 6%,var(--surface));border-color:color-mix(in srgb,var(--e) 26%,var(--line))}
.order-ed li:focus-within,.match-ed li:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}
.onum{border-radius:9px 9px 3px 3px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
.order-ed .input,.match-ed .input{font-weight:700}

/* Emparejar: dos fichas unidas */
.match-ed li{background:color-mix(in srgb,var(--f) 6%,var(--surface));border-color:color-mix(in srgb,var(--f) 26%,var(--line));gap:4px}
.match-ed .mside{background:var(--surface);border-radius:10px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--f) 22%,var(--line))}
.match-ed .link{width:34px;height:34px;display:grid;place-items:center}
.match-ed .link i{position:relative;width:22px;height:3px;border-radius:2px;background:var(--f)}
.match-ed .link i::before,.match-ed .link i::after{content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--f);transform:translateY(-50%)}
.match-ed .link i::before{left:-4px}.match-ed .link i::after{right:-4px}

/* Estado de la pregunta */
.probs.good{display:flex;align-items:center;gap:8px;padding:10px 14px}

/* Menú «Añadir / Cambiar el tipo»: cada tipo con su color y un dibujo de cómo lo ve el alumno */
.typegrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.typechoice{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;border-radius:16px;padding:12px;transition:border-color .15s,box-shadow .15s,background .15s}
.typechoice:hover{border-color:var(--tc);box-shadow:0 4px 0 var(--tc-line)}
.typechoice.cur{border-color:var(--tc);background:var(--tc-soft)}
.typechoice[data-v="gaps"] .tico{color:var(--c-ink)}
.tcur{position:absolute;top:18px;right:18px;font-style:normal;font-size:12px;font-weight:800;background:var(--surface);color:var(--ink);border-radius:999px;padding:2px 9px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tsample{grid-column:1/-1;order:-1;height:62px;border-radius:11px;background:var(--tc-soft);display:flex;align-items:center;justify-content:center;gap:4px;padding:8px}
.tsample i{display:block;border-radius:4px}
.ts-single,.ts-multi{display:grid;align-items:stretch;grid-template-columns:repeat(2,34px);grid-auto-rows:19px;gap:4px;align-content:center}
.ts-single i.ok,.ts-multi i.ok,.ts-tf i.ok{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ok-fill)}
.ts-tf i{width:44px;height:36px;border-radius:7px}
.ts-tf i+i{margin-left:6px}
.ts-gaps{flex-wrap:wrap;align-content:center;padding-inline:18%}
.ts-gaps u{height:6px;width:30px;border-radius:3px;background:color-mix(in srgb,var(--ink) 25%,transparent)}
.ts-gaps s{height:13px;width:24px;border-radius:4px;background:var(--c);box-shadow:0 2px 0 color-mix(in srgb,var(--c) 60%,#000)}
.ts-order{flex-direction:column;gap:3px}
.ts-order i{height:13px;width:76px;background:var(--e);color:#fff;font-size:10px;font-weight:800;line-height:13px;padding-left:5px;font-style:normal}
.ts-order i:nth-child(2){width:62px}.ts-order i:nth-child(3){width:48px}
.ts-match{display:grid;align-items:stretch;grid-template-columns:30px 22px 30px;grid-auto-rows:16px;gap:6px 2px;align-content:center}
.ts-match i{border:2px solid var(--f);background:var(--surface)}
.ts-match b{align-self:center;height:3px;border-radius:2px;background:var(--f)}

/* Ajustes del cuestionario */
#setform .stack{gap:14px}

/* ---------- Asistente «Crear con IA» ---------- */
.gen-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--e);flex:none}
.gen-head h2 .gen-ico svg{color:#fff}
.autoai{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--e) 7%,var(--surface));border:1.5px solid color-mix(in srgb,var(--e) 20%,var(--line));border-radius:12px;padding:10px 14px;color:var(--ink);font-size:14px}
.autoai svg{color:color-mix(in srgb,var(--e) 80%,var(--ink));flex:none;margin-top:2px}
.dropfile{border-width:2px;border-radius:16px}
.dropfile .ico{width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--e) 12%,var(--surface));color:color-mix(in srgb,var(--e) 80%,var(--ink))}
.dropfile:hover .ico,.dropfile.drop .ico{background:var(--e);color:#fff}
.gen-n{display:flex;align-items:center;gap:14px}
.gen-n b{font-family:var(--f-display);font-size:34px;font-weight:800;line-height:1;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.gen-n input{flex:1;accent-color:var(--e);min-width:0}
.typechecks{gap:8px}
.tcheck{border:1.5px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--surface);transition:border-color .12s,background .12s}
.tcheck:has(input:checked){border-color:var(--tc-line);background:var(--tc-soft)}
.tcheck:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.tcheck input{accent-color:var(--tc)}
.tcheck span svg{color:var(--tc-text)}

/* Progreso: la ciudad se construye pregunta a pregunta (de día en claro, de noche en oscuro) */
.gen-stage{--sky1:var(--sky-top);--sky2:var(--sky-bottom);--plot:rgba(22,32,51,.22);--road:#3A4270;position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--sky1),var(--sky2));padding:44px 18px 0;display:grid}
.gen-sun{position:absolute;top:14px;right:22px;width:30px;height:30px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 7px color-mix(in srgb,var(--lamp) 30%,transparent)}
.gen-count{position:absolute;top:12px;left:16px;font-weight:700;color:var(--muted);font-size:14px}
.gen-count b{font-family:var(--f-display);font-size:24px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:2px}
.gen-city{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:104px}
.gb{flex:1 1 0;min-width:4px;max-width:44px;height:var(--h);position:relative;border-radius:5px 5px 0 0;background:var(--tc);transform-origin:50% 100%;transition:opacity .25s,filter .25s}
.gb i{position:absolute;inset:8px 5px 4px;background:conic-gradient(from 270deg at 5px 6px,rgba(255,255,255,.5) 25%,transparent 0) 0 0/9px 10px;transition:opacity .4s}
.gen-city.lit .gb i{background-image:conic-gradient(from 270deg at 5px 6px,var(--lamp) 25%,transparent 0)}
.gen-city .gb:nth-child(3n+2):not(.plot){height:calc(var(--h) * .86)}
.gen-city .gb:nth-child(4n+1):not(.plot)::before{content:"";position:absolute;left:50%;bottom:100%;width:3px;height:12px;margin-left:-1.5px;background:var(--tc)}
.gen-city .gb:nth-child(5n+3):not(.plot)::before{content:"";position:absolute;left:6px;bottom:100%;width:14px;height:8px;border-radius:3px 3px 0 0;background:var(--tc)}
.gb.plot{height:8px;background:transparent;border:2px dashed var(--plot);border-bottom:0;border-radius:4px 4px 0 0}
.gb.up{animation:gb-rise .5s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:var(--dl,0ms)}
.gb.up i{animation:gb-win .5s ease both;animation-delay:calc(var(--dl,0ms) + .35s)}
@keyframes gb-rise{from{transform:scaleY(0)}to{transform:none}}
@keyframes gb-win{from{opacity:0}to{opacity:1}}
.gb.off{opacity:.22;filter:grayscale(1)}
.gen-road{height:12px;border-radius:0;margin:0 -18px;background:var(--road)}
.gen-road span{background:var(--lamp);border-radius:0 6px 6px 0}
.gen-stage.done{padding:12px 18px 0;border-bottom:6px solid var(--road)}
.gen-stage.done .gen-city{height:66px}
.genprog{gap:4px}
#gp-msg{font-weight:700;color:var(--ink)}
.genlist{gap:6px}
.gitem{background:var(--tc-soft);align-items:center}
.gtico{width:24px;height:24px;border-radius:7px;display:grid!important;place-items:center;background:var(--tc);color:#fff;flex:none}
.gitem[style*="--c)"] .gtico{color:var(--c-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gen-stage{--sky1:var(--night);--sky2:var(--night-2);--plot:rgba(255,255,255,.25);--road:#0E1130}
  :root:not([data-theme="light"]) .gen-count{color:#C8CEF0} :root:not([data-theme="light"]) .gen-count b{color:#fff}
  :root:not([data-theme="light"]) .gen-sun{background:#F4F1DE;box-shadow:0 0 0 7px rgba(244,241,222,.12)}}
:root[data-theme="dark"] .gen-stage{--sky1:var(--night);--sky2:var(--night-2);--plot:rgba(255,255,255,.25);--road:#0E1130}
:root[data-theme="dark"] .gen-count{color:#C8CEF0} :root[data-theme="dark"] .gen-count b{color:#fff}
:root[data-theme="dark"] .gen-sun{background:#F4F1DE;box-shadow:0 0 0 7px rgba(244,241,222,.12)}

/* Revisar las preguntas propuestas */
.revitem{border-radius:14px;padding:12px 14px;transition:border-color .15s,background .15s}
.revitem:has(input:checked){border-color:var(--tc-line)}
.revitem:not(:has(input:checked)){background:var(--bg);border-style:dashed}
.revitem:not(:has(input:checked)) strong{text-decoration:line-through;text-decoration-color:var(--muted)}
.revitem:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.revtags{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rtype{background:var(--tc-soft);color:var(--tc-text);border-radius:999px;padding:2px 10px 2px 7px;box-shadow:inset 0 0 0 1px var(--tc-line)}
.rdiff{font-size:12.5px;font-weight:700;color:var(--muted)}
.revbody strong{font-size:15.5px;line-height:1.35}

@media (max-width:900px){
  .qcity{height:32px}
  .qlist ol{padding-top:2px}
}
@media (max-width:560px){
  .qhead-l h2{font-size:24px}
  .qstage{padding:12px;border-radius:16px}
  .qstage .qtextarea{font-size:20px}
  .tfpick button{min-height:66px;font-size:20px;padding:12px;gap:10px}
  .tfpick .tk{width:36px;height:36px}
  .tfok{position:absolute;top:-10px;right:8px;padding:2px 8px;font-size:12px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
  .tfpick button{position:relative}
  .typegrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .typechoice{grid-template-columns:minmax(0,1fr);padding:10px;gap:8px}
  .typechoice .tico{display:none}
  .typechoice span>span{display:none}
  .typechoice strong{font-size:16px}
  .tsample{height:52px}
  .tcur{top:14px;right:14px}
  .gen-stage{padding:40px 12px 0}
  .gen-city{height:84px;gap:3px}
  .gen-road{margin:0 -12px}
}
@media (prefers-reduced-motion:reduce){.gb.up,.gb.up i,.savestate.busy::before{animation:none}}
.pp-kicker{text-transform:none;letter-spacing:0;font-size:14px;color:var(--lamp)}
.pres-badge{font-size:12.5px}
/* Móvil estrecho: los botones largos del asistente («Parar y quedarme con las que haya») pasan a dos líneas en vez de salirse */
.gen .mrow .btn{white-space:normal;text-align:center}
@media (max-width:400px){.dialog.xl{padding:18px 16px}}
@media (max-width:400px){.gen-head h2{font-size:22px}}

/* ===== Proyector: la ciudad de noche =====
   Repasópolis es una ciudad que se enciende cuando la clase acierta. En el proyector es de noche:
   cielo índigo con estrellas, la ciudad abajo (skyline.js) y amarillo de farola para lo importante.
   Este archivo se carga después de styles.css y de botones.css: aquí se ajusta todo lo del proyector. */
.host{
  --h-sky:#0D1030; --h-panel:#252C69; --h-panel-2:#2F3780; --h-line:#3C4597; --h-street:#0A0D26;
  --h-soft:#CDD2F4; --h-dim:#A3ABDB; --lamp-ink:#2A1E00; --lamp-edge:#B88A0E; --h-ok:#13906A; --h-ok-hi:#3BD69B;
  --h-gold:#FFD84D; --h-silver:#D3DAE8; --h-bronze:#E8955E;
  position:relative;isolation:isolate;overflow-x:hidden;color:#fff;
  background:linear-gradient(180deg,var(--h-sky) 0%,var(--night) 60%,#1B2052 100%);
}
body[data-route="teacher"]:has(.host){background:var(--night)}

/* Estrellas (quietas, con un parpadeo muy lento) */
.host::before{content:"";position:fixed;inset:0 0 35% 0;z-index:-2;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 22px 34px,#fff 60%,transparent 61%),
    radial-gradient(1.2px 1.2px at 140px 92px,#fff 60%,transparent 61%),
    radial-gradient(2px 2px at 210px 18px,#FFF3C4 60%,transparent 61%),
    radial-gradient(1.2px 1.2px at 74px 160px,#fff 60%,transparent 61%),
    radial-gradient(1.6px 1.6px at 300px 130px,#DCE4FF 60%,transparent 61%),
    radial-gradient(1px 1px at 260px 210px,#fff 60%,transparent 61%);
  background-size:330px 240px;opacity:.75;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent);
  animation:h-twinkle 6s ease-in-out infinite alternate}
@keyframes h-twinkle{from{opacity:.5}to{opacity:.85}}
.host::after{content:none}

/* La ciudad al fondo: los edificios se apoyan en la calle (el pie de página) */
.h-city{position:fixed;left:0;right:0;bottom:var(--foot-h,76px);z-index:-1;pointer-events:none;height:clamp(90px,19vh,220px);transition:opacity .6s}
.h-city .skyline{width:100%;height:100%}
.h-city .win.on{filter:drop-shadow(0 0 5px var(--lamp-glow))}
.host.q:not(.reveal) .h-city{opacity:.5}

/* Barra de arriba y calle de abajo */
.host .h-top{position:relative;z-index:2}
.host .h-top .brand{color:#fff}
.host .h-title,.host .h-qcount{font-family:var(--f-display);font-weight:700;color:#fff}
.host .h-title span{color:var(--h-dim);font-weight:600;margin-left:6px}
.host .h-qcount b{color:var(--lamp)}
.host .h-top .pl-kind{background:#ffffff14;border-radius:999px;padding:3px 12px}
.host .h-top .pl-kind span{color:var(--h-soft)}
.host .iconbtn{color:var(--h-soft)}
.host .iconbtn:hover{background:#ffffff1f;color:#fff}
.host .h-foot{background:var(--h-street);border-top:3px solid #262D66;backdrop-filter:none;z-index:3}
.host .h-foot.dim{opacity:1}
.host .h-foot.dim > *{opacity:.4}
.host .h-foot > .grow{font-size:clamp(14px,1.25vw,22px);color:var(--h-soft)}
.host .h-wait{color:var(--h-soft)}

/* Botones del proyector: oscuros con borde; el principal, amarillo farola con canto que se hunde al pulsar */
.host .btn{background:var(--h-panel);border:2px solid var(--h-line);color:#fff;box-shadow:none}
.host .btn:hover{background:var(--h-panel-2)}
.host .btn.ghost{background:transparent;border-color:transparent;color:var(--h-soft)}
.host .btn.ghost:hover{background:#ffffff14;color:#fff}
.host .btn.primary{background:var(--lamp);border-color:var(--lamp);color:var(--lamp-ink);font-family:var(--f-display);font-weight:800;box-shadow:0 5px 0 var(--lamp-edge);transition:transform .08s,box-shadow .08s,filter .15s}
.host .btn.primary:hover{background:var(--lamp);filter:brightness(1.06)}
.host .btn.primary:active:not([disabled]){transform:translateY(4px);box-shadow:0 1px 0 var(--lamp-edge)}
.host .btn[disabled]{opacity:.45;box-shadow:none;cursor:not-allowed}
.host .btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.host .switch{color:#fff}

/* ---------- Sala de espera ---------- */
.host.lobby .joinbox{gap:clamp(18px,3vw,56px);padding-block:clamp(8px,2.2vh,28px) 6px}
.host .joinhow{display:grid;gap:2px;max-width:min(400px,100%);font-size:clamp(18px,1.6vw,26px);color:var(--h-soft);line-height:1.3}
.host .joinhow b{color:#fff}
.host .joinurl{font-family:var(--f-display);font-weight:800;font-size:1.5em;line-height:1.1;overflow-wrap:anywhere}
/* El código en un cartel luminoso */
.joinsign{display:grid;justify-items:center;gap:6px;padding:12px clamp(12px,1.5vw,24px) clamp(14px,1.6vw,22px);background:#0E1236;border:4px solid var(--lamp);border-radius:24px;box-shadow:0 0 0 7px #FFD84D1f,0 0 50px #FFD84D50,inset 0 0 34px #FFD84D1a}
.joinsign-label{font-family:var(--f-display);font-weight:700;color:var(--lamp);font-size:clamp(16px,1.3vw,22px);line-height:1}
.host .joincode{gap:clamp(6px,.6vw,12px)}
.host .joincode span{width:clamp(42px,6.2vw,116px);height:clamp(58px,8.4vw,150px);background:#1A2063;color:var(--lamp);border-radius:clamp(10px,1vw,18px);font-size:clamp(38px,6vw,108px);box-shadow:inset 0 -6px 0 #0000004d;text-shadow:0 0 22px #FFD84D99}
/* Alumnos: etiquetas con avatar y nombre */
.host .pgrid{gap:clamp(8px,.8vw,14px)}
.host .pchip{display:inline-flex;align-items:center;gap:10px;width:auto;max-width:min(300px,100%);padding:5px 18px 5px 5px;border-radius:999px;background:var(--h-panel);border:2px solid var(--h-line);color:#fff;font-family:var(--f-display);font-weight:700;font-size:clamp(17px,1.35vw,24px);line-height:1.15}
.host .pchip svg.av{width:clamp(40px,3.2vw,60px);height:clamp(40px,3.2vw,60px)}
.host .pchip span{font-size:inherit}
.host .pchip:hover{background:var(--h-panel-2)}
.host .pchip.new{border-color:var(--lamp);box-shadow:0 0 24px #FFD84D55;animation:joinPop .7s cubic-bezier(.2,.9,.3,1.5)}
.host .pchip:not(.new){animation:none} /* la lista se redibuja con cada mensaje: solo salta el que acaba de entrar */
@keyframes joinPop{0%{transform:scale(.3) translateY(30px);opacity:0}60%{transform:scale(1.12)}100%{transform:none;opacity:1}}
.host .h-empty{color:var(--h-soft);font-size:clamp(20px,1.8vw,28px);padding:clamp(24px,7vh,80px) 0;gap:10px;text-align:center}
.host .h-empty small{font-size:.7em;color:var(--h-dim)}
.host .dots i{background:var(--lamp)}
.host .dots i:nth-child(2){background:#fff}.host .dots i:nth-child(3){background:var(--lamp)}
.host .h-count{gap:10px;color:var(--h-soft);font-size:clamp(16px,1.3vw,22px)}
.host .h-count svg{color:var(--lamp)}
.host .h-count b{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,2.4vw,44px);color:#fff;line-height:1;font-variant-numeric:tabular-nums}

/* ---------- Presentación del cuestionario ---------- */
.host.intro .h-main{gap:clamp(18px,3vh,32px)}
.host .intro-card{display:grid;justify-items:center;gap:14px;max-width:min(1100px,92vw);animation:introIn .7s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes introIn{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
.host .intro-cover{max-height:30vh;max-width:min(560px,80vw);border-radius:22px;box-shadow:0 18px 50px #0007;background:#fff}
.host .intro-art{display:flex;gap:clamp(10px,1vw,16px);flex-wrap:wrap;justify-content:center}
.host .intro-art span{width:clamp(56px,6.4vw,96px);aspect-ratio:1;border-radius:20px;display:grid;place-items:center;background:var(--tc);color:#fff;box-shadow:inset 0 -6px 0 #00000038,0 10px 26px #0005;animation:artIn .6s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:var(--dl)}
.host .intro-art span svg{width:55%;height:55%}
@keyframes artIn{from{opacity:0;transform:translateY(40px) scale(.6)}to{opacity:1;transform:none}}
.host .intro-kicker{font-family:var(--f-display);font-weight:800;color:var(--lamp);font-size:clamp(20px,2vw,32px);letter-spacing:0;text-transform:none}
.host .intro-title{font-size:clamp(40px,6vw,100px);font-weight:800;text-align:center;line-height:1.02;text-shadow:0 6px 24px #0006}
.host .intro-desc{font-size:clamp(18px,1.8vw,28px);color:var(--h-soft);max-width:60ch;text-align:center}
.host .intro-facts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.host .intro-facts span{display:inline-flex;align-items:baseline;gap:.3em;background:var(--h-panel);border:2px solid var(--h-line);border-radius:999px;padding:8px 20px;font-size:clamp(16px,1.5vw,22px);color:var(--h-soft)}
.host .intro-facts b{font-family:var(--f-display);font-size:1.3em;line-height:1;color:#fff}
.host .intro-bar{width:min(720px,80vw);height:14px;border-radius:9px;background:#ffffff1c;overflow:hidden}
.host .intro-bar i{display:block;height:100%;background:var(--lamp);border-radius:9px;transform-origin:left;animation:drain linear forwards;box-shadow:0 0 16px var(--lamp-glow)}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- «¡Prepárate!»: cuenta atrás con anillo ---------- */
.host.ready .h-main{gap:clamp(16px,2.6vh,28px)}
.host .ready-kind .pl-kind{font-size:clamp(18px,1.8vw,26px);background:var(--h-panel);border:2px solid var(--h-line);border-radius:999px;padding:6px 18px}
.host .ready-kind .pl-kind,.host .ready-kind .pl-kind span{color:#fff}
.host .ready-text{max-width:min(1300px,94vw);animation:introIn .5s ease-out both}
.host .ready-count{position:relative;width:clamp(140px,15vw,230px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#141945 0 60%,transparent 61%);box-shadow:none}
.host .ready-count svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.host .ready-count .trk{fill:none;stroke:#ffffff1f;stroke-width:9}
.host .ready-count .rng{fill:none;stroke:var(--lamp);stroke-width:9;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:0;animation:readyDrain linear forwards;filter:drop-shadow(0 0 6px var(--lamp-glow))}
@keyframes readyDrain{to{stroke-dashoffset:276.5}}
.host .ready-count span{position:relative;font-family:var(--f-display);font-weight:800;font-size:clamp(70px,8vw,124px);color:var(--lamp);line-height:1;font-variant-numeric:tabular-nums}
.host .ready-count span.beat{animation:beat .9s cubic-bezier(.2,.9,.3,1.4)}
@keyframes beat{0%{transform:scale(1.8);opacity:0}40%{transform:scale(.92);opacity:1}100%{transform:scale(1)}}
/* «¡Última pregunta!» */
.ready-last{display:inline-block;background:var(--a);color:#fff;font-family:var(--f-display);font-weight:800;border-radius:999px;padding:6px 22px;font-size:clamp(20px,2vw,32px);box-shadow:inset 0 -5px 0 #0000003a,0 8px 24px #0005;animation:lastPulse 1.1s ease-in-out infinite}
@keyframes lastPulse{0%,100%{transform:scale(1) rotate(-1.5deg)}50%{transform:scale(1.08) rotate(1.5deg)}}

/* Imagen con crédito */
.qimg{margin:0;display:grid;justify-items:center;gap:4px}
.qimg img{max-width:100%;border-radius:16px;background:#fff;object-fit:contain}
.qimg figcaption{font-size:12px;color:var(--muted)}
.host .qimg figcaption{color:var(--h-dim)}
.h-img.qimg img{max-height:32vh}
.host.ready .h-img.qimg img{max-height:28vh}

/* ---------- Pregunta ---------- */
.host .h-qhead{gap:clamp(14px,2vw,32px)}
.host .h-qtext{font-family:var(--f-display);font-size:clamp(28px,3.3vw,60px);font-weight:800;line-height:1.12;text-wrap:balance}
/* Reloj: anillo amarillo que se vacía; en los últimos 5 segundos, rojo y late */
.host .h-timer{width:clamp(96px,8.6vw,150px)}
.host .h-timer .dsk{fill:#141945}
.host .h-timer .trk{fill:none;stroke:#ffffff1c;stroke-width:9}
.host .h-timer .rng{stroke:var(--lamp);stroke-width:9;filter:drop-shadow(0 0 5px var(--lamp-glow))}
.host .h-timer .rng.urgent{stroke:#FF6B5E;filter:drop-shadow(0 0 6px #FF6B5E99)}
.host .h-timer span{font-size:clamp(38px,3.6vw,64px);font-variant-numeric:tabular-nums;color:#fff}
.host .h-timer:has(.rng.urgent) span{color:#FF8A80;animation:tUrg 1s ease-in-out infinite}
@keyframes tUrg{0%,100%{transform:scale(1)}20%{transform:scale(1.16)}}
.host .h-timer.paused .rng{stroke:#ffffff55;filter:none}
.host .h-timer em{bottom:-26px;font-size:clamp(14px,1.1vw,18px);text-transform:none;color:var(--lamp);font-family:var(--f-display)}
/* Contador de respuestas y, al corregir, % de aciertos */
.host .h-answered,.host .h-hits{grid-column:3;grid-row:1;display:grid;justify-items:center;align-content:center;line-height:1;min-width:clamp(96px,8vw,140px);padding:12px 14px;border-radius:20px;background:var(--h-panel);border:2px solid var(--h-line)}
.host .h-answered{grid-template-columns:auto auto;align-items:baseline;column-gap:4px}
.host .h-answered b,.host .h-hits b{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,3.6vw,66px);font-variant-numeric:tabular-nums;color:#fff}
.host .h-answered span{font-size:clamp(18px,1.4vw,26px);color:var(--h-soft);font-family:var(--f-display);font-weight:700}
.host .h-answered small,.host .h-hits small{grid-column:1/-1;color:var(--h-soft);margin-top:6px;font-size:clamp(13px,1vw,17px);font-weight:700}
.host .h-hits b{color:var(--lamp)}
.h-answered.bump b{animation:ansBump .45s cubic-bezier(.2,.9,.3,1.6)}
@keyframes ansBump{0%{transform:scale(1)}40%{transform:scale(1.35);color:var(--lamp)}100%{transform:scale(1)}}
.host .h-revtitle{background:var(--h-ok);color:#fff;font-family:var(--f-display);font-weight:800;font-size:clamp(16px,1.4vw,24px);padding:10px 20px;box-shadow:inset 0 -4px 0 #0000002e;white-space:nowrap}

/* La pregunta ocupa toda la altura: los botones crecen hasta donde empieza la ciudad */
.host.q:not(.ready) .h-main{display:flex;flex-direction:column}
.host.q:not(.ready) .h-main > *{flex:none}
.host.q:not(.ready) .h-main > .h-qhead,.host.q:not(.ready) .h-main > .h-pausebar,.host.q:not(.ready) .h-main > .h-cheer,.host.q:not(.ready) .h-main > .h-fast,.host.q:not(.ready) .h-main > .qimg{align-self:center}
.host.q:not(.ready) .h-main > .h-qhead{align-self:stretch}
.host.q:not(.ready) .h-answers{flex:1 1 auto;display:flex;flex-direction:column;max-height:62vh}
.host.q:not(.ready) .h-answers > .tiles.onhost{flex:1 1 auto;grid-auto-rows:minmax(clamp(84px,14vh,180px),1fr);max-height:min(52vh,520px)}
/* Botones de respuesta en el proyector (el estilo base es de botones.css; aquí, el tamaño para leerlo desde el fondo) */
.tiles.onhost{gap:clamp(12px,1.3vw,22px)}
.tiles.onhost .tile{min-height:clamp(84px,14vh,180px);font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.35vw,42px);line-height:1.15;padding:clamp(12px,1.2vw,20px) clamp(14px,1.5vw,24px);border-radius:20px}
.tiles.onhost .tile{--lift:8px}
.tiles.onhost .tile.is-right{--lift:4px}
/* Verdadero o falso: dos botones anchos, con la letra y la palabra en grande y centradas */
.host.q:not(.ready) .h-answers > .tiles.tf.onhost{max-height:min(34vh,340px)}
.tiles.tf.onhost .tile{justify-content:center;font-size:clamp(26px,3vw,56px);font-weight:800}
.tiles.tf.onhost .tile .tt{flex:none}
.tiles.tf.onhost .tile .tnum,.tiles.tf.onhost .tile .tok{margin-left:auto}
.tiles.tf.onhost .tile:has(.tnum) .tt{flex:1}
.tiles.onhost .tile .tk{width:clamp(46px,3.8vw,70px);height:clamp(46px,3.8vw,70px);font-size:clamp(26px,2.2vw,40px);border-radius:14px}
.tiles.onhost .tile .tok{width:clamp(40px,3.2vw,56px);height:clamp(40px,3.2vw,56px)}
.tiles.onhost .tile .tnum{font-size:1.35em;font-weight:800;font-variant-numeric:tabular-nums}
/* Las que no eran: apagadas pero opacas (si fueran transparentes se vería la ciudad a través) */
.tiles.onhost .tile.is-dim{opacity:1;filter:saturate(.35) brightness(.58)}
.tiles.onhost .tile.is-dim[data-c="c"]{color:#fff}
.tiles.onhost .tile.is-right{outline:5px solid #fff;outline-offset:4px;filter:drop-shadow(0 0 22px #FFD84D80);animation:rightPop .6s cubic-bezier(.2,.9,.3,1.5) .35s both}
@keyframes rightPop{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:none}}
/* Rellenar huecos, ordenar y emparejar */
.host .gappara{background:var(--h-panel);border:2px solid var(--h-line);border-radius:22px;color:#fff;font-size:clamp(22px,2.3vw,40px);line-height:2;padding:clamp(16px,2vw,28px) clamp(18px,2.4vw,34px)}
.host .slot{background:#ffffff14;color:#fff;border-bottom:4px solid #ffffff66}
.host .slot.onhost{color:var(--lamp);border-bottom:4px dashed var(--lamp);font-family:var(--f-display);font-weight:800}
.host .slot.is-right{background:#0F5A45;border-color:var(--h-ok-hi);color:#fff}
.host .bank.onhost{gap:12px;margin-top:4px}
.host .bank.onhost .wchip{background:#fff;color:#162033;border:0;box-shadow:0 5px 0 #8C95C9;font-family:var(--f-display);font-size:clamp(18px,1.9vw,32px);padding:6px 20px;border-radius:14px;opacity:1;cursor:default}
.host .pl-ord li,.host .mitem{padding:10px 16px;min-height:clamp(52px,6.5vh,76px);background:var(--h-panel);border:2px solid var(--h-line);color:#fff;border-radius:16px;font-family:var(--f-display);font-weight:700;font-size:clamp(20px,1.9vw,32px);opacity:1}
.host .pl-ord .onum2{display:grid;place-items:center;width:1.5em;height:1.5em;min-width:0;border-radius:50%;background:var(--lamp);color:var(--lamp-ink);font-size:.85em}
.host .pl-ord li.is-right,.host .mitem.is-right{background:#0F5A45;border-color:var(--h-ok-hi)}
.host .mitem .mdot{border-color:#ffffff66}
.host .mitem.linked{background:var(--h-panel-2)}
.host .pairrow{background:var(--h-panel);border-width:3px;color:#fff;font-family:var(--f-display);font-size:clamp(20px,1.9vw,32px)}
.host .pairrow b{color:#fff;opacity:.8}
/* Reparto de aciertos (tipos sin opciones) */
.host .dist{gap:14px;background:var(--h-panel);border:2px solid var(--h-line);border-radius:22px;padding:clamp(14px,1.6vw,24px)}
.host .drow{grid-template-columns:7.2em 1fr 2.2em;font-size:clamp(16px,1.5vw,24px);gap:14px}
.host .drow b{font-size:clamp(22px,2vw,34px);color:#fff;font-variant-numeric:tabular-nums}
.host .dist .dl{color:var(--h-soft)}
.host .dtrack{height:clamp(22px,2.4vh,32px);background:#ffffff14;border-radius:10px}
.host .dtrack span{border-radius:10px}

/* Pausa: cartel grande que se ve desde el fondo de la clase */
.h-pausebar{justify-self:center;display:inline-flex;align-items:center;gap:16px;background:#0E1236;border:4px solid var(--lamp);color:#fff;border-radius:24px;padding:12px 32px 12px 14px;box-shadow:0 0 0 7px #FFD84D1f,0 0 50px #FFD84D50;font-family:var(--f-display);font-weight:800;font-size:clamp(22px,2.4vw,40px);line-height:1.15;text-align:left}
.h-pausebar small{display:block;font-family:var(--f-body);font-weight:700;font-size:.48em;color:var(--h-soft);margin-top:2px}
.h-pauseicon{width:1.7em;height:1.7em;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--lamp);color:var(--lamp-ink);animation:pausePulse 1.8s ease-in-out infinite}
@keyframes pausePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.host.q:has(.h-pausebar) .h-answers{opacity:.4;filter:saturate(.5) blur(1px);transition:opacity .3s}

/* El más rápido */
.h-fast{justify-self:center;display:inline-flex;align-items:center;gap:12px;background:var(--h-panel);border:2px solid var(--h-line);border-radius:999px;padding:5px 8px 5px 6px;font-size:clamp(16px,1.5vw,24px);color:var(--h-soft);animation:introIn .6s ease-out .3s both}
.h-fast b{color:#fff;font-family:var(--f-display)}
.h-fast em{font-style:normal;font-family:var(--f-display);font-weight:800;color:var(--lamp-ink);background:var(--lamp);border-radius:999px;padding:2px 14px;font-variant-numeric:tabular-nums}
/* Corrección: todos han acertado / nadie ha acertado */
.h-cheer{justify-self:center;display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:8px 26px;font-family:var(--f-display);font-weight:800;font-size:clamp(20px,2.2vw,36px);box-shadow:0 10px 30px #0005;animation:cheerIn .7s cubic-bezier(.2,.9,.3,1.5) .2s both}
.h-cheer.ok{background:var(--h-ok);color:#fff;box-shadow:inset 0 -5px 0 #0000002e,0 0 40px #3BD69B55}
.h-cheer.bad{background:var(--h-panel);border:2px solid var(--h-line);color:#fff}
@keyframes cheerIn{0%{opacity:0;transform:scale(.4) rotate(-6deg)}70%{transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:none}}

/* ---------- Clasificación ---------- */
.host .bwrap{max-width:min(1100px,100%)}
.h-bigtitle{justify-self:center;font-family:var(--f-display);font-weight:800;font-size:clamp(30px,3.2vw,58px);line-height:1;color:#fff}
.h-bigtitle span{color:var(--lamp)}
.host .brow{background:var(--h-panel);border:2px solid var(--h-line);border-radius:20px;font-family:var(--f-display);font-weight:700;color:#fff;gap:clamp(10px,1vw,18px)}
.host .brank{flex:none;width:clamp(40px,3.2vw,56px);height:clamp(40px,3.2vw,56px);border-radius:50%;display:grid;place-items:center;background:#ffffff14;font-weight:800;font-size:clamp(22px,1.9vw,32px);font-variant-numeric:tabular-nums}
.host .brow.first{background:var(--lamp);border-color:var(--lamp);color:var(--lamp-ink);box-shadow:0 0 40px #FFD84D55}
.host .brow.first .brank{background:var(--lamp-ink);color:var(--lamp)}
.host .brow.r2 .brank,.host .prow.r2 .brank{background:var(--h-silver);color:#1F2638}
.host .brow.r3 .brank,.host .prow.r3 .brank{background:var(--h-bronze);color:#2B1407}
.host .prow.r1 .brank{background:var(--lamp);color:var(--lamp-ink)}
.host .bname{gap:12px}
.host .bname .bn{overflow:hidden;text-overflow:ellipsis;min-width:0}
.host .bdelta{opacity:1;color:#7CF0B5;font-weight:800;font-variant-numeric:tabular-nums}
.host .brow.first .bdelta{color:#0B5C3F}
.host .bscore{font-weight:800}
.bmove{display:inline-flex;align-items:center;flex:none;font-family:var(--f-display);font-size:clamp(15px,1.2vw,20px);font-weight:800;color:#fff;background:var(--h-ok);border-radius:999px;padding:1px 10px;animation:introIn .5s ease-out .8s both}
.brow.first .bmove{background:#0B5C3F;color:#fff}
.host .bstreak{flex:none;gap:3px;font-size:clamp(15px,1.2vw,20px);font-weight:800;color:#FFC08A;background:#FF7A3D2b;border-radius:999px;padding:1px 10px 1px 6px}
.host .brow.first .bstreak{background:#00000016;color:var(--lamp-ink)}
/* El que sube de puesto brilla un momento al llegar a su sitio */
.host .brow.climb{animation:climbGlow 1.6s ease-out .55s backwards}
@keyframes climbGlow{0%{box-shadow:0 0 0 0 #3BD69B00}35%{box-shadow:0 0 0 4px var(--h-ok-hi),0 0 34px #3BD69B99}100%{box-shadow:0 0 0 0 #3BD69B00}}
.h-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.h-chip{display:inline-flex;align-items:center;gap:8px;background:var(--h-panel);border:2px solid var(--h-line);border-radius:999px;padding:6px 18px;font-size:clamp(16px,1.5vw,24px);color:var(--h-soft)}
.h-chip b{color:#fff;font-family:var(--f-display)}
.h-chip.up b{color:#7CF0B5}
.h-chip.hot b{color:var(--lamp)}
.h-chips.anim .h-chip{animation:introIn .6s ease-out 1s both}
.h-chips.anim .h-chip+.h-chip{animation-delay:1.3s}
.h-wait.center{text-align:center}

/* ---------- Podio: tres torres que suben una a una ---------- */
.host.podium .h-main{padding-bottom:0;align-content:end;max-width:1320px}
.host.podium.listall .h-main{align-content:start;padding-bottom:30px}
.host .peds{grid-template-columns:repeat(3,minmax(0,clamp(200px,20vw,380px)));gap:clamp(10px,2.4vw,44px);min-height:0;align-items:end;clip-path:inset(-100vh -50vw 0 -50vw)}
.host .ped{gap:12px}
.host .pedwho strong{font-size:clamp(22px,2.3vw,38px);line-height:1.1;max-width:100%;overflow-wrap:anywhere}
.host .pedwho span{color:var(--h-soft);font-size:clamp(16px,1.4vw,24px);font-variant-numeric:tabular-nums}
.host .p1 .pedwho strong{color:var(--lamp)}
.host .pedbox{--tw:#2F3786;position:relative;display:block;padding:0;border-radius:12px 12px 0 0;background:var(--tw);box-shadow:inset 8px 0 0 #ffffff10,inset -8px 0 0 #0000002a;border-top:8px solid color-mix(in srgb,var(--tw) 70%,#fff);transform:translateY(105%);color:inherit;font-size:inherit;text-shadow:none}
.host .p1 .pedbox{--tw:#3A43A2;height:min(45vh,560px)}
.host .p2 .pedbox{--tw:#2E3688;height:min(33vh,410px)}
.host .p3 .pedbox{--tw:#29307B;height:min(24vh,300px)}
/* Ventanas encendidas */
.host .pedbox::before{content:"";position:absolute;inset:calc(clamp(14px,1.4vw,22px) + clamp(58px,5.2vw,92px) + 16px) 12% 14px;background-image:linear-gradient(90deg,var(--tw) 0 34%,transparent 34%),linear-gradient(180deg,var(--tw) 0 38%,var(--lamp) 38%);background-size:clamp(26px,2.4vw,40px) clamp(28px,2.6vw,42px);background-position:center top;filter:drop-shadow(0 0 6px #FFD84D66)}
.host .ped.shown .pedbox,.host .ped.noone .pedbox{transform:none}
.host .ped.noone .pedbox{opacity:.55}
.host .ped.noone .pedbox::before{opacity:.12;filter:none}
.host .ped.noone .pmedal{display:none}
/* Medalla arriba de la torre */
.host .pmedal{position:absolute;top:clamp(14px,1.4vw,22px);left:50%;transform:translateX(-50%);width:clamp(58px,5.2vw,92px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-style:normal;font-size:clamp(26px,2.4vw,42px);line-height:1;box-shadow:inset 0 -5px 0 #0000002e,0 0 0 5px #ffffff26;text-shadow:none}
.host .pmedal.m1{background:var(--h-gold);color:var(--lamp-ink);box-shadow:inset 0 -5px 0 #0000002e,0 0 0 5px #FFD84D40,0 0 34px #FFD84D88}
.host .pmedal.m2{background:var(--h-silver);color:#1F2638}
.host .pmedal.m3{background:var(--h-bronze);color:#2B1407}
.host .ped.rise .pedbox{animation:towerRise 1.1s cubic-bezier(.2,.75,.25,1) both}
.host .ped.rise .pedbox::before{animation:winsOn .9s steps(5) .7s both}
.host .ped.rise .pedwho{animation:pedIn .75s cubic-bezier(.2,.9,.3,1.35) .85s both}
@keyframes towerRise{from{transform:translateY(105%)}to{transform:none}}
@keyframes winsOn{from{opacity:.1}to{opacity:1}}
@keyframes pedIn{0%{opacity:0;transform:translateY(40px) scale(.6)}70%{opacity:1;transform:translateY(-8px) scale(1.06)}100%{opacity:1;transform:none}}
.host.podium .h-cheer{margin-bottom:-6px}
/* Todos los jugadores (lista) */
.host .podall{max-width:900px}
.host .prow{background:var(--h-panel);border:2px solid var(--h-line);border-radius:16px;font-family:var(--f-display);font-size:clamp(18px,1.5vw,26px);padding:8px 18px 8px 10px}
.host .prow .brank{width:44px;height:44px;font-size:22px}
.host .prow .bscore{font-size:clamp(20px,1.6vw,28px);font-variant-numeric:tabular-nums}

/* ---------- Partida cerrada / otra pestaña ---------- */
.host.msg .h-main h2{font-size:clamp(30px,3.4vw,56px);font-weight:800}
.host.msg .h-wait{max-width:44ch}

/* ---------- Reacciones que suben desde la ciudad ---------- */
.react-layer{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.rx{position:absolute;bottom:4vh;display:grid;justify-items:center;gap:4px;animation:rise 3s cubic-bezier(.3,.6,.4,1) forwards}
.rxe{font-size:clamp(40px,4vw,64px);line-height:1;filter:drop-shadow(0 6px 10px #0006)}
.rxw{display:flex;align-items:center;gap:5px;background:#0E1236;border:2px solid #FFD84D99;color:#fff;border-radius:999px;padding:2px 10px 2px 2px;font-size:14px;font-weight:700;max-width:200px}
.rxw small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
@keyframes rise{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:1;transform:translate(0,-10vh) scale(1.1)}100%{transform:translate(var(--dx),-100vh) scale(1);opacity:0}}
.confetti.fireworks{z-index:5}

/* Jugadores (ventana): filas más limpias */
.plist .plrow{background:transparent;border-bottom:1px solid var(--line);border-radius:0;padding:8px 4px}
.plist .plrow:last-child{border-bottom:0}
.plist .bscore{font-variant-numeric:tabular-nums}

/* ---------- Proyectores grandes (1920×1080 o más) ---------- */
@media (min-width:1600px) and (min-height:900px){
  .h-main{max-width:1720px}
  .h-title,.h-qcount{font-size:28px}
  .host .h-top .pl-kind{font-size:17px}
  .host .pgrid{gap:16px}
  .host .h-revtitle{font-size:24px;padding:12px 22px}
  .host .pl-ord li,.host .mitem{padding:16px 20px;min-height:76px}
  .host .mitem .mdot{width:22px;height:22px}
  .host .pairrow{padding:16px 22px}
  .host .brow{height:84px;font-size:32px;padding:0 24px}
  .host .brow svg.av{width:70px;height:70px}
  .host .bscore{font-size:42px;min-width:150px}
  .host .bdelta{font-size:26px}
  .host .btn{font-size:18px}
  .host .btn.huge{font-size:24px}
}
/* Proyector manejado desde un móvil */
@media (max-width:600px){
  .host .h-top .h-title{flex-basis:100%;order:3;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .host .joinhow{text-align:center;justify-items:center}
  .host .h-qhead{grid-template-columns:auto auto;justify-content:center}
  .host .h-qhead .h-qtext{grid-column:1/-1;grid-row:1}
  .host .h-qhead .h-timer,.host .h-qhead .h-revtitle{grid-column:1;grid-row:2}
  .host .h-qhead .h-answered,.host .h-qhead .h-hits{grid-column:2;grid-row:2}
  .host .peds{gap:6px}
  .host .pmedal{width:44px;font-size:20px}
  .host .pedwho svg.av{width:64px;height:64px}
  .host .pedwho strong{font-size:18px}
  .host .h-qhead{row-gap:30px}
  .host .pedbox::before{inset:64px 10% 10px}
  .h-city{height:90px}
}
@media (prefers-reduced-motion:reduce){
  .host::before,.intro-art span,.rx,.ready-count span.beat,.host .pchip.new,.h-cheer,.h-answered.bump b,.ready-last,.h-pauseicon,
  .host .ped.rise .pedbox,.host .ped.rise .pedbox::before,.host .ped.rise .pedwho,.h-chips.anim .h-chip,.host .brow.climb,.tiles.onhost .tile.is-right,.host .h-timer span{animation:none}
  .rx{display:none}
  .host .ready-count .rng{animation:none}
}