/* STARGATE — hoja de estilo del sitio (CCD) */
@font-face{font-family:'Unbounded';src:url(../fonts/Unbounded.ttf) format('truetype');font-weight:200 900;font-display:swap}
@font-face{font-family:'DMSans';src:url(../fonts/DMSans.ttf) format('truetype');font-weight:100 1000;font-display:swap}
@font-face{font-family:'DMSans';src:url(../fonts/DMSans-Italic.ttf) format('truetype');font-weight:100 1000;font-style:italic;font-display:swap}
:root{--bg:#080c14;--bg2:#0d1420;--panel:#101a28;--line:#1c2c40;--teal:#37e0ec;--teal2:#5ad0eb;--amber:#f5b043;--violet:#aa66cc;--ink:#e9f0f6;--mut:#9fb2c2}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 700px at 70% -10%,#12283a 0%,var(--bg) 55%) no-repeat,var(--bg);color:var(--ink);font-family:'DMSans',system-ui,sans-serif;line-height:1.6;font-size:17px}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:'Unbounded',sans-serif;line-height:1.12;font-weight:700}
a{color:var(--teal2)}
img{max-width:100%;height:auto}
/* NAV */
.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:rgba(8,12,20,.72);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;gap:6px;flex-wrap:wrap;padding:10px 22px;align-items:center}
.nav .brand{font-family:'Unbounded';font-size:.98rem;margin-right:auto;color:#eafcff;text-decoration:none;letter-spacing:.02em}
.nav a.lnk{color:var(--mut);text-decoration:none;font-size:.85rem;padding:6px 11px;border-radius:8px}
.nav a.lnk:hover{color:var(--teal);background:rgba(55,224,236,.08)}
.nav a.lnk.active{color:var(--teal);background:rgba(55,224,236,.12)}
/* menú «Grupos»: despliega los PER activos */
.nav .lnk.drop{position:relative;padding:0}
.nav .drop-btn{font:inherit;font-size:.85rem;color:var(--mut);background:none;border:0;cursor:pointer;
  padding:6px 11px;border-radius:8px;font-family:inherit}
.nav .drop-btn i{font-style:normal;font-size:.7em;opacity:.8}
.nav .drop-btn:hover,.nav .lnk.drop.open .drop-btn{color:var(--teal);background:rgba(55,224,236,.08)}
.nav .lnk.drop.active .drop-btn{color:var(--teal);background:rgba(55,224,236,.12)}
.nav .drop-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:250px;max-width:min(320px,86vw);
  max-height:min(60vh,420px);overflow:auto;background:rgba(10,15,24,.98);border:1px solid var(--line);
  border-radius:12px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.55);z-index:30}
.nav .drop-menu a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--txt);font-size:.85rem}
.nav .drop-menu a:hover{background:rgba(55,224,236,.1)}
.nav .drop-menu a em{display:block;font-style:normal;font-size:.75rem;color:var(--mut);margin-top:1px}
.nav .drop-menu .drop-all{color:var(--teal);font-size:.78rem;border-bottom:1px solid var(--line);
  border-radius:8px 8px 0 0;margin-bottom:4px}
.nav .drop-menu .drop-msg{display:block;padding:8px 10px;font-size:.78rem;color:var(--mut)}
/* grupos.html */
.grupo{margin-bottom:16px}
.grupo.foco{border-color:var(--teal);box-shadow:0 0 26px rgba(55,224,236,.18)}
.grupo-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.grupo-head h3{margin:0}
.accesos{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin:14px 0 12px}
.accesos .acceso{display:block;padding:11px 12px;border:1px solid var(--line);border-radius:12px;
  text-decoration:none;background:rgba(255,255,255,.02);transition:.18s}
.accesos .acceso:hover{border-color:var(--teal);transform:translateY(-2px)}
.accesos .acceso .ic{font-size:1.1rem}
.accesos .acceso b{display:block;color:var(--txt);font-size:.88rem;margin-top:2px}
.accesos .acceso em{display:block;font-style:normal;font-size:.75rem;color:var(--mut);line-height:1.4;margin-top:3px}
/* v3.36 · QUIÉN VE QUÉ. El profesorado tiene que distinguir de un vistazo lo que reparte de lo que
   no: hasta hoy los enlaces del alumnado y los de la sala iban en la misma rejilla, todos iguales. */
.acc-tit{font-family:'DMSans';font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  margin:16px 0 0;padding-left:9px;border-left:3px solid var(--line)}
.acc-tit.acc-alu{color:#43c98a;border-left-color:#43c98a}
.acc-tit.acc-profe{color:var(--amber);border-left-color:var(--amber)}
.acc-tit + .accesos{margin-top:8px}
.acc-nota{font-size:.75rem;color:var(--mut);margin:6px 0 0;line-height:1.5}
.acceso .quien{display:inline-block;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 6px;border-radius:999px;margin-left:6px;vertical-align:middle}
.acceso .quien.alu{color:#43c98a;background:rgba(67,201,138,.12)}
.acceso .quien.profe{color:var(--amber);background:rgba(245,176,67,.12)}
.grupo .forms{display:flex;flex-wrap:wrap;gap:8px}
.chip-link{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:999px;
  font-size:.76rem;text-decoration:none;color:var(--mut)}
.chip-link:hover{border-color:var(--amber);color:var(--amber)}
/* HERO */
.hero{position:relative;padding:82px 22px 60px;text-align:center;border-bottom:1px solid var(--line);overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 0,rgba(55,224,236,.16),transparent 70%);pointer-events:none}
.kicker{font-family:'DMSans';letter-spacing:.34em;text-transform:uppercase;color:var(--teal);font-weight:700;font-size:.78rem}
.hero h1{font-size:clamp(2.3rem,6vw,4.2rem);margin:.35em 0 .2em;background:linear-gradient(180deg,#eafcff,#8fd8e6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:730px;margin:.5em auto 0;color:var(--mut);font-size:1.1rem}
section{padding:54px 0;border-bottom:1px solid var(--line)}
section h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin:0 0 .2em}
.lead{color:var(--mut);max-width:840px;margin:0 0 1.4em}
.eyebrow{color:var(--amber);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;font-family:'DMSans'}
.eyebrow.teal{color:var(--teal)}
/* GRID / CARDS */
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:16px;padding:22px}
.card h3{margin:.1em 0 .4em;font-size:1.12rem;color:#eafcff}
.card.accent{border-color:#2a4a3e}
.pill{display:inline-block;background:rgba(55,224,236,.12);border:1px solid #234;color:var(--teal2);border-radius:999px;padding:2px 10px;font-size:.78rem;font-family:'DMSans';margin:2px 4px 2px 0}
.pill.amber{background:rgba(245,176,67,.14);border-color:#4a3a1e;color:var(--amber)}
.pts{font-family:'Unbounded';color:var(--amber);font-weight:700}
/* BADGES */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:20px}
.badges.sm5{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.badge{margin:0;text-align:center;background:linear-gradient(180deg,rgba(20,30,44,.6),rgba(10,15,22,.5));border:1px solid var(--line);border-radius:16px;padding:16px 12px 14px;transition:.2s}
.badge:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 10px 34px rgba(55,224,236,.14)}
.badge img{width:100%;max-width:150px;filter:drop-shadow(0 6px 18px rgba(55,224,236,.22))}
.badge.sm img{max-width:120px}
.badge figcaption{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.badge b{font-size:.98rem;color:#eafcff}
.badge .tag{font-family:'DMSans';font-size:.75rem;letter-spacing:.08em;color:var(--teal);text-transform:uppercase}
.badge em{font-style:normal;color:var(--mut);font-size:.82rem;line-height:1.35}
.cards-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.card-thumb img{width:100%;border-radius:14px;border:1px solid var(--line);transition:.2s}
.card-thumb:hover img{transform:translateY(-5px) scale(1.02);border-color:var(--amber);box-shadow:0 14px 40px rgba(0,0,0,.5)}
/* TABLES */
table{width:100%;border-collapse:collapse;margin:.4em 0;font-size:.94rem}
/* 🔴 Una tabla de tres columnas no cabe en 390 px y empuja la página entera de lado. Que se
   desplace la TABLA dentro de su caja y no el documento: el resto del texto se queda quieto. */
@media(max-width:760px){
  table:not(.rank):not(.mapa){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table:not(.rank):not(.mapa) td,table:not(.rank):not(.mapa) th{white-space:nowrap}
}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--teal);font-family:'DMSans';font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
tr:hover td{background:rgba(55,224,236,.04)}
.two{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center}.two>*{min-width:0}
@media(max-width:760px){.two{grid-template-columns:1fr}}
blockquote{margin:1.2em 0;padding:14px 20px;border-left:3px solid var(--amber);background:rgba(245,176,67,.06);border-radius:0 12px 12px 0;color:#f0e2c8;font-style:italic}
.flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--mut);font-size:.92rem}
.flow .node{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--ink)}
.flow .ar{color:var(--teal)}
.villain{border-color:#3a2340;background:linear-gradient(180deg,#1a1020,#0d0812)}
.villain .eyebrow{color:var(--violet)}
/* TIPS */
.tips{counter-reset:t}
.tip{position:relative;padding:16px 18px 16px 62px;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;margin:12px 0}
.tip:before{counter-increment:t;content:counter(t);position:absolute;left:16px;top:16px;width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--teal),#1c8fa0);color:#04121a;font-family:'Unbounded';font-weight:700;display:grid;place-items:center;font-size:.95rem}
.tip b{color:#eafcff}
/* ACTIVITY steps */
.steps{display:grid;gap:12px;counter-reset:s}
.step{position:relative;padding:14px 16px 14px 56px;background:var(--bg2);border:1px solid var(--line);border-radius:12px}
.step:before{counter-increment:s;content:counter(s);position:absolute;left:14px;top:14px;width:28px;height:28px;border-radius:8px;background:rgba(245,176,67,.16);border:1px solid #4a3a1e;color:var(--amber);display:grid;place-items:center;font-family:'Unbounded';font-size:.85rem}
.tag-req{display:inline-block;font-size:.75rem;font-family:'DMSans';font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);border:1px solid #234;border-radius:6px;padding:1px 7px;margin-left:6px}
.official{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--mut);border:1px dashed #33506a;border-radius:9px;padding:6px 12px;margin:.2em 0}
.official b{color:var(--teal2)}
/* WIP / construcción */
.wip{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#20180a,#140f06);border:1px solid #4a3a1e;border-left:4px solid var(--amber);border-radius:14px;padding:16px 20px;margin:0 0 26px}
.wip .ic{font-size:1.7rem}
.wip b{color:var(--amber);font-family:'Unbounded'}
.embed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.embed-slot{border:2px dashed #33506a;border-radius:16px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 12px,transparent 12px 24px),var(--bg2);aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;color:var(--mut);transition:.2s}
.embed-slot:hover{border-color:var(--teal);color:var(--ink)}
.embed-slot .n{font-family:'Unbounded';font-size:1.4rem;color:var(--teal)}
.embed-slot .s{font-size:.85rem;margin-top:6px}
.embed-slot .wipchip{margin-top:10px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border:1px solid #4a3a1e;border-radius:999px;padding:3px 10px}
.responsive-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000}
.responsive-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Leaderboard */
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:end;max-width:560px;margin:0 auto 26px}
.pod{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px 14px 0 0;text-align:center;padding:16px 10px;opacity:.55}
.pod .medal{font-size:1.7rem}
.pod .h{height:26px}
.pod.gold{border-color:#5a4a1e;padding-bottom:44px}
.pod.silver{padding-bottom:26px}
.pod.bronze{padding-bottom:14px}
.muted-rows td{color:#6d8092}
footer{padding:40px 22px 70px;text-align:center;color:var(--mut);font-size:.9rem}
footer a{color:var(--teal2)}
.backlink{display:inline-block;margin:0 0 6px;color:var(--mut);text-decoration:none;font-size:.85rem}
.backlink:hover{color:var(--teal)}
/* Clicable + modal */
.badge[data-key],.card-thumb[data-card]{cursor:pointer}
.badge[data-key]:focus-visible,.card-thumb[data-card]:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.modal-backdrop{position:fixed;inset:0;background:rgba(4,8,14,.84);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:100;padding:24px;opacity:0;transition:opacity .18s}
.modal-backdrop.open{display:flex;opacity:1}
.modal{background:linear-gradient(180deg,#101a28,#0b1119);border:1px solid var(--line);border-radius:20px;max-width:900px;width:100%;max-height:90vh;overflow:auto;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-close{position:absolute;top:12px;right:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);width:40px;height:40px;border-radius:11px;font-size:1.15rem;line-height:1;cursor:pointer;z-index:3}
.modal-close:hover{background:rgba(55,224,236,.14);border-color:var(--teal);color:var(--teal)}
.modal-badge{display:grid;grid-template-columns:320px 1fr;gap:0}
@media(max-width:640px){.modal-badge{grid-template-columns:1fr}}
.modal-badge .fig{display:flex;align-items:center;justify-content:center;padding:34px 24px;background:radial-gradient(circle at 50% 42%,rgba(55,224,236,.12),transparent 70%)}
.modal-badge .fig img{width:100%;max-width:240px;filter:drop-shadow(0 10px 34px rgba(55,224,236,.32))}
.modal-badge .body{padding:34px 36px 36px 8px}
@media(max-width:640px){.modal-badge .body{padding:6px 26px 30px}}
.modal-badge .type{color:var(--teal);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;font-family:'DMSans'}
.modal-badge h3{font-family:'Unbounded';font-size:1.5rem;margin:.25em 0 0;color:#eafcff;line-height:1.15}
.modal-badge dl{margin:1.3em 0 0}
.modal-badge dt{color:var(--amber);font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;font-family:'DMSans';margin-top:1.15em}
.modal-badge dd{margin:.28em 0 0;color:var(--ink);line-height:1.55}
.modal-badge .mquote{margin:1.4em 0 0;padding:12px 18px;border-left:3px solid var(--teal);background:rgba(55,224,236,.07);border-radius:0 12px 12px 0;color:#cfeaf0;font-style:italic;font-size:1rem}
.modal-badge .mlink{display:inline-flex;align-items:center;gap:8px;margin-top:1.4em;background:rgba(245,176,67,.14);border:1px solid #4a3a1e;color:var(--amber);text-decoration:none;padding:10px 16px;border-radius:11px;font-family:'DMSans';font-weight:700;font-size:.9rem;transition:.15s}
.modal-badge .mlink:hover{background:rgba(245,176,67,.24);border-color:var(--amber)}
.modal-card{position:relative;display:flex;align-items:center;justify-content:center;background:transparent}
.modal-card img{max-height:88vh;max-width:92vw;width:auto;height:auto;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.65);display:block}
.modal-card .modal-close{top:-6px;right:-6px}
@media(max-width:640px){.modal-card .modal-close{top:6px;right:6px}}

/* ===================== v2 (23-ago-2026): portada, cronología, tour ===================== */
.nav .wrap{gap:4px}
.nav a.lnk{font-size:.82rem;padding:6px 9px}
.tour-start,.tour-aqui{white-space:nowrap;font-family:'DMSans';font-weight:700;font-size:.78rem;letter-spacing:.04em;background:linear-gradient(180deg,rgba(245,176,67,.22),rgba(245,176,67,.1));border:1px solid #6a5022;color:var(--amber);border-radius:999px;padding:6px 12px;cursor:pointer;margin-left:6px}
.tour-start:hover,.tour-aqui:hover{background:rgba(245,176,67,.3);border-color:var(--amber)}
.small{font-size:.86rem}.muted{color:#6d8092}
/* HERO con vídeo */
.hero-video{padding:0;min-height:78vh;display:flex;align-items:center;justify-content:center;text-align:center}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.8)}
.hero-video .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,20,.35) 0%,rgba(8,12,20,.55) 55%,var(--bg) 100%)}
.hero-video .hero-inner{position:relative;z-index:2;padding:110px 22px 70px;max-width:900px}
.hero-video h1{font-size:clamp(3rem,9vw,6.4rem);letter-spacing:.06em;margin:.2em 0 0;text-shadow:0 0 40px rgba(55,224,236,.35)}
.hero-video .sub{font-family:'Unbounded';font-weight:300;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);font-size:clamp(.8rem,2vw,1.1rem);margin:.2em 0 1em}
.hero-video p{color:#d7e4ec;font-size:1.12rem;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.btn{display:inline-block;font-family:'DMSans';font-weight:700;font-size:.92rem;padding:12px 20px;border-radius:12px;border:1px solid #2a4656;background:rgba(16,26,40,.8);color:#eafcff;text-decoration:none;cursor:pointer;backdrop-filter:blur(6px);transition:.2s}
.btn:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.btn.primary{background:linear-gradient(180deg,#37e0ec,#1fb3c4);color:#05222a;border-color:#37e0ec}
.btn.primary:hover{color:#05222a;box-shadow:0 12px 34px rgba(55,224,236,.35)}
.btn.ghost{background:transparent}
/* planetas */
.planetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-top:26px}
.planeta{text-align:center;font-size:.82rem;color:var(--mut)}
.planeta img{width:100%;max-width:120px;filter:drop-shadow(0 8px 24px rgba(55,224,236,.25));transition:.25s}
.planeta:hover img{transform:scale(1.08) rotate(-3deg)}
.planeta b{display:block;color:#eafcff;font-family:'Unbounded';font-size:.86rem;margin-top:4px}
.planeta em{font-style:normal;display:block;font-size:.75rem}
/* tiles de navegación */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.tile{display:block;text-decoration:none;color:var(--ink);background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:22px;transition:.2s}
.tile:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 14px 40px rgba(55,224,236,.14)}
.tile .ic{font-size:1.8rem;display:block;margin-bottom:8px}
.tile b{display:block;font-family:'Unbounded';font-size:1.02rem;color:#eafcff}
.tile em{font-style:normal;color:var(--mut);font-size:.9rem;display:block;margin-top:6px}
/* trío de personajes */
.trio{display:flex;justify-content:center;align-items:flex-end;gap:8px;min-width:0;overflow:hidden}
.trio img{max-height:330px;max-width:32%;width:auto;object-fit:contain;object-position:bottom;filter:drop-shadow(0 12px 30px rgba(0,0,0,.6))}
.trio img:nth-child(2){max-height:360px;z-index:2}
/* 🔴 Vaeon sale enano al lado de NEBULA y el Capitan, y es el ANTAGONISTA: tiene que imponer.
   La causa no era el alto sino el ANCHO — su armadura es mucho mas ancha que las otras figuras,
   asi que topaba con max-width:32% y se quedaba corto de alto sin llegar a su limite. Se le suelta
   el ancho y se le sube el alto; NEBULA cede un poco para que los tres quepan sin recortarse.
   Solo afecta a los trios de TRES (la guia tiene de dos y de uno). */
/* 🔴 VAEON NO VA AL LADO: VA DETRAS. Puesto en fila era un señor mas del grupo. Es la Estatica —lo
   que se cierne sobre NEBULA y el Capitan—, asi que va al fondo, mas alto que los dos, en penumbra
   y a contraluz. Los drop-shadow siguen la SILUETA del png (no una caja): por eso parece luz por
   detras y no un halo pegado.
   OJO CON EL ALTO: un absolute con height:% se mide contra la caja del padre, que YA incluye el
   padding-top — poner 118% era perseguirse la cola (crecia 53px por encima y se los comia el
   overflow). Con 100% mide justo la caja entera, y como los otros dos solo ocupan el contenido,
   Vaeon queda exactamente esos 76px mas alto. Que es el efecto que se buscaba.
   Clase propia en vez de contar hijos: la guia tiene trios de dos y de uno y no se enteran. */
/* 🔴 EL «CORTE DE LUZ». `.trio` lleva overflow:hidden, y el resplandor de Vaeon chocaba contra esa
   caja: la luz se cortaba en recto y se veia el rectangulo. Aqui se suelta — Vaeon ya cabe (mide
   100%), asi que no hay nada que recortar, y el halo se apaga solo contra el fondo. Ademas se
   reparte en tres capas de radio creciente y opacidad decreciente: asi no tiene un borde donde
   termina, que es lo que delata a un halo pegado. */
/* 🔴 OJO CON LA MASCARA: recorta TODO lo que sale de la caja del elemento, asi que al ponerla para
   disolver el corte de abajo volvi a cortar el halo por los lados — el mismo problema que acababa
   de quitar, entrando por otra puerta. La solucion es darle caja de sobra: 120px de padding a los
   lados (compensados con margen negativo para no mover nada de sitio) para que el resplandor, que
   se difumina hasta 120px, quepa DENTRO. Asi los bordes de la mascara caen donde ya no se pinta
   nada, y lo unico que se nota es el desvanecido de abajo, que es lo que se buscaba. */
.trio-amenaza{position:relative;padding:76px 120px 0;margin:0 -120px;overflow:visible;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 38px),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 38px),transparent 100%)}
.trio-amenaza>img{position:relative;z-index:2;max-width:34%}
.trio-amenaza>img:nth-child(3){
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  z-index:0;max-height:none;max-width:none;height:100%;width:auto;
  opacity:.82;pointer-events:none;
  filter:brightness(.5) contrast(1.15) saturate(.8)
         drop-shadow(0 0 18px rgba(90,225,245,.30))
         drop-shadow(0 0 55px rgba(45,140,180,.30))
         drop-shadow(0 0 120px rgba(30,90,130,.26));
}
@media(max-width:760px){
  /* 🔴 SIN SANGRADO EN EL MÓVIL. El margen negativo saca el bloque 60 px por cada lado para que el
     resplandor de Vaeon se derrame fuera de la columna; en un escritorio sobra sitio y no se nota,
     pero a 390 px empuja la página 120 px de ancho y el dedo la arrastra de lado. Y una portada que
     se mueve al tocarla parece rota aunque no lo esté. Lo cazó la batería 64 emulando un móvil. */
  .trio-amenaza{padding:44px 0 0;margin:0}
  .trio-amenaza>img:nth-child(3){opacity:.72}
}
@media(max-width:760px){.trio img{max-height:220px}.trio img:nth-child(2){max-height:240px}
  .trio img:first-child:nth-last-child(3)~img:nth-child(3){max-height:270px}}
.trio img:only-child{max-width:100%}
.trio img:first-child:nth-last-child(2),.trio img:first-child:nth-last-child(2)~img{max-width:48%}
/* FAQ */
.faq{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:0;margin:10px 0}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:700;color:#eafcff;list-style:none;position:relative;padding-right:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:18px;top:12px;font-size:1.4rem;color:var(--teal)}
.faq[open] summary:after{content:"–"}
.faq>div{padding:0 20px 18px;color:var(--mut)}
/* YouTube lite */
.yt{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000;cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:.25s}
.yt:hover img{opacity:1;transform:scale(1.03)}
.yt .play{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(55,224,236,.92);color:#05222a;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.yt .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 10px;background:linear-gradient(180deg,transparent,rgba(4,8,14,.92));font-size:.8rem;color:#dbe7ee}
.yt .cap b{display:block;font-size:.9rem;color:#fff}.yt .cap em{display:block;font-style:normal;color:var(--amber)}
.yt .cap a{color:var(--teal2);font-size:.75rem}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.yt.on img,.yt.on .play,.yt.on .cap{display:none}
.yt-full{margin:20px 0}.yt-full .yt .cap{font-size:.9rem}
.yt-list{display:grid;gap:14px}.yt-list.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* cronología */
.tablewrap{overflow-x:auto}
table.mapa td{font-size:.88rem}
table.mapa .dot{width:34px;height:34px;vertical-align:middle;margin-right:2px;filter:drop-shadow(0 2px 6px rgba(55,224,236,.35))}
.semanas{display:grid;gap:12px}
.semana{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:18px}
.semana[open]{border-color:#2a5a66;box-shadow:0 16px 50px rgba(0,0,0,.35)}
.semana summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 20px}
.semana summary::-webkit-details-marker{display:none}
.semana .num{font-family:'Unbounded';font-weight:700;color:var(--teal);background:rgba(55,224,236,.1);border:1px solid #1f4a52;border-radius:10px;padding:8px 12px;white-space:nowrap;font-size:.86rem}
.semana .ttl b{display:block;color:#eafcff;font-family:'Unbounded';font-size:1rem}
.semana .ttl em{font-style:normal;color:var(--mut);font-size:.86rem}
.semana .meta{color:var(--mut);font-size:.78rem;white-space:nowrap}
.sem-body{padding:4px 20px 20px;border-top:1px solid var(--line)}
.sem-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;margin-top:14px}
@media(max-width:820px){.sem-grid{grid-template-columns:1fr}.semana summary{grid-template-columns:auto 1fr}.semana .meta{display:none}}
.sem-body h4{margin:14px 0 8px;font-family:'DMSans';font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.sem-body ul{margin:0;padding-left:18px;color:var(--ink)}
.minis{display:flex;flex-wrap:wrap;gap:10px}
.mini.badge{padding:6px;width:92px;margin:0}
.mini.badge img{max-width:70px}
.mini.badge figcaption{font-size:.75rem;color:var(--mut);margin-top:2px;line-height:1.2}
.consejo{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:14px;background:rgba(245,176,67,.07);border:1px solid #4a3a1e;font-size:.9rem}
.consejo img{width:58px;height:58px;object-fit:cover;object-position:top;border-radius:50%;border:2px solid var(--amber);flex:none}
details.foro{margin-top:16px;border:1px dashed #33506a;border-radius:14px}
details.foro summary{cursor:pointer;padding:12px 16px;color:var(--teal2);font-weight:700;list-style:none}
details.foro summary::-webkit-details-marker{display:none}
.foro-box{position:relative;padding:0 16px 14px}
.foro-box pre{white-space:pre-wrap;font-family:'DMSans';font-size:.92rem;line-height:1.55;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0;color:var(--ink)}
.foro-box .copy{position:absolute;right:26px;top:10px;background:var(--teal);color:#05222a;border:0;border-radius:8px;padding:6px 10px;font-weight:700;font-size:.76rem;cursor:pointer}
.foro-box small{display:block;margin-top:8px;color:var(--mut)}
/* geniallys */
.gens{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.gen{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:18px}
.gen .halo{width:96px;filter:drop-shadow(0 6px 18px rgba(55,224,236,.25))}
.gen .n{color:var(--teal);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.gen h3{margin:.2em 0 .4em;font-size:1.05rem;color:#eafcff}
.chip{display:inline-block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border-radius:999px;padding:3px 10px}
.chip.wip{background:rgba(245,176,67,.12);color:var(--amber);border:1px solid #4a3a1e}
.chip.ok{background:rgba(55,224,236,.12);color:var(--teal);border:1px solid #1f4a52}
.chip.done{background:rgba(140,160,180,.12);color:var(--mut);border:1px solid #2c3f52}
.embed-slot.big{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px}
/* documentos */
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.doc{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;text-decoration:none;color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;transition:.2s}
.doc:hover{border-color:var(--amber);transform:translateY(-2px)}
.doc .ext{font-family:'Unbounded';font-size:.75rem;font-weight:700;background:rgba(245,176,67,.14);color:var(--amber);border-radius:8px;padding:10px 0;text-align:center}
.doc b{display:block;font-size:.92rem;color:#eafcff}.doc em{font-style:normal;font-size:.8rem;color:var(--mut)}
.official.warn{border-color:#7a5a1e;color:#e8d6b0;display:block}
/* TOUR */
/* 🔴 POR ENCIMA DEL ELEMENTO ILUMINADO. `.tour-foco` se sube a z-index 1002 para escapar del velo
   —eso está bien— pero el tour entero vivía en 60: NEBULA y su cuadro de diálogo quedaban DETRÁS de
   la propia tarjeta que estaban señalando, medio tapados. Justo en el onboarding, que es la primera
   vez que alguien ve el sistema. El contenedor no pinta nada ni recibe clics (`pointer-events:none`,
   solo el cuadro los acepta), así que subirlo no tapa la página: solo pone a quien habla delante. */
.tour{position:fixed;inset:0;z-index:1010;display:none;pointer-events:none}
.tour.open{display:block}
.tour-box{position:fixed;right:18px;bottom:18px;display:flex;align-items:flex-end;gap:0;pointer-events:auto;max-width:min(640px,96vw)}
.tour-cap{width:190px;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.7));margin-right:-26px;z-index:2;position:relative}
.tour-panel{background:linear-gradient(180deg,#101a28,#0b1119);border:1px solid #2a5a66;border-radius:18px;padding:18px 20px 16px 40px;box-shadow:0 24px 70px rgba(0,0,0,.6);color:var(--ink);min-width:260px}
.tour-step{color:var(--amber);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.tour-panel h3{font-family:'Unbounded';margin:.3em 0 .4em;font-size:1.05rem;color:#eafcff}
.tour-panel p{margin:0;font-size:.92rem;color:#d7e4ec}
.tour-btns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.tour-btns button{font-family:'DMSans';font-weight:700;font-size:.8rem;padding:8px 12px;border-radius:9px;border:1px solid #2a4656;background:rgba(16,26,40,.9);color:#eafcff;cursor:pointer}
.tour-btns button.primary{background:var(--teal);color:#05222a;border-color:var(--teal)}
.tour-btns button:disabled{opacity:.4;cursor:default}
.tour-btns .tour-exit{margin-left:auto;color:var(--mut)}
/* 15-sep · el halo quedaba DEBAJO de los vecinos (Norberto, en las pestañas: «parece un problema de capas y de
   botones que se superponen»): el contorno se pinta con el elemento, y los hermanos que vienen detrás lo tapaban.
   `position:relative` + z-index lo sube por encima (ningún objetivo del tour es absolute/fixed/sticky). */
.tour-target{position:relative;z-index:4;outline:3px solid var(--teal);outline-offset:10px;border-radius:14px;box-shadow:0 0 0 6px rgba(55,224,236,.18),0 0 60px rgba(55,224,236,.35);animation:tourpulse 1.6s ease-in-out infinite}
/* lo pequeño y apretado (una pestaña, un botón en una línea): el halo se ciñe y no invade la fila de al lado */
.pest.tour-target{outline-offset:4px;border-radius:10px;box-shadow:0 0 0 4px rgba(55,224,236,.18),0 0 30px rgba(55,224,236,.35)}
#c-cambiar.tour-target{outline-offset:5px}
@keyframes tourpulse{0%,100%{outline-color:var(--teal)}50%{outline-color:var(--amber)}}
@media(max-width:640px){.tour-cap{width:120px;margin-right:-18px}.tour-panel{padding-left:30px}}
.tour-invite{position:fixed;left:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#101a28,#0b1119);border:1px solid #2a5a66;border-radius:16px;padding:10px 14px 10px 10px;box-shadow:0 18px 50px rgba(0,0,0,.55);font-size:.88rem;max-width:min(440px,92vw)}
.tour-invite img{width:64px;height:64px;object-fit:cover;object-position:top;border-radius:50%;border:2px solid var(--teal)}
.tour-invite .x{background:none;border:0;color:var(--mut);cursor:pointer;font-size:1rem}
/* tablero de reclutas */
.tab-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.tab-head h3{margin:.1em 0 0;font-size:1.3rem;color:#eafcff}
.pod .pts{font-size:.9rem}
table.rank td{vertical-align:middle}
table.rank tr.insrow td{padding-top:2px;padding-bottom:14px;border-bottom:1px solid var(--line)}
table.rank tr:not(.insrow) td{border-bottom:0}
.dots{display:flex;flex-wrap:wrap;gap:4px}
.dots .dot{width:38px;height:38px;filter:drop-shadow(0 2px 6px rgba(55,224,236,.35))}
.dots .dot.off{filter:grayscale(1) brightness(.35);opacity:.55}
.pers{display:flex;flex-wrap:wrap;gap:10px}
body.embed .nav,body.embed .hero,body.embed footer,body.embed #registro,body.embed #orden,body.embed #instalacion{display:none}
body.embed #tablero{padding:14px 0;border:0}
/* panel profes + foro dinámico */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px}
.tabs button{font-family:'DMSans';font-weight:700;font-size:.82rem;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--mut);cursor:pointer}
.tabs button.on{color:var(--teal);border-color:var(--teal);background:rgba(55,224,236,.1)}
.tabs .salir{margin-left:auto}
.buscar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0}
.buscar input{flex:1;min-width:220px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:#fff;font:inherit}
.btn.small{padding:6px 10px;font-size:.78rem;border-radius:9px}
.foro-nav{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px}
.foro-nav a{display:inline-block;min-width:34px;text-align:center;padding:6px 8px;border-radius:9px;border:1px solid var(--line);color:var(--mut);text-decoration:none;font-weight:700;font-size:.8rem}
.foro-nav a.past{color:#5f7484;border-style:dashed}.foro-nav a.on{color:#05222a;background:var(--teal);border-color:var(--teal)}
.foro-card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:22px}
.foro-card h2{margin:.3em 0 0;font-size:1.6rem}
/* Ya no es texto preformateado: son párrafos. `pre-wrap` aquí volvería a dibujar los saltos del
   fichero de origen, que es justo lo que cortaba las frases por la mitad. */
.foro-msg p{margin:0 0 .9em}
.foro-msg p:last-child{margin-bottom:0}
.foro-msg{font-family:'DMSans';font-size:1rem;line-height:1.6;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:14px 0;color:var(--ink)}
.foro-card h4{margin:16px 0 8px;font-family:'DMSans';font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
body.embed #panel,body.embed .foro-card,body.embed #validar{padding-top:0}
/* tickets visual */
.selrow{display:flex;gap:8px;flex-wrap:wrap}
.selrow select,#selPer{padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:#fff;font:inherit;max-width:100%}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 18px}
.kpi{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.kpi b{display:block;font-family:'Unbounded';font-size:1.6rem;color:var(--teal)}.kpi span{color:var(--mut);font-size:.8rem}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:10px}
.qcard{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px}
.qtxt b{display:block;font-size:.86rem;color:#eafcff;line-height:1.3}
.gauge{width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--c) var(--p),#1c2c40 0);display:flex;align-items:center;justify-content:center;position:relative}
.gauge:before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--bg2)}
.gauge b{position:relative;font-family:'Unbounded';font-size:1.15rem;color:#eafcff}
.hist{display:flex;gap:4px;align-items:flex-end;height:44px;margin-top:8px}
.hb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;font-size:.75rem;color:var(--mut)}
.hf{width:100%;background:linear-gradient(180deg,var(--teal),#1fb3c4);border-radius:4px 4px 0 0;min-height:2px}
.dudas{display:grid;gap:8px}
.duda{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:12px;padding:10px 14px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.duda .dq{grid-column:1/-1}.duda .dv{font-size:.98rem;color:#eafcff}
.duda.ok{border-left-color:var(--teal);opacity:.7}
/* generador de embeds */
.emb h3{margin-top:0}
.embrow{display:flex;gap:8px;align-items:stretch;margin:8px 0}
.embrow input,.embrow textarea{flex:1;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:#cfe3ea;font:inherit;font-size:.8rem;font-family:ui-monospace,Menlo,monospace;resize:vertical}
.qrbox{display:flex;gap:14px;align-items:center;margin-top:8px}.qrbox img{width:120px;border-radius:10px;background:#fff;padding:4px}
/* avatares */
.av{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--teal);box-shadow:0 4px 14px rgba(55,224,236,.25);vertical-align:middle;margin-right:10px;background:#0b1119}
.av.big{width:84px;height:84px;margin:6px auto 8px;display:block;border-width:3px}
td.who{white-space:nowrap}
.av.r2{border-color:#5ad0eb}.av.r3{border-color:var(--amber);box-shadow:0 4px 16px rgba(245,176,67,.35)}.av.r4{border-color:#ffd56a;box-shadow:0 0 0 3px rgba(255,213,106,.25),0 6px 22px rgba(255,213,106,.45)}
.rango{color:var(--amber);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
td.who{display:flex;align-items:center;gap:6px}td.who>span{display:inline-block;line-height:1.25}

/* ---- La Nave del Recluta ---- */
/* La barra de accesos de la Nave: ANCLADA bajo el menú y con los botones grandes. Estaba debajo
   de la ficha, así que para registrar un logro había que hacer scroll — y lo que no se ve, no se
   usa. Participar es voluntario: si cuesta encontrarlo, no lo encuentran. */
.nave-barra{position:sticky;top:54px;z-index:15;margin:0 0 22px;padding:10px 0;
  background:rgba(8,12,20,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nave-accesos{display:grid;gap:10px;margin:0;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.nave-accesos .acc{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--card);color:inherit;text-decoration:none;
  transition:transform .12s ease,border-color .12s ease}
.nave-accesos .acc b{font-size:1.02rem;line-height:1.2}
.nave-accesos .acc em{font-style:normal;font-size:.78rem;color:var(--mut)}
.nave-accesos .acc:hover{transform:translateY(-2px);border-color:var(--teal)}
.nave-accesos .acc.primary{background:linear-gradient(180deg,rgba(14,127,140,.30),rgba(14,127,140,.14));
  border-color:var(--teal)}
@media(max-width:620px){.nave-barra{top:0}.nave-accesos .acc em{display:none}}
body.embed .nave-barra{top:0}
.nave-mapa{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;margin-top:14px}
.nave-pl{position:relative;text-align:center;padding:14px 8px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.nave-pl img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(0,0,0,.55))}
.nave-pl b{display:block;font-size:.85rem;margin-top:6px}
.nave-pl em{display:block;font-style:normal;font-size:.75rem;color:var(--mut);line-height:1.35;margin-top:2px}
.nave-pl.on{cursor:pointer;transition:.2s}
.nave-pl.on:hover{border-color:var(--teal);transform:translateY(-3px)}
.nave-pl.lock{opacity:.55}
.nave-pl.lock img{filter:grayscale(1) brightness(.45) contrast(1.15)}
.nave-pl.actual{border-color:var(--amber);box-shadow:0 0 22px rgba(245,176,67,.22)}
.nave-pl.actual::before{content:'ESTÁS AQUÍ';position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--amber);color:#161006;font-size:.75rem;font-weight:800;letter-spacing:.08em;padding:1px 8px;border-radius:8px;white-space:nowrap}
#nave-detalle{margin-top:16px}
#nave-detalle .foro-card{margin-bottom:16px}
.nave-perfil{display:flex;gap:16px;align-items:center;margin-bottom:12px}
/* 30-ago · el personaje manda en la ficha (petición de Norberto): de sello de 92px a retrato.
   En móvil baja un punto para no comerse la pantalla. */
/* 🔴 «El avatar debe ser más grande, es importante». Y lo es: el personaje ES la recompensa de
   todo el sistema —evoluciona con el nivel— y estaba del tamaño de una foto de carnet mientras
   media tarjeta quedaba en blanco debajo. */
/* `flex:0 0 auto` o el flex se lo come: pedía 230 y se quedaba en 175. */
/* El <button> que envuelve el avatar es un item flex: sin esto se encogía y, con `max-width:100%`,
   arrastraba la imagen con él — pedía 230 px y salía a 175. */
.nave-perfil .av-lupa{flex:0 0 auto;width:230px}
@media (max-width:640px){.nave-perfil .av-lupa{width:150px}}
.nave-perfil img.av{width:230px;height:230px;flex:0 0 auto;border-radius:20px;object-fit:cover;
  border:1px solid var(--line);box-shadow:0 10px 34px rgba(0,0,0,.45)}
@media (max-width:640px){.nave-perfil img.av{width:150px;height:150px}}
.progress{height:10px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid var(--line)}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--amber))}
.badge-col{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;margin-top:8px}
.badge-col .b{text-align:center;font-size:.75rem;color:var(--mut);line-height:1.25}
.badge-col img{width:60px;height:60px;object-fit:contain}
.badge-col .b span{display:block;margin-top:2px}
.badge-col .no{opacity:.75}
.badge-col .no img{filter:grayscale(1) brightness(.35)}
/* 🔴 SIMETRÍA DE LAS TARJETAS. La rejilla ya las hacía igual de altas, pero dentro cada cosa
   flotaba donde el texto la dejara: con un título de tres renglones y otro de uno, los botones de
   una misma fila caían a tres alturas distintas y la cuadrícula parecía rota.
   El cuerpo crece y el pie se pega abajo, así que el botón de todas cae en el mismo eje. */
.nave-rec .rec-card{display:flex;flex-direction:column}
.nave-rec .rec-card .rec-cuerpo{flex:1 1 auto}
.nave-rec .rec-card .rec-pie{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;
  align-items:flex-start;gap:9px}
.nave-rec .rec-card .rec-pie .btn{width:100%;justify-content:center;text-align:center}
.nave-rec .rec-card .rec-pie .chip{margin:0}
.nave-rec .rec-card .pts{font-size:1.3rem;font-weight:800;color:var(--amber);margin:.2em 0;
  font-variant-numeric:tabular-nums}
/* La que no cuesta créditos no grita un número: dice lo que es. */
.nave-rec .rec-card .pts.libre{font-size:1rem;color:var(--teal);letter-spacing:.01em}
.nave-rec .rec-card.lock{opacity:.6;border-style:dashed}
.nave-rec .rec-card.agotada{opacity:.62}
.nave-rec .rec-card.agotada .pts{color:var(--mut)}
.tour-cap.nebula{filter:drop-shadow(0 0 24px rgba(55,224,236,.35))}
body.embed .nave-accesos{margin-top:0}
#nave-app section{margin-top:34px}
#nave-app .selrow select{min-width:260px}
.nave-login .nebula-mini{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(55,224,236,.4))}
.nave-login input[type=email]{flex:1;min-width:220px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:#fff;font:inherit}
/* La puerta para quien AUN no se ha alistado. Va separada con una linea y su rotulo: si se mezcla
   con el campo del correo, el que no esta alistado no la ve — que es justo lo que pasaba. */
.nave-alta{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);position:relative;text-align:center}
.nave-alta .o{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--card,#0f1726);
  padding:0 12px;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mut,#8fa3bf)}
.nave-alta .btn{margin-top:4px}
.nave-alta p{margin:10px auto 0;max-width:56ch}
.nave-bio{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--teal);background:rgba(55,224,236,.06);border-radius:0 10px 10px 0;font-style:italic;font-size:.92rem;color:var(--ink)}
.btn.grande{font-size:1.02rem;padding:14px 22px;font-weight:800}
.doc-card{border-color:var(--teal)}

/* ---- distintivo de versión (docente / alumnado) ---- */
.modo{display:inline-block;vertical-align:middle;margin-left:10px;padding:3px 10px;border-radius:999px;
  font-family:'DMSans',system-ui,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.modo.docente{background:rgba(245,176,67,.16);color:var(--amber);border:1px solid rgba(245,176,67,.45)}
.modo.recluta{background:rgba(55,224,236,.14);color:var(--teal);border:1px solid rgba(55,224,236,.45)}
.modo i{font-style:normal}
@media(max-width:760px){.modo{margin-left:6px;padding:2px 7px;font-size:.75rem}.modo i{display:none}}
.panel .tit .modo{display:inline-block}

/* ---- barra de carga (contactando con NEBULA / cargando panel) ---- */
.cargando{max-width:460px;margin:24px auto;text-align:center}
.cargando .txt{color:var(--mut);font-size:.92rem;margin-bottom:12px}
.cargando .barra{height:8px;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid var(--line);overflow:hidden}
.cargando .barra i{display:block;height:100%;width:30%;border-radius:6px;
  background:linear-gradient(90deg,transparent,var(--teal),var(--amber),transparent);animation:cargar 1.15s ease-in-out infinite}
@keyframes cargar{0%{transform:translateX(-110%)}100%{transform:translateX(430%)}}
.cargando .pista{margin-top:10px;color:var(--mut);font-size:.75rem}
.nebula-v{display:block;border-radius:14px;object-fit:cover}
.nebula-v.nebula-mini{width:88px;height:120px;filter:drop-shadow(0 0 18px rgba(55,224,236,.35))}
.nebula-v.tour-cap{width:auto;height:230px;border-radius:16px;filter:drop-shadow(0 0 26px rgba(55,224,236,.4))}
@media(max-width:760px){.nebula-v.tour-cap{height:150px}}

/* ---- extras de personalización (v3.5) ---- */
.titulo-recluta{display:block;font-style:italic;font-size:.75rem;color:var(--amber);margin-top:1px}
img.av.marco-oro{border:2px solid var(--amber) !important;box-shadow:0 0 14px rgba(245,176,67,.55)}
.foro-nav .lock{display:inline-block;min-width:26px;text-align:center;padding:4px 6px;border-radius:8px;color:#4a5a6c;border:1px dashed #2a3a4e;cursor:not-allowed;user-select:none}
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;margin-top:10px}
.album .c{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.album .c img{width:100%;display:block}
.album .c.no img{filter:grayscale(1) brightness(.3)}
.album .c.rar{border-color:rgba(96,208,236,.55)}
.album .c.epi{border-color:#a98cf0}
.album .c.epi:not(.no){box-shadow:0 0 12px rgba(169,140,240,.45)}
.album .c.leg{border-color:var(--amber)}
.album .c.leg:not(.no){box-shadow:0 0 12px rgba(245,176,67,.5)}
/* los dos marcadores de la ficha: xp (nivel) y créditos (bolsillo) */
.monedas{display:flex;flex-wrap:wrap;gap:10px;margin:.5em 0 .2em}
.monedas .m{display:inline-flex;align-items:baseline;gap:5px;padding:4px 12px;border-radius:999px;
  border:1px solid var(--line);font-size:.82rem;cursor:help}
.monedas .m b{font-size:1.05rem}
.monedas .m.xp{border-color:rgba(55,224,236,.45);color:var(--teal)}
.monedas .m.cred{border-color:rgba(245,176,67,.5);color:var(--amber)}
.album-cromos .serie{margin-top:16px}
.album-cromos .serie h4{margin:0;font-family:'Unbounded';font-size:.95rem;display:flex;align-items:center;gap:8px}
.album-cromos .serie h4 .cnt{font-family:'DMSans';font-size:.75rem;font-weight:700;letter-spacing:.04em;
  border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--muted)}
.album-cromos .serie h4 .cnt.full{border-color:var(--amber);color:var(--amber)}
.album-cromos .serie p{margin:.2em 0 0}
.serie-tit{margin:1.4em 0 .6em;font-family:'Unbounded';font-size:1rem;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.serie-tit em{font-family:'DMSans';font-style:normal;font-weight:400;color:var(--muted);font-size:.85rem}
.serie-tit .tag{font-family:'DMSans';font-size:.75rem;letter-spacing:.08em;color:var(--teal);text-transform:uppercase}
.album .nx{position:absolute;right:4px;bottom:4px;background:var(--amber);color:#161006;font-size:.75rem;font-weight:800;border-radius:7px;padding:0 5px}

/* v3.15 · álbum: sello de serie completa, contador de repetidos y racha de semanas */
.sello-serie{font-family:'DMSans';font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(245,176,67,.5);border-radius:999px;padding:1px 8px;white-space:nowrap}
.sello-serie.mini{font-size:.75rem;padding:0 5px;letter-spacing:.02em}
.album-cromos .serie.completa h4{color:var(--amber)}
.album-cromos .repes{margin:.6em 0 0;font-size:.9rem;color:var(--muted)}
.album-cromos .repes.listo{color:var(--text);background:rgba(96,208,236,.08);border:1px solid rgba(96,208,236,.35);
  border-radius:10px;padding:8px 12px}
.album-cromos .repes .btn.small{font-size:.78rem;padding:3px 10px;margin-left:6px;vertical-align:middle}
.chip-racha{display:inline-block;font-family:'DMSans';font-size:.75rem;font-weight:800;vertical-align:middle;
  color:#ffb347;background:rgba(255,140,50,.13);border:1px solid rgba(255,140,50,.4);border-radius:999px;
  padding:1px 8px;margin-left:6px;white-space:nowrap}
.rank .full{color:var(--amber)}

/* ---------- El vestuario de la Nave (v3.16) ---------------------------------------------------
   Skins y héroes en la misma rejilla, porque para el alumnado son lo mismo: cosas que ponerse.
   Lo que no tienes sale en sombra y no se puede pulsar — pero se VE, que es lo que pica. */
/* ===== EL DUELO (mini-ranking de 3 con frase de rivalidad) ===== */
.duelo{margin-top:14px}
.duelo h3{margin-bottom:10px}
.duelo-tabla{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.duelo-fila{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:.88rem;
  border-top:1px solid rgba(255,255,255,.05)}
.duelo-fila:first-child{border-top:0}
.duelo-fila .pos{font-size:.75rem;color:var(--mut);min-width:2.2em}
.duelo-fila b{color:var(--ink)}
.duelo-fila .pts{margin-left:auto;color:var(--teal);font-weight:700;font-size:.82rem}
.duelo-fila em{font-style:normal;font-size:.75rem;color:var(--mut);min-width:7em;text-align:right}
.duelo-fila.yo{background:rgba(55,224,236,.08)}
.duelo-fila.yo b{color:var(--teal)}
.duelo-msg{margin:10px 0 0;font-size:.9rem;line-height:1.55;padding:10px 12px;border-radius:10px;
  background:rgba(245,176,67,.08);border:1px solid rgba(245,176,67,.35)}

/* ===== LA VENTANA EMBEBIDA (formularios y Genially sin salir de la Nave) ===== */
.vent{position:fixed;inset:0;z-index:85;display:none}
.vent.open{display:block}
.vent-fondo{position:absolute;inset:0;background:rgba(4,8,14,.88);backdrop-filter:blur(3px)}
.vent-caja{position:absolute;inset:0;margin:auto;width:min(860px,94vw);height:min(88vh,900px);
  display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--line);
  background:#0b141d;box-shadow:0 30px 90px rgba(0,0,0,.8);overflow:hidden}
.vent-caja header{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.vent-caja header b{font-family:'DMSans';font-size:.92rem;color:var(--ink);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vent-aparte{font-size:.75rem;color:var(--mut);text-decoration:none;border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;flex:0 0 auto}
.vent-aparte:hover{color:var(--teal);border-color:var(--teal)}
.vent-x{flex:0 0 auto;background:none;border:1px solid var(--line);border-radius:50%;width:30px;height:30px;
  color:var(--ink);font-size:1.05rem;line-height:1;cursor:pointer}
.vent-x:hover{border-color:var(--teal);color:var(--teal)}
.vent-cuerpo{position:relative;flex:1;background:#fff}
.vent-cuerpo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vent-carga{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#55606a;background:#0b141d;font-family:'DMSans';font-size:.9rem}
body.vent-abierta{overflow:hidden}
@media (max-width:640px){.vent-caja{width:100vw;height:100vh;border-radius:0;border:0}}

/* ===== 29-ago · LA NAVE, POR PESTAÑAS =====
   La página crecía sin fin hacia abajo (ficha + vestuario + semana + planetas + recompensas +
   retos + tablero). Se descartó partirla en varias páginas: la Nave es la ÚNICA dirección que se
   le da al alumnado y multiplicarla es multiplicar los sitios donde perderse. */
.nave-tabs{display:flex;gap:6px;overflow-x:auto;margin:14px 0 4px;padding:10px 0 8px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  /* 30-ago · el menú se queda pegado arriba al hacer scroll: la página es larga y el menú es el volante */
  position:sticky;top:0;z-index:40;background:var(--bg,#0a101a)}
.nave-tab{display:flex;align-items:center;gap:7px;flex:0 0 auto;cursor:pointer;
  padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  color:var(--mut);font-family:'DMSans';font-size:.86rem;transition:.16s}
.nave-tab .ic{font-size:1rem;line-height:1}
.nave-tab b{font-weight:600}
.nave-tab:hover{border-color:var(--teal);color:var(--ink)}
.nave-tab.on{border-color:var(--teal);color:#04222a;background:var(--teal)}
.nave-tab:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ===== LOS RETOS, EXPLICADOS =====
   Cada planeta es un <details>: se ve el titular y se despliega lo largo. El del planeta de esta
   semana viene abierto, que es el que se va a leer. */
.reto-pl{border:1px solid var(--line);border-radius:14px;margin:10px 0;background:rgba(255,255,255,.02);overflow:hidden}
.reto-pl>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;padding:13px 15px;
  font-family:'DMSans';list-style:none}
.reto-pl>summary::-webkit-details-marker{display:none}
.reto-pl>summary::after{content:"▾";margin-left:auto;color:var(--mut);transition:transform .18s}
.reto-pl[open]>summary::after{transform:rotate(180deg)}
.reto-pl .pl-n{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.reto-pl>summary b{color:var(--ink);font-size:.98rem}
.reto-pl>summary em{font-style:normal;font-size:.78rem;color:var(--mut)}
.reto-pl .reto-cuenta{margin-left:auto;font-size:.78rem;color:var(--teal);font-weight:700}
.reto-pl[open]>summary{border-bottom:1px solid var(--line)}
.reto-pl.actual{border-color:var(--teal)}
.reto-pl.lock{opacity:.6}
.reto-pl.lock>summary{cursor:default}
.reto{padding:14px 15px;border-top:1px solid rgba(255,255,255,.05)}
.reto:first-of-type{border-top:0}
.reto header{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.reto header h4{margin:0;font-family:'DMSans';font-size:.92rem;color:var(--ink);flex:1 1 220px}
.reto-id{font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--amber);
  border:1px solid var(--amber);border-radius:6px;padding:1px 6px}
.reto-xp{font-size:.75rem;color:var(--teal);font-weight:700}
.reto-ya{font-size:.75rem;color:#43c98a}
.reto.ok{background:rgba(67,201,138,.06)}
.reto p{margin:0 0 6px;font-size:.86rem;line-height:1.62;color:var(--mut);white-space:pre-line}
.badge-col .b[data-key]{cursor:zoom-in;transition:transform .15s}
.badge-col .b[data-key]:hover{transform:translateY(-2px)}
.badge-col .b[data-key]:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.vest-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));margin-top:8px}
.vest{display:flex;flex-direction:column;gap:2px;padding:0 0 8px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:inherit;overflow:hidden;text-align:center;
  transition:transform .12s ease,border-color .12s ease}
.vest img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.vest b{font-size:.82rem;line-height:1.2;padding:6px 6px 0}
.vest em{font-style:normal;font-size:.75rem;color:var(--mut)}
.vest:hover:not(.no){transform:translateY(-3px);border-color:var(--teal)}
.vest.on{border-color:var(--oro,#f5b043);box-shadow:0 0 0 2px rgba(245,176,67,.35)}
.vest.on b::after{content:" ✓";color:var(--oro,#f5b043)}
.vest.guardando{opacity:.72}
.vest.guardando b::after{content:" …";color:var(--mut)}
/* El cartel de «ya llevas puesto X». Abajo y por encima de todo, pero sin bloquear: el alumno
   sigue probándose cosas mientras lo lee. */
.nave-aviso{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);z-index:90;
  max-width:min(440px,92vw);padding:11px 16px;border-radius:999px;border:1px solid var(--teal);
  background:rgba(9,18,26,.96);color:var(--ink);font-size:.86rem;text-align:center;
  box-shadow:0 14px 40px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.nave-aviso.ver{opacity:1;transform:translate(-50%,0)}
.nave-aviso.malo{border-color:var(--amber)}
@media (prefers-reduced-motion:reduce){.nave-aviso{transition:none}}
.vest.no{cursor:default;opacity:.85}
.vest.no b{color:var(--mut)}

/* --- la lupa del álbum: las cartas llevan texto y hay que poder leerlas --- */
.album .c[data-c]{cursor:zoom-in;transition:transform .12s ease,box-shadow .12s ease}
.album .c[data-c]:hover,.album .c[data-c]:focus-visible{transform:translateY(-3px) scale(1.03);outline:none;box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 0 2px var(--teal)}
.lupa{position:fixed;inset:0;z-index:80;display:none}
.lupa.open{display:block}
.lupa-fondo{position:absolute;inset:0;background:rgba(4,8,14,.86);backdrop-filter:blur(3px)}
.lupa-caja{position:absolute;inset:0;margin:auto;width:max-content;max-width:96vw;height:max-content;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px}
.lupa-carta{max-width:min(560px,88vw);max-height:76vh;width:auto;height:auto;display:block;border-radius:14px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.75)}
.lupa-carta.rar{border-color:rgba(96,208,236,.6)}
.lupa-carta.epi{border-color:#a98cf0;box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 40px rgba(169,140,240,.45)}
.lupa-carta.leg{border-color:var(--amber);box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 46px rgba(245,176,67,.5)}
/* 29-ago · el personaje, en grande. La imagen ya la tenemos a buena resolución; solo faltaba
   poder verla. El botón no debe parecer un botón: es la foto, y se nota al pasar por encima. */
.av-lupa{background:none;border:0;padding:0;margin:0;cursor:zoom-in;line-height:0;border-radius:50%;
  display:inline-block;transition:transform .18s,filter .18s}
.av-lupa:hover{transform:scale(1.04);filter:brightness(1.08)}
.av-lupa:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.lupa-av{max-width:min(520px,86vw);max-height:74vh;width:auto;height:auto;display:block;border-radius:18px;
  border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 46px rgba(55,224,236,.22)}
.lupa-pie{text-align:center;color:var(--ink);max-width:min(560px,88vw)}
.lupa-pie h4{font-family:'Unbounded';margin:0 0 .25em;font-size:1.05rem;color:#eafcff}
.lupa-pie p{margin:0}
.lupa-pie .rz{text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:.75rem}
.lupa-pie .rz.rar{color:#60d0ec}.lupa-pie .rz.epi{color:#a98cf0}.lupa-pie .rz.leg{color:var(--amber)}
.lupa-x{position:absolute;top:10px;right:14px;background:rgba(16,26,40,.9);border:1px solid #2a4656;color:#eafcff;font-size:1.4rem;line-height:1;width:38px;height:38px;border-radius:50%;cursor:pointer}
.lupa-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(16,26,40,.9);border:1px solid #2a4656;color:#eafcff;font-size:1.8rem;line-height:1;width:44px;height:44px;border-radius:50%;cursor:pointer}
.lupa-nav.prev{left:8px}.lupa-nav.next{right:8px}
.lupa-x:hover,.lupa-nav:hover{border-color:var(--teal);color:var(--teal)}
@media(max-width:640px){.lupa-carta{max-height:66vh}.lupa-nav{width:38px;height:38px;font-size:1.4rem}}

/* --- los tres rankings del tablero --- */
.rank-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
.rank-tab{font-family:'DMSans';font-weight:700;font-size:.86rem;padding:9px 16px;border-radius:999px;cursor:pointer;
  border:1px solid #2a4656;background:rgba(16,26,40,.7);color:#c8d8e4;transition:all .12s ease}
.rank-tab:hover{border-color:var(--teal);color:#eafcff}
.rank-tab.on{background:var(--teal);border-color:var(--teal);color:#05222a}
.rank-ayuda{margin:0 0 12px;max-width:68ch}
.rank th.on{color:var(--teal);border-bottom:2px solid var(--teal)}
.rank td.on{color:#eafcff;font-weight:700;background:rgba(55,224,236,.07)}
@media(max-width:640px){.rank-tab{flex:1 1 auto;text-align:center;padding:9px 10px;font-size:.8rem}}

/* --- ¡enhorabuena! el cartel de logro --- */
.logro{position:fixed;inset:0;z-index:90;display:none}
.logro.open{display:block}
.logro-fondo{position:absolute;inset:0;background:rgba(4,8,14,.9);backdrop-filter:blur(4px)}
.logro-caja{position:absolute;inset:0;margin:auto;width:max-content;max-width:min(560px,92vw);height:max-content;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 30px 24px;
  background:linear-gradient(180deg,#101a28,#0b1119);border:1px solid #2a5a66;border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.75),0 0 70px rgba(55,224,236,.16);
  animation:logroEntra .38s cubic-bezier(.2,1.4,.4,1)}
@keyframes logroEntra{from{opacity:0;transform:scale(.86) translateY(14px)}to{opacity:1;transform:none}}
.logro-eyebrow{font-family:'DMSans';font-weight:700;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.logro-caja h3{font-family:'Unbounded';margin:0;font-size:1.5rem;line-height:1.15;color:#eafcff}
.logro-sub{margin:0;color:#b9cbd8;font-size:.95rem;max-width:42ch}
.logro-mas{margin:6px 0 0;color:var(--amber);font-size:.86rem;max-width:44ch}
.logro-cuenta{color:var(--mut);font-size:.76rem;letter-spacing:.1em}
.logro-img{max-width:min(330px,74vw);max-height:52vh;width:auto;border-radius:14px;display:block}
.logro-caja.carta .logro-img{border:1px solid var(--line)}
.logro-caja.carta.rar .logro-img{border-color:rgba(96,208,236,.6)}
.logro-caja.carta.epi{box-shadow:0 30px 90px rgba(0,0,0,.75),0 0 80px rgba(169,140,240,.42)}
.logro-caja.carta.leg{border-color:var(--amber);box-shadow:0 30px 90px rgba(0,0,0,.75),0 0 100px rgba(245,176,67,.5)}
.logro-caja.figura .logro-img{max-width:min(240px,60vw);filter:drop-shadow(0 12px 34px rgba(0,0,0,.6))}
.logro-ok{margin-top:6px}
/* un destello detrás, sin pasarse */
.logro-chispas{position:absolute;inset:-40% -20%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(55,224,236,.20),transparent 62%);
  animation:logroPulso 2.6s ease-in-out infinite}
.logro-caja.leg .logro-chispas{background:radial-gradient(circle at 50% 42%,rgba(245,176,67,.26),transparent 62%)}
@keyframes logroPulso{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.logro-caja,.logro-chispas{animation:none}}
@media(max-width:640px){.logro-caja{padding:20px 18px}.logro-caja h3{font-size:1.2rem}}

/* --- solo el ranking (&solo=1): para incrustar en un Genially sin nada alrededor --- */
.solo-ranking .nav,.solo-ranking .hero,.solo-ranking footer,.solo-ranking section:not(:has(#tablero-app)){display:none}
/* El titulo y el pie viven DENTRO de la misma seccion que el tablero, asi que el :not(:has())
   de arriba no se los lleva: en un Genially salian la cabecera de la web y, peor, el enlace al
   generador de embeds del profesorado. Fuera los tres. */
.solo-ranking #tablero .eyebrow,.solo-ranking #tablero h2,.solo-ranking #tablero .lead{display:none}
.solo-ranking #tablero .wrap{padding-top:0}
.solo-ranking #tablero-app{padding:14px}
.solo-ranking .buscar{margin-top:10px}

/* --- panorama (&panorama=1): resultados de clase para PROYECTAR, 16:9 --- */
.panorama .nav,.panorama .hero,.panorama footer,.panorama .selrow,.panorama .official{display:none}
.panorama #tickets-app{padding:18px 24px}
.panorama .kpis{gap:22px;margin:0 0 18px}
.panorama .kpi{padding:16px 22px;border-radius:18px}
.panorama .kpi b{font-size:2.6rem;line-height:1}
.panorama .kpi span{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
/* solo el tema más reciente, y a dos columnas: valoraciones a la izquierda, voces a la derecha */
.panorama .semana:not(:first-of-type){display:none}
.panorama .semana summary{font-size:1.05rem}
.panorama .sem-body{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
/* 🔴 Son TRES hijos (valoraciones, el título «Dudas», las voces) en dos columnas, así que la rejilla
   los colocaba 1-2-1: el título se iba arriba a la derecha y los comentarios caían abajo a la
   izquierda, debajo de las gráficas. Visto al proyectarlo. Cada uno a su sitio, explícitamente. */
.panorama .sem-body > .qgrid{grid-column:1;grid-row:1 / span 2}
.panorama .sem-body > h4{grid-column:2;grid-row:1}
.panorama .sem-body > .dudas{grid-column:2;grid-row:2}
.panorama .qgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.panorama .dudas{max-height:46vh;overflow:auto}
.panorama .dudas .duda{font-size:1rem}
.panorama h4{margin-top:0}
@media(max-aspect-ratio:1/1){.panorama .sem-body{grid-template-columns:1fr}}

/* --- el pase de lista en directo (v3.27) --- */
/* La consigna se enseña en la sala del docente y se proyecta en clase: por eso es enorme, con
   espaciado entre letras, para que se lea desde el fondo del aula o en una videollamada. */
.pase-abierto{border:1px solid rgba(245,176,67,.55);background:linear-gradient(180deg,rgba(245,176,67,.10),transparent)}
.consigna{font-family:'Unbounded',system-ui,sans-serif;font-weight:800;font-size:clamp(3rem,12vw,7rem);
  letter-spacing:.18em;text-align:center;color:#f5b043;margin:.2em 0 .1em;
  text-shadow:0 0 28px rgba(245,176,67,.45)}
.pase-nave{border:1px solid rgba(245,176,67,.55);background:rgba(245,176,67,.10);border-radius:14px;
  padding:12px 16px;margin:0 0 14px;display:flex;flex-direction:column;gap:6px}
.pase-nave.hecho{border-color:rgba(55,224,236,.5);background:rgba(55,224,236,.10)}
.pase-fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pase-fila input{width:8ch;font-family:'Unbounded',system-ui,sans-serif;font-size:1.5rem;font-weight:800;
  letter-spacing:.22em;text-align:center;text-transform:uppercase;padding:6px 10px;border-radius:10px;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.35);color:#e2eaf1}

/* --- v3.29 · la ficha del recluta (tablero) y la valoracion en grande (tickets) --- */
tr.clicable,.qcard.clicable{cursor:zoom-in}
tr.clicable:hover td{background:rgba(55,224,236,.07)}
.qcard.clicable:hover{border-color:rgba(55,224,236,.5)}

.fr-caja,.zq-caja{position:relative;z-index:1;max-width:760px;width:min(92vw,760px);max-height:88vh;overflow:auto;
  background:#0b1018;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px 24px}
.fr-cab{display:flex;gap:16px;align-items:center;margin-bottom:10px}
.fr-av{width:104px;height:104px;border-radius:14px;object-fit:cover;background:#050810}
.fr-cab h3{margin:.1em 0}
.fr-bio{font-style:italic;color:#c9d6e2;border-left:3px solid rgba(245,176,67,.6);padding-left:12px;margin:14px 0}
.fr-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.fr-kpis div{background:rgba(255,255,255,.05);border-radius:12px;padding:10px;text-align:center}
.fr-kpis b{display:block;font-size:1.6rem;line-height:1.1;color:#37e0ec}
.fr-kpis span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#8fa3b4}
.fr-lista{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.fr-ins{display:flex;flex-direction:column;align-items:center;width:74px;font-size:.75rem;text-align:center;color:#b9c8d6}
.fr-ins img{width:46px;height:46px;object-fit:contain}
.fr-cro{display:flex;flex-direction:column;align-items:center;width:84px;font-size:.75rem;text-align:center;color:#b9c8d6}
.fr-cro img{width:72px;border-radius:8px;object-fit:cover;aspect-ratio:1000/1680}

.zq-preg{margin:.2em 0 .6em;font-size:1.5rem}
.zq-media{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.zq-media b{font-family:'Unbounded',system-ui,sans-serif;font-size:3.4rem;color:#37e0ec;line-height:1}
.zq-media span{color:#8fa3b4;font-size:.9rem}
.zq-barras{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:end}
.zb{text-align:center}
.zb-col{height:180px;display:flex;align-items:flex-end;background:rgba(255,255,255,.04);border-radius:10px;overflow:hidden}
.zb-fill{width:100%;background:linear-gradient(180deg,#37e0ec,rgba(55,224,236,.35));border-radius:10px 10px 0 0;min-height:3px}
.zb-n{font-family:'Unbounded',system-ui,sans-serif;font-weight:700;margin-top:8px;color:#e2eaf1}
.zb-d{font-size:.78rem;color:#8fa3b4}
.zb-d span{opacity:.75}
@media(max-width:620px){.fr-kpis{grid-template-columns:repeat(2,1fr)}.fr-cab{flex-direction:column;text-align:center}}

/* ---- «Cómo se hace»: los tres caminos (v3.43) ---------------------------------- */
.caminos{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.camino-tab{display:flex;align-items:center;gap:9px;background:#101722;border:1px solid #22304a;
  color:#cfe0f0;border-radius:12px;padding:12px 16px;cursor:pointer;font:inherit;font-size:15px;
  transition:border-color .18s,background .18s}
.camino-tab:hover{border-color:#37e0ec}
.camino-tab[aria-selected="true"]{border-color:#37e0ec;background:#0e2c33;color:#eafcff}
.camino-tab i{font-style:normal;font-size:20px;line-height:1}
.camino-tab b{font-weight:600}
.camino-tab span{display:block;font-size:12.5px;color:#8ba0b8;font-weight:400}
.camino-tab[aria-selected="true"] span{color:#8fd7e0}
.camino-intro{background:#101722;border:1px solid #22304a;border-radius:12px;padding:16px 18px;margin:16px 0 30px}
.camino-intro p{margin:0 0 8px}
.camino-intro p:last-child{margin:0}
.paso{display:grid;grid-template-columns:64px 1fr;gap:18px;margin:0 0 34px;scroll-margin-top:80px}
.paso-num{position:relative}
.paso-num .cap{width:64px;height:64px;border-radius:50%;background:#0e2c33;border:1px solid #22304a;
  object-fit:cover;object-position:top center;display:block}
.paso-num .n{display:block;text-align:center;font-size:12px;color:#8ba0b8;margin-top:7px;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.paso-cuerpo{min-width:0}
.paso h3{margin:2px 0 10px;font-size:20px}
.paso h3 a{color:#37e0ec}
.paso-hacer{background:#0d1420;border-left:3px solid #37e0ec;border-radius:0 8px 8px 0;
  padding:10px 14px;margin:0 0 14px;font-size:14.5px;color:#bcd0e4}
.paso-hacer code{background:#1b2536;padding:1px 5px;border-radius:4px}
.paso-voz{font-size:16.5px;line-height:1.62;color:#dbe7f3;margin:0 0 14px}
.paso figure{margin:0 0 14px}
.paso figure img{width:100%;border-radius:10px;border:1px solid #22304a;display:block}
.paso-falta{background:#241c0d;border:1px dashed #6b5a30;border-radius:10px;padding:22px 18px;
  color:#f5b043;font-size:14.5px;text-align:center}
.paso-falta b{display:block;font-size:15.5px;margin-bottom:5px}
.paso.aviso .paso-hacer{border-left-color:#f5b043}
.paso.aviso h3::before{content:"";display:inline-block;width:1.1em;height:1.1em;margin-right:6px;vertical-align:-.15em;background:url(../img/iconos/p/aviso.png) center/contain no-repeat}
.paso-audio{display:inline-flex;align-items:center;gap:8px;background:#101722;border:1px solid #22304a;
  color:#8fd7e0;border-radius:999px;padding:7px 15px;cursor:pointer;font:inherit;font-size:13.5px}
.paso-audio:hover{border-color:#37e0ec}
.paso-audio[data-sonando="1"]{background:#0e2c33;border-color:#37e0ec}
@media (max-width:640px){
  .paso{grid-template-columns:48px 1fr;gap:13px}
  .paso-num .cap{width:48px;height:48px}
  .paso-voz{font-size:15.5px}
}
/* el pase tapado: mismo hueco, sin la palabra (v3.43) */
.consigna-tapada{color:#3a4a5e;letter-spacing:.22em;user-select:none}
/* tickets por tema (v3.43) — saltar al tema que toca sin bajar por una pared de tarjetas */
.temachips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.temachip{display:inline-flex;align-items:center;gap:6px;background:#101722;border:1px solid #22304a;
  color:#cfe0f0;border-radius:999px;padding:7px 14px;cursor:pointer;font:inherit;font-size:14px;
  transition:border-color .16s,background .16s}
.temachip:hover{border-color:#37e0ec}
.temachip.on{background:#0e2c33;border-color:#37e0ec;color:#eafcff}
.temachip em{font-style:normal;font-size:12px;color:#8ba0b8;font-variant-numeric:tabular-nums}
.temachip.on em{color:#8fd7e0}
.temachip .pt{font-style:normal;font-size:12px;font-weight:700;background:#f5b043;color:#1a1206;
  border-radius:999px;padding:1px 6px;margin-left:2px}
.minis{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.minis .mini{font-size:12px;background:#0d1420;border:1px solid #22304a;border-radius:6px;
  padding:2px 7px;color:#8ba0b8;font-variant-numeric:tabular-nums}
.minis .mini b{color:#cfe0f0;font-weight:600}
.minis .mini.baja{border-color:#7a3b3b;color:#e59b9b}
.minis .mini.baja b{color:#ff9d9d}
@media (max-width:640px){.temachip{padding:6px 11px;font-size:13px}}

/* La radiografía completa de la ficha (v3.43): se enseña TODO el catálogo, y lo que aún no se
   tiene queda apagado. Mismo lenguaje que el álbum de la Nave, para no mantener dos estilos. */
.fr-ins.no img,.fr-cro.no img{filter:grayscale(1) brightness(.32);}
.fr-ins.no em,.fr-cro.no em{color:#5d6b7a}
.fr-cro img{border:1px solid var(--line)}
.fr-cro.rar img{border-color:rgba(96,208,236,.55)}
.fr-cro.epi img{border-color:#a98cf0}
.fr-cro.epi:not(.no) img{box-shadow:0 0 10px rgba(169,140,240,.45)}
.fr-cro.leg img{border-color:var(--amber)}
.fr-cro.leg:not(.no) img{box-shadow:0 0 10px rgba(245,176,67,.5)}
.fr-cnt{font-size:.75rem;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;margin-left:9px;color:#8fa3b4}
.fr-cnt.full{border-color:var(--amber);color:var(--amber)}
.fr-pc{font-size:.75rem;color:#5d6b7a;margin-left:7px;font-variant-numeric:tabular-nums}
.fr-bio.muted{color:#6f7f8f;font-style:normal;border-left-color:var(--line)}
/* datos privados tapados en la sala del docente (v3.44) */
.tapado{letter-spacing:.08em;color:#4a5a6b;user-select:none}

/* La puerta del profesorado (v3.45) — tapa la página hasta que se valida el PIN */
html.cerrado body > *:not(nav):not(#puerta){display:none!important}
html.cerrado{background:#080c14}
#puerta{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,#0e1c2b 0%,#080c14 70%)}
.puerta-caja{max-width:440px;width:100%;background:#101722;border:1px solid #22304a;
  border-radius:18px;padding:26px 24px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.puerta-caja h2{margin:.2em 0 .4em}
.puerta-caja input{flex:1;padding:11px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);color:#fff}
.puerta-mal{color:#ff9d9d;font-size:.9rem;margin:.4em 0}
/* las dos puertas de la portada (v3.45) */
.puerta-tile{display:block;text-decoration:none;color:inherit;transition:border-color .18s,transform .18s}
.puerta-tile:hover{border-color:#37e0ec;transform:translateY(-2px)}
.puerta-tile .ic{font-size:2.2rem;display:block;margin-bottom:.3em}
.puerta-tile h3{margin:.1em 0 .4em}
.puerta-tile p{color:#b9c8d6;font-size:.95rem}
.btn.grande{font-size:1.02rem;padding:13px 22px}

/* «Cómo se hizo» de la portada: tarjeta de herramienta con su icono y su papel arriba. El boton
   de apoyo es discreto a proposito — la seccion explica, no vende. */
.comohizo .ch-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.comohizo .ch-top .ic{font-size:30px;line-height:1;flex:none}
.comohizo .ch-top h3{margin:2px 0 0}
.comohizo .eyebrow{margin:0}
.btn.peq{font-size:13px;padding:6px 12px;margin-top:12px}

/* El proceso, paso a paso: numero grande a la izquierda, texto a la derecha. Sin tarjetas — es una
   lectura seguida, no un menu de opciones. */
.pasos-proc{margin:18px 0 0;border-left:2px solid var(--line);padding-left:0}
.paso{display:flex;gap:16px;align-items:flex-start;padding:16px 0 16px 20px;margin-left:-2px;
  border-left:2px solid transparent}
.paso:hover{border-left-color:var(--teal)}
.paso-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--teal);font-weight:700;font-size:15px;margin-top:1px}
.paso h3{margin:3px 0 6px;font-size:17px}
.paso p{margin:0}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:26px 0 8px}
.cifra{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.cifra b{display:block;font-family:"Unbounded","DM Sans",sans-serif;font-size:26px;color:var(--teal);line-height:1.1}
.cifra span{display:block;font-weight:500;font-size:14px;margin-top:2px}
.cifra em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:3px}
@media(max-width:640px){.paso{padding-left:12px;gap:12px}}

/* La tabla del casting: tres columnas, la ultima gris. Scroll propio en movil — la pagina nunca
   se desplaza en horizontal. */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.casting{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px;min-width:520px}
table.casting th{text-align:left;font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:0 14px 8px 0;border-bottom:1px solid var(--line)}
table.casting td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.casting tr:last-child td{border-bottom:0}
table.casting td b{display:block}
table.casting td em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:2px}
table.casting td.nota{color:var(--ink-2);font-size:14px}

/* Logos de las herramientas. Van sobre una baldosa blanca redondeada —como un icono de app— porque
   cada marca trae sus propios colores y varias son oscuras: sobre el fondo del sitio desaparecerian.
   Y pequeños a proposito: identifican, no condecoran. */
.logo-app{flex:none;width:42px;height:42px;border-radius:10px;background:#fff;display:grid;
  place-items:center;padding:7px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.logo-app img{width:100%;height:100%;object-fit:contain;display:block}
.logo-app.peq{width:30px;height:30px;border-radius:7px;padding:5px;display:inline-grid;vertical-align:-7px}
h2.con-logo{display:flex;align-items:center;gap:11px;flex-wrap:wrap}

/* ── El director de orquesta ──────────────────────────────────────────────────────────────────
   Va SOLO y arriba, no en fila con los brazos: las tres herramientas no se hablan entre ellas,
   hablan con el centro, y dibujarlas como cuatro iguales contaba mal el proceso. */
.director{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:24px 26px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.director::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--teal),transparent 70%)}
.dir-cab{display:flex;gap:18px;align-items:flex-start;margin-bottom:14px}
.dir-cab h3{margin:2px 0 6px;font-size:23px}
.dir-cab .eyebrow{margin:0}
.dir-entra{margin:0;font-size:16.5px;color:var(--ink);font-weight:500}
.logo-app.grande{width:62px;height:62px;border-radius:14px;padding:10px}
.dir-cuerpo p.small{margin:0 0 10px}
.dir-humano{margin:16px 0 0!important;padding:13px 15px;border-left:3px solid var(--amber);
  background:var(--surface-2);border-radius:0 8px 8px 0;font-size:14.5px;color:var(--ink-2)}
.director .btn{margin-top:16px}

/* el conector: tres lineas que bajan del centro hacia cada brazo */
.conector{display:flex;justify-content:space-around;height:30px;margin:0 8%;
  position:relative}
.conector::before{content:"";position:absolute;top:0;left:50%;width:1px;height:12px;background:var(--line)}
.conector span{width:1px;background:var(--line);align-self:flex-end;height:18px}
.conector::after{content:"";position:absolute;top:12px;left:16%;right:16%;height:1px;background:var(--line)}
.brazos{margin-top:0}
@media(max-width:760px){.conector{display:none}.dir-cab{flex-direction:column;gap:12px}}

/* Los GIF de ayuda: encuadrados y con sombra, para que se vea que son una captura y no parte de la
   pagina. Escalan solos en movil. */
.gif-ayuda{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 6px 24px rgba(0,0,0,.35);display:block}
ol.pasos-num{padding-left:22px;margin:14px 0}
ol.pasos-num li{margin-bottom:10px;font-size:15.5px;color:var(--ink-2);line-height:1.55}
ol.pasos-num li b{color:var(--ink)}

/* Aviso de que la ficha se está actualizando al cerrar un formulario. Abajo y discreto: informa,
   no interrumpe. */
.nave-refresco{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;
  background:var(--surface);border:1px solid var(--teal);color:var(--ink);
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;
  box-shadow:0 8px 28px rgba(0,0,0,.45);animation:sube .25s ease}
@keyframes sube{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* El resalte del tutorial: un halo que respira alrededor de lo que NEBULA está señalando. El
   z-index lo saca por encima del velo del tour, si no se quedaría debajo y no se vería. */
.tour-foco{position:relative;z-index:1002;border-radius:12px;
  box-shadow:0 0 0 3px var(--teal),0 0 0 10px rgba(55,224,236,.22),0 0 34px rgba(55,224,236,.45);
  animation:respira 1.8s ease-in-out infinite}
@keyframes respira{0%,100%{box-shadow:0 0 0 3px var(--teal),0 0 0 10px rgba(55,224,236,.22),0 0 34px rgba(55,224,236,.45)}
  50%{box-shadow:0 0 0 3px var(--teal),0 0 0 16px rgba(55,224,236,.10),0 0 44px rgba(55,224,236,.30)}}
@media (prefers-reduced-motion:reduce){.tour-foco{animation:none}}

/* ================= v3.60 · LA SESIÓN DE LA SEMANA (sesion.html) =================
   Un mazo de diapositivas para proyectar en clase. Dos zonas: la tira de preparación (.prep, solo
   para el docente) y el mazo (.mazo, lo que se ve en el aula). En pantalla completa el navegador
   solo enseña .mazo, así que la separación se sostiene sola y no depende de ningún `display:none`
   que se pueda olvidar. */
.prep{border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:0 0 18px;background:rgba(124,92,255,.06)}
.prep-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.prep-cab h3{margin:2px 0 0}
.prep .consejo{margin:12px 0 0;background:rgba(255,255,255,.03)}
.prep .foro-det{margin-top:12px}
.prep .foro-det summary{cursor:pointer;color:var(--teal2);font-size:.9rem}
.prep .foro-msg{white-space:pre-wrap;font-size:.86rem;line-height:1.55;margin:10px 0;max-height:320px;overflow:auto}
.aviso-per{margin-bottom:16px}

.sem-tira{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.sem-tira .s{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:transparent;
  color:var(--muted);font-weight:700;cursor:pointer;transition:.15s}
.sem-tira .s:hover{border-color:var(--teal);color:#fff}
.sem-tira .s.on{background:var(--teal);border-color:var(--teal);color:#05222a}

.mazo{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0,rgba(55,224,236,.10),transparent 60%),#070b12;outline:none}
.mazo:focus-visible{box-shadow:0 0 0 3px rgba(55,224,236,.45)}
.mazo .lienzo{min-height:min(62vh,560px);display:flex}
.mazo:fullscreen{border-radius:0;border:0}
.mazo:fullscreen .lienzo{min-height:calc(100vh - 92px)}
.mazo:fullscreen .dia{padding:4vh 6vw}
.mazo:fullscreen .dia h1{font-size:clamp(2.4rem,6vw,5rem)}
.mazo:fullscreen .dia h2{font-size:clamp(1.8rem,4.4vw,3.4rem)}
.mazo:fullscreen .dia .sub,.mazo:fullscreen .dia .cuando,.mazo:fullscreen .dia .pide p{font-size:clamp(1rem,1.7vw,1.5rem)}

.dia{flex:1;padding:38px 42px;display:flex;flex-direction:column;justify-content:center;gap:10px;position:relative}
.dia .kicker{color:var(--teal2);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;font-weight:800}
.dia h1{margin:.1em 0 0;line-height:1.05}
.dia h2{margin:.1em 0 .2em;line-height:1.1}
.dia .sub{color:var(--muted);max-width:64ch;margin:0}
.dia .grande{font-size:clamp(1.2rem,2.4vw,2rem);line-height:1.35;max-width:30ch;margin:.2em 0}

.dia.portada.con-planeta{padding-right:min(46%,520px)}
.dia.portada .planeta{position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(46%,520px);filter:drop-shadow(0 0 60px rgba(55,224,236,.35));pointer-events:none}
.dia.portada .planeta-nom{color:var(--teal2);margin:.3em 0 0}
.dia.portada .pill{margin-top:14px;display:inline-block}

.pasos-sesion{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px;max-width:44ch}
.pasos-sesion li{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:rgba(255,255,255,.02)}
.pasos-sesion .n{width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--teal);color:#05222a;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
.pasos-sesion .ico{font-size:1.3rem}
.pasos-sesion .t{font-size:1.02rem}

.dia.video .cuando{color:var(--amber);margin:0 0 14px;font-size:1.02rem}
/* 18-sep · Norberto: «mucho aire, vídeo pequeño: ¿puede ajustarse el contenido al tamaño de la pantalla?».
   El vídeo crece con la pantalla en vez de quedarse en 860 px: manda lo que quepa a lo alto (la diapositiva
   tiene su título encima), y el ancho sale solo del 16:9. En una pantalla pequeña sigue mandando el ancho. */
.dia.video .yt.grande{width:100%;max-width:min(100%,calc(74vh * 16 / 9));margin:0 auto}
.mazo:fullscreen .dia.video .yt.grande{max-width:min(100%,calc(78vh * 16 / 9))}
/* 18-sep · el recluta sigue al docente: mientras él emite, aquí no se navega (sí se interactúa) */
.mazo.ses-bloqueado .nav,.mazo.ses-bloqueado .barra-pasos .p{opacity:.3;pointer-events:none}
.ses-al-sigo.avisa{animation:sesAvisa .5s ease}
@keyframes sesAvisa{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.dia.mision .pide{border-left:3px solid var(--teal);padding:4px 0 4px 18px;margin-top:12px;max-width:70ch}
.dia.mision .pide .et{color:var(--teal2);font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;margin-bottom:6px}
.dia.mision .pide p{margin:0;font-size:1.05rem;line-height:1.55}

/* 18-sep · el ticket de la semana 1 va embebido (aún no hay respuestas que leer) */
.dia.ticket-form .tk-form{width:100%;height:min(62vh,620px);border:1px solid var(--line);border-radius:14px;background:#fff}
.dia .reto-ej{margin:12px 0 0}
/* 18-sep · el reto que aún no se ha explicado: en sombra, con su semana, sin poder registrarse */
.reto-sem.por-lanzar{opacity:.5;filter:grayscale(.55);border:1px dashed var(--line);border-radius:14px;padding:12px 14px;margin:0 0 10px;background:rgba(11,17,25,.5)}
.reto-sem.por-lanzar .rs-cab{display:flex;gap:8px;align-items:center;margin:0 0 6px}
.reto-sem.por-lanzar .rs-tit{display:block;margin:0 0 4px}
.ins-grid{display:flex;flex-wrap:wrap;gap:22px;margin-top:14px}
.ins-grid figure{margin:0;width:min(210px,42vw);text-align:center}
.ins-grid img{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 0 22px rgba(55,224,236,.35))}
.ins-grid figcaption b{display:block;margin-top:8px;font-size:.94rem}
.ins-grid figcaption em{display:block;font-style:normal;color:var(--muted);font-size:.78rem;margin-top:4px}
/* 18-sep · Norberto: «si solo hay una insignia por sesión, ponla más grande». Con una sola, ocupa lo que le
   corresponde: se proyecta y se ve desde el fondo del aula. */
.dia.insignias.una .ins-grid{justify-content:flex-start;gap:34px;align-items:center;margin-top:18px}
.dia.insignias.una .ins-grid figure{display:flex;align-items:center;gap:28px;width:auto;text-align:left;max-width:min(100%,900px)}
.dia.insignias.una .ins-grid img{width:min(34vh,300px);height:min(34vh,300px)}
.dia.insignias.una .ins-grid figcaption b{margin-top:0;font-size:clamp(1.2rem,2.2vw,1.9rem)}
.dia.insignias.una .ins-grid figcaption em{font-size:clamp(.9rem,1.3vw,1.1rem);margin-top:8px;max-width:38ch}
.dia.insignias.una .ins-grid figcaption q{font-size:clamp(.85rem,1.2vw,1rem)}
@media(max-width:700px){.dia.insignias.una .ins-grid figure{flex-direction:column;text-align:center;gap:14px}}
.ins-grid figcaption q{display:block;color:var(--amber);font-size:.8rem;margin-top:6px}

.cierre-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:16px}
.cierre-grid .c{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.02)}
.cierre-grid .c b{display:block;color:var(--teal2);margin-bottom:6px}
.cierre-grid .c p{margin:0 0 10px;font-size:.92rem;color:var(--muted)}
.dia.tuyo{align-items:flex-start}

.mazo .nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:rgba(8,12,20,.72);color:#fff;font-size:1.6rem;line-height:1;
  cursor:pointer;z-index:5;opacity:.45;transition:.15s}
.mazo .nav:hover{opacity:1;border-color:var(--teal)}
.mazo .nav.ant{left:10px}.mazo .nav.sig{right:10px}
.mazo .cuenta{position:absolute;right:14px;top:12px;font-size:.78rem;color:var(--muted);z-index:5}
/* 17-sep · pantalla completa y ventana aparte, dentro de la presentación: discretos hasta que se pasa por encima */
.mazo .ses-ctl{position:absolute;top:8px;right:10px;z-index:6;display:flex;align-items:center;gap:6px}
.mazo .ses-ctl .cuenta{position:static;margin-left:2px}
.ses-ic{width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);
  background:rgba(8,12,20,.72);color:#e9f0f6;cursor:pointer;opacity:.5;transition:opacity .15s,border-color .15s}
.ses-ic:hover,.ses-ic:focus-visible{opacity:1;border-color:var(--teal,#37e0ec)}
.ses-ic:focus-visible{outline:2px solid var(--teal,#37e0ec);outline-offset:2px}
/* si el navegador no deja pantalla completa (un Genially que no la permite), el mazo ocupa todo lo que tiene */
body.proyectando{overflow:hidden}
body.proyectando #mazo{position:fixed;inset:0;z-index:9600;border:0;border-radius:0;display:flex;flex-direction:column;background:var(--bg,#080c14)}
body.proyectando #mazo .lienzo{flex:1;min-height:0}
/* 15-sep · con 18 diapositivas los nombres salían cortados («Llama…», «Ranki…»): ahora cada botón mide lo que su nombre
   y, si no caben en una fila, pasan a dos */
.barra-pasos{display:flex;flex-wrap:wrap;gap:4px;padding:10px 14px;border-top:1px solid var(--line);background:rgba(4,8,14,.5)}
.barra-pasos .p{flex:1 1 auto;border:0;background:rgba(255,255,255,.10);height:auto;padding:6px 8px;border-radius:8px;
  cursor:pointer;color:var(--muted);font-size:.75rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:.15s}
.barra-pasos .p:hover{background:rgba(255,255,255,.18);color:#fff}
.barra-pasos .p.past{background:rgba(55,224,236,.25);color:#cfefF3}
.barra-pasos .p.on{background:var(--teal);color:#05222a;font-weight:800}
@media (max-width:720px){
  .dia{padding:26px 20px}
  .dia.portada.con-planeta{padding-right:20px}
  .dia.portada .planeta{position:static;transform:none;width:46%;display:block;margin:0 auto 10px}
  .barra-pasos{flex-wrap:nowrap}
  .barra-pasos .p span{display:none}
  .barra-pasos .p{flex:1;min-height:10px;padding:5px 0}
}

/* ---- v3.65 · «Entrar con Google» en la Nave ----
   El botón lo dibuja Google y no se puede reestilar (lo sirve en un iframe): lo único que hacemos es
   centrarlo y darle aire. El separador deja claro que escribir el correo sigue siendo posible —
   mientras el login sea una prueba, nadie puede quedarse fuera de su propia Nave. */
.g-nave{display:flex;justify-content:center;margin:14px 0 0;min-height:44px}
.o-bien{display:flex;align-items:center;gap:12px;margin:0 0 12px;color:var(--muted);font-size:.82rem}
.o-bien::before,.o-bien::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- el motor nuevo: alistarse y la consola del referente ---------- */
#alistarse .card,#crear .card{margin:0 0 16px}
#alistarse label,#crear label{display:block;margin:12px 0;font-weight:600}
#alistarse input,#alistarse textarea,#crear input,#crear select{display:block;width:100%;margin-top:5px;
  padding:11px 13px;border-radius:9px;border:1px solid #24304a;background:#0d1420;color:#e8eefc;
  font:inherit;font-weight:400}
#alistarse input:focus,#crear input:focus,#crear select:focus{outline:2px solid #4da3ff;border-color:transparent}
#alistarse label i,#crear label i{font-style:normal;font-weight:400;opacity:.65}
/* Los Comandantes: botones grandes, no un desplegable. El primer día se elige persona, no opción. */
.comandantes{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.comandante{display:flex;align-items:center;gap:9px;margin:0;padding:11px 15px;border:1px solid #24304a;
  border-radius:10px;background:#0d1420;cursor:pointer;font-weight:600}
.comandante:has(input:checked){border-color:#4da3ff;background:#14243c;box-shadow:0 0 0 1px #4da3ff inset}
.comandante input{width:auto;margin:0}
/* El campo con su botón al lado (el dado de los alias): no debe partirse en dos líneas. */
.con-boton{display:flex;gap:8px;align-items:stretch;margin-top:6px}
.con-boton input{flex:1;margin-top:0}
.con-boton .btn{flex:0 0 auto;white-space:nowrap;align-self:stretch}
@media(max-width:520px){.con-boton{flex-wrap:wrap}.con-boton .btn{width:100%}}
/* Las aclaraciones que de verdad importan (qué datos son reales, qué ve la clase). No es un
   «small muted» más: si se lee como letra pequeña, no se lee. */
.aclara{margin:10px 0 4px;padding:11px 14px;border-left:2px solid #4da3ff;background:#0f1a2b;
  border-radius:0 9px 9px 0;font-size:.94rem;line-height:1.6;color:#c7d6ee}
.aclara b{color:#e8eefc}
.aclara.epica{border-left-color:#ffd166;background:#1a1608;font-size:1.02rem;color:#ffd166;font-style:italic}
.aclara.epica span{display:block;margin-top:6px;font-style:normal;font-size:.9rem;color:#b9c6dc}
/* Elegir personaje: la rejilla a la izquierda y el elegido EN GRANDE a la derecha. A 94 píxeles no
   se distingue lo que se está eligiendo, y es una decisión para todo el curso. */
/* 🔴 SIN AIRE MUERTO. El retrato grande medía ~275 px de alto y la rejilla de caritas, a 94 px en
   dos filas, unos 200: la caja se quedaba con media pantalla vacía debajo de las miniaturas. Y las
   caritas eran tan pequeñas que no se distinguía lo que se estaba eligiendo — que es una decisión
   para todo el curso. Ahora la rejilla ESTIRA sus filas hasta la altura del retrato: el hueco se
   convierte en tamaño de miniatura, que es justo donde hacía falta. */
.elegir-avatar{display:grid;grid-template-columns:1fr 250px;gap:16px;align-items:start;margin-top:8px}
.avatar-grande{margin:0;display:flex;flex-direction:column}
.avatar-grande img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;flex:0 0 auto;
  border:2px solid #ffd166;box-shadow:0 0 22px rgba(255,209,102,.28);background:#0b1119;display:block}
.avatar-grande figcaption{margin-top:8px;text-align:center;font-size:.88rem;color:#9fb0ce}
@media(max-width:760px){
  .elegir-avatar{grid-template-columns:1fr}
  /* En móvil el grande va ARRIBA: si va debajo de la rejilla hay que hacer scroll para ver lo que
     acabas de tocar, que es justo lo que este bloque venía a arreglar. */
  .avatar-grande{order:-1;position:static;max-width:220px;margin:0 auto}
}
/* Las tres herramientas de clase, arriba de la sala del docente. Grandes porque se buscan con la
   clase empezando, no leyendo. */
.herramientas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:12px 0 8px}
.herr{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:14px;
  background:#0d1420;border:1px solid #24304a;text-decoration:none;color:#e8eefc;transition:all .16s}
.herr:hover{border-color:var(--teal);background:rgba(55,224,236,.07);transform:translateY(-2px)}
.herr .ic{font-size:1.6rem;line-height:1}
.herr b{font-size:1rem}
.herr em{font-style:normal;font-size:.84rem;color:#9fb0ce;line-height:1.45}
@media (prefers-reduced-motion:reduce){.herr{transition:none}.herr:hover{transform:none}}

/* El enlace de alistamiento en la sala del docente: es el único que TIENE que repartir. */
.acc-alta{background:#0c1a14;border:1px solid #2a4a3a;border-radius:12px;padding:14px 16px;margin:10px 0 14px}
.acc-alta b{display:block;margin-bottom:7px}
.acc-alta code{display:block;word-break:break-all;font-size:.84rem;background:#0a1018;border:1px solid #24304a;
  border-radius:8px;padding:9px 11px;color:#c9dbe9;user-select:all}
.acc-alta span{display:block;margin-top:8px}

/* El código de acceso, grande: se dicta en voz alta en clase. */
.codigo-grande{font-family:'Unbounded',monospace;font-size:2.2rem;letter-spacing:.28em;color:var(--teal);
  margin:6px 0 10px;text-align:center;background:#0a1018;border:1px solid #1d4a52;border-radius:12px;
  padding:14px 10px;user-select:all}
.btn.peligro{border-color:#a33;color:#ff9d9d}
.btn.peligro:hover{background:#2a1420;border-color:#ff6b6b;color:#fff}

/* ═══════════ EL AULA · el puesto de mando dentro del Genially ═══════════
   Se proyecta o se mira en un embed estrecho: todo grande, nada de tablas de ocho columnas. */
/* 18-sep · Norberto: «el aula tiene mucho aire en pantalla completa; ¿puede adaptarse al tamaño?». En un embed
   estrecho (dentro del Genially) sigue en una columna de 760 px, que es lo cómodo; en una pantalla grande se
   ensancha y reparte lo de clase en columnas, para no dejar medio monitor vacío. */
#aula .wrap{max-width:760px}
@media (min-width:1100px){
  #aula .wrap{max-width:min(1500px,94vw)}
}
@media (min-width:1500px){ #aula .wrap{font-size:1.04rem} }
.au-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:0 0 12px;
  border-bottom:1px solid #24304a}
.au-quien{display:flex;flex-direction:column;line-height:1.25}
.au-quien b{font-size:.98rem}
.au-grupo{margin-top:2px;padding:4px 9px;border-radius:8px;border:1px solid #24304a;background:#0b1119;
  color:#9fb0ce;font:inherit;font-size:.84rem;max-width:200px}
.au-grupo:focus{outline:2px solid var(--teal);outline-offset:1px}
.au-tabs{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap}
.au-t{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid #24304a;
  background:#0b1119;color:#9fb0ce;font:inherit;font-size:.88rem;cursor:pointer;transition:all .15s}
.au-t:hover{color:#fff;border-color:var(--teal);background:rgba(55,224,236,.08)}
.au-t.on{background:#14243c;border-color:#4da3ff;color:#fff;font-weight:600}
.au-t .i{font-size:1rem;display:inline-flex}
/* 18-sep · los iconos del aula (Magnific, lámina recortada), en lugar de emojis */
.au-ico{width:26px;height:26px;object-fit:contain;display:block;filter:drop-shadow(0 0 6px rgba(62,214,200,.35))}
.au-mini-reloj .au-ico{width:20px;height:20px;display:inline-block;vertical-align:middle}
.au-icono .au-ico{width:64px;height:64px;margin:0 auto}
.au-caja{background:#0d1420;border:1px solid #24304a;border-radius:16px;padding:28px 24px;text-align:center}
.au-icono{font-size:2.4rem;line-height:1;margin-bottom:8px}
.au-caja h2{margin:0 0 8px}
.au-sub{color:#9fb0ce;margin:0 0 16px}
.au-tarjeta{background:#0d1420;border:1px solid #24304a;border-radius:14px;padding:18px 20px;margin:0 0 14px}
.au-tarjeta h3{margin:0 0 8px;font-size:1.08rem}
.au-nota{margin:0 0 14px;padding:12px 15px;border-radius:11px;border-left:2px solid var(--teal);
  background:#0f1a2b;font-size:.92rem;line-height:1.55;color:#c7d6ee}
.au-nota.malo{border-left-color:var(--amber);background:#1d1608;color:#e6d3a8}
.au-nota b{color:#e8eefc}
.au-lista{margin:8px 0 0;padding-left:20px;line-height:1.7;font-size:.93rem;color:#c7d6ee}
.au-consejo{margin:12px 0 0;padding:11px 14px;border-left:2px solid var(--amber);background:#1a1608;
  border-radius:0 9px 9px 0;font-size:.9rem;color:#e6d3a8}
/* la llamada dentro del aula */
.au-llamada{background:#0d1420;border:1px solid #24304a;border-radius:14px;padding:18px 20px;margin:0 0 14px}
.au-llamada.viva{border-color:var(--amber);box-shadow:0 0 26px rgba(245,176,67,.2)}
.au-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:1.05rem}
.au-cuenta{font-variant-numeric:tabular-nums;color:var(--amber);font-weight:700}
.au-presentes{font-size:1rem;color:#9fb0ce;margin:10px 0 6px}
.au-presentes b{font-size:2.4rem;color:var(--teal);display:inline-block;vertical-align:middle;margin-right:8px;
  font-variant-numeric:tabular-nums}
.au-nombres{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px;min-height:26px}
.au-chip{padding:3px 11px;border-radius:999px;background:#14243c;border:1px solid #2a4a6a;font-size:.84rem;
  color:#cfe0f5}
/* la gente */
.au-gente{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.au-p{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:#0b1119;
  border:1px solid #24304a;font-size:.92rem}
.au-p b{font-weight:600}
.au-p span{color:var(--teal);font-size:.84rem;font-variant-numeric:tabular-nums}
.au-p.nuevo{border-color:#2a4a3a;background:#0c1a14}
.au-p.nuevo span{color:#4fd18b}
.au-p.frio{opacity:.6}
/* rankings del aula */
.au-rank{list-style:none;margin:10px 0 0;padding:0;counter-reset:r}
.au-rank li{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid #182238}
.au-rank li:first-child{border-top:0}
.au-rank li span{width:22px;text-align:center;color:#6d8398;font-variant-numeric:tabular-nums}
.au-rank li b{flex:1;font-weight:500}
.au-rank li em{font-style:normal;color:var(--teal);font-variant-numeric:tabular-nums}
.au-emb{width:30px;height:30px;object-fit:contain}
/* premiar */
.au-premios{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.au-pr{padding:12px 18px;border-radius:11px;border:1px solid #24304a;background:#0b1119;color:#e8eefc;
  font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .15s}
.au-pr:hover{border-color:var(--teal);background:rgba(55,224,236,.1);transform:translateY(-1px)}
.au-pr:disabled{opacity:.5;cursor:default;transform:none}
.au-pr.doble{border-color:#4a3a1a;color:var(--amber)}
.au-pr.carta{border-color:#3d2a52;color:#c79be6}
#au-pmsg{font-size:.95rem;color:#cfe0f5;min-height:22px}
@media(max-width:560px){
  .au-tabs{margin-left:0;width:100%}
  .au-t b{display:none}
  .au-t{flex:1;justify-content:center;padding:10px}
}
@media (prefers-reduced-motion:reduce){.au-t,.au-pr{transition:none}.au-pr:hover{transform:none}}

/* ═══════════ LLAMADA A FILAS ═══════════
   El botón que vive dentro del Genially. Se proyecta, así que todo va GRANDE: se tiene que leer
   desde la última fila del aula. */
#llamada .wrap{max-width:620px}
.ll-caja{background:#0d1420;border:1px solid #24304a;border-radius:18px;padding:30px 26px;text-align:center}
.ll-caja.ll-viva{border-color:var(--amber);box-shadow:0 0 34px rgba(245,176,67,.22)}
.ll-caja.ll-no{border-color:#24304a}
.ll-icono{font-size:2.6rem;line-height:1;margin-bottom:10px}
.ll-caja h2{margin:0 0 8px;font-size:1.5rem}
.ll-sub{color:#9fb0ce;margin:0 0 18px;font-size:1rem}
/* 🔴 De qué grupo es la llamada. Proyectado delante de una clase, con un grupo acabando y otro
   empezando, «Llamada abierta» sin nombre no dice lo único que hace falta saber. */
.ll-grupo{margin:0 0 4px;font-family:'Unbounded',sans-serif;font-size:1.05rem;font-weight:600;
  color:var(--teal);line-height:1.25;text-wrap:balance}
/* Y si hay más de uno vivo, que la elección no se pase por alto. */
.ll-ojo{margin:0 0 14px;padding:10px 13px;border-radius:10px;font-size:.87rem;line-height:1.45;
  color:#f0dcb4;background:rgba(242,181,68,.1);border:1px solid rgba(242,181,68,.32)}
.ll-pie{color:#6d8398;font-size:.86rem;margin:14px 0 0}
.ll-campo{display:block;text-align:left;margin:0 0 14px;font-size:.88rem;color:#9fb0ce}
.ll-campo select{width:100%;margin-top:6px;padding:11px 13px;border-radius:9px;border:1px solid #24304a;
  background:#0b1119;color:#e8eefc;font:inherit}
.ll-minutos{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 18px}
.ll-m{padding:9px 16px;border-radius:999px;border:1px solid #24304a;background:#0b1119;color:#9fb0ce;
  font:inherit;font-size:.9rem;cursor:pointer;transition:all .15s}
.ll-m:hover{border-color:var(--teal);color:#fff}
.ll-m.on{background:#14243c;border-color:#4da3ff;color:#fff;font-weight:600}
.ll-btn{padding:14px 28px;border-radius:12px;border:1px solid #4da3ff;background:#14243c;color:#fff;
  font:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:all .15s}
.ll-btn:hover{background:#1b3050;box-shadow:0 0 22px rgba(77,163,255,.35)}
.ll-btn.grande{font-size:1.2rem;padding:16px 34px;width:100%}
.ll-btn:disabled{opacity:.55;cursor:default}
.ll-min{padding:7px 15px;border-radius:9px;border:1px solid #24304a;background:transparent;color:#9fb0ce;
  font:inherit;font-size:.85rem;cursor:pointer}
.ll-min:hover{color:#fff;border-color:var(--teal)}
#ll-cuenta{font-variant-numeric:tabular-nums;color:var(--amber);font-weight:700;font-size:1.15rem}
.ll-lista{margin:16px 0;min-height:56px;display:grid;place-items:center}
.ll-cuantos{margin:0;font-size:2.4rem;line-height:1.1;color:var(--teal);font-variant-numeric:tabular-nums}
.ll-cuantos b{font-size:3.2rem;display:block}
.ll-esperando{color:#6d8398;margin:0;font-size:.92rem}
/* El aviso en la Nave del alumnado */
.pase-cuenta{font-variant-numeric:tabular-nums;color:var(--amber);font-size:.86rem;align-self:center}

/* ═══════════ LA BARRA ÚNICA DE LA NAVE (12-sep) ═══════════
   Sustituye a las dos filas de antes (pestañas 56 px + parrilla de accesos 89 px = 144 px fijos).
   Una sola de 56. Los contadores viven aquí para que la celebración de ganar xp se vea estés en la
   pestaña que estés. */
/* 🔴 SE PEGA DEBAJO DEL MENÚ DEL SITIO, no encima. El menú de STARGATE ya es `sticky top:0` con
   z-index 20: con `top:0` y z-index 30 esta barra se le montaba encima al hacer scroll y dejaba el
   menú de la web inalcanzable. Mismos valores que usaba la barra vieja, que ya lo tenía resuelto:
   47 px de hueco (lo que mide el menú) y por DEBAJO en z. */
.nave-barra-u{position:sticky;top:47px;z-index:15;display:flex;align-items:center;gap:14px;
  height:56px;padding:0 14px;margin:0 0 18px;
  background:rgba(10,16,24,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);border-radius:0 0 12px 12px}
.nb-yo{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:0}
.nb-cara{width:30px;height:30px;border-radius:9px;object-fit:cover;border:1.5px solid var(--amber);flex:0 0 auto}
.nb-yo b{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9ch}
.nb-nv{font-size:.75rem;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap}
.nb-tabs{display:flex;gap:2px;margin:0 auto;height:100%;align-items:stretch;min-width:0;overflow-x:auto;
  scrollbar-width:none}
.nb-tabs::-webkit-scrollbar{display:none}
.nb-t{position:relative;display:flex;align-items:center;gap:7px;padding:0 13px;background:none;border:0;
  color:var(--mut);font:inherit;font-size:.86rem;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:color .16s ease,background .16s ease}
.nb-t .i{font-size:1.02rem;transition:transform .16s ease,filter .16s ease}
.nb-t::after{content:"";position:absolute;left:9px;right:9px;bottom:0;height:2px;border-radius:2px 2px 0 0;
  background:var(--teal);transform:scaleX(0);transition:transform .18s ease}
.nb-t:hover{color:#fff;background:rgba(55,224,236,.07)}
.nb-t:hover .i{transform:translateY(-1px) scale(1.12);filter:drop-shadow(0 0 7px rgba(55,224,236,.7))}
.nb-t:hover::after{transform:scaleX(.55)}
.nb-t.on{color:#fff}
.nb-t.on::after{transform:scaleX(1);box-shadow:0 0 10px rgba(55,224,236,.6)}
.nb-t.on .i{filter:drop-shadow(0 0 8px rgba(55,224,236,.55))}
.nb-t:focus-visible{outline:2px solid var(--teal);outline-offset:-3px}
.nb-fin{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.nb-m{padding:3px 11px;border-radius:999px;font-size:.83rem;border:1px solid var(--line);
  background:rgba(0,0,0,.25);font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:box-shadow .25s,border-color .25s}
.nb-m.xp{color:var(--teal)}
.nb-m.cr{color:var(--amber)}
.nb-mas{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:rgba(0,0,0,.25);
  color:var(--mut);cursor:pointer;font-size:1rem;line-height:1;flex:0 0 auto;
  transition:color .16s,border-color .16s,background .16s}
.nb-mas:hover{color:#fff;border-color:var(--teal);background:rgba(55,224,236,.1)}
.nb-menu{position:absolute;right:12px;top:52px;width:262px;background:#0d1420;border:1px solid #24304a;
  border-radius:12px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.62);z-index:5}
.nb-menu a{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:8px;
  text-decoration:none;color:var(--ink,#e8eefc);font-size:.88rem}
.nb-menu a:hover{background:rgba(55,224,236,.09)}
.nb-menu a em{display:block;font-style:normal;font-size:.76rem;color:var(--mut);margin-top:1px}
.nb-menu hr{border:0;border-top:1px solid var(--line);margin:5px 8px}
.nb-fiesta{padding:4px 11px}
.nb-fiesta #sg-son.en-menu{position:static;width:auto;height:auto;padding:4px 10px;border-radius:8px;
  box-shadow:none}
/* 🔴 12-sep · EN UN MÓVIL DE 375 px NO CABÍAN LAS CINCO. Se veían tres y las otras dos quedaban
   detrás de un scroll horizontal que nadie iba a descubrir: media Nave escondida sin decirlo.
   La cuenta es esta: 375 menos el avatar (38), los contadores (≈125) y el «···» (40) dejaba 172 para
   cinco pestañas de 34. Faltaban 8 px y sobraba una cara que en el móvil no aporta nada — tu ficha
   está a un toque. Fuera el avatar, pestañas más juntas y contadores más estrechos. */
/* Incrustada en un Genially no hay menú de la web, así que se pega arriba del todo. */
body.embed .nave-barra-u{top:0}
@media(max-width:760px){
  .nave-barra-u{gap:6px;padding:0 7px}
  .nb-cara{display:none}
  .nb-yo b,.nb-nv{display:none}
  .nb-yo{display:none}
  .nb-tabs{margin:0;flex:1 1 auto;justify-content:space-around}
  .nb-t{padding:0 8px}
  .nb-t b{display:none}
  .nb-t .i{font-size:1.15rem}
  .nb-m{padding:3px 7px;font-size:.75rem}
  .nb-mas{width:28px;height:28px;font-size:.9rem}
  .nb-menu{right:6px;left:6px;width:auto}
}
/* Por debajo de 340 px (un iPhone SE en horizontal partido) puede seguir sin caber: entonces sí
   hace falta el scroll, y se avisa con un degradado en el borde en vez de cortar en seco. */
@media(max-width:340px){
  .nb-tabs{justify-content:flex-start;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);
    mask-image:linear-gradient(90deg,#000 85%,transparent)}
}
@media (prefers-reduced-motion:reduce){.nb-t,.nb-t .i,.nb-t::after,.nb-m{transition:none}}

/* ═══════════ LOS RETOS DE ESTA SEMANA ═══════════ */
/* 🔴 Sin margen arriba, esta tarjeta quedaba PEGADA a la rejilla de la ficha: bordes a cero
   distancia y, con las esquinas redondeadas de las dos, parecía que se montaban una encima de
   otra. No se solapaban (se midió: 0 px), pero leer «pegado» y leer «encima» es lo mismo para
   quien mira. El mismo hueco que usa la rejilla, 18 px. */
.retos-semana{margin:18px 0}
.rs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:12px}
.reto-sem{background:#101a28;border:1px solid #24304a;border-radius:13px;overflow:hidden;
  transition:border-color .16s}
.reto-sem:hover{border-color:#3a5578}
.reto-sem.hecho{border-color:#2a4a3a;background:#0c1a14}
.reto-sem > summary{list-style:none;cursor:pointer;padding:14px 16px;display:block}
.reto-sem > summary::-webkit-details-marker{display:none}
.reto-sem > summary:focus-visible{outline:2px solid var(--teal);outline-offset:-3px}
.rs-cab{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.reto-sem .chip{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;
  border-radius:999px;border:1px solid}
.reto-sem .chip.pend{color:var(--amber);border-color:#4a3a1a;background:#1d1608}
.reto-sem .chip.ok{color:#4fd18b;border-color:#1f4a38;background:#0d1f18}
.rs-tit{display:block;font-size:1.02rem;line-height:1.35;font-weight:600;margin-bottom:10px}
.rs-premio{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.rs-premio .p{padding:4px 11px;border-radius:8px;font-size:.88rem;font-weight:600;
  background:rgba(0,0,0,.3);border:1px solid #24304a;font-variant-numeric:tabular-nums}
.rs-premio .p.xp{color:var(--teal)}
.rs-premio .p.cr{color:var(--amber)}
.rs-premio .p.ins{color:#c79be6;display:inline-flex;align-items:center;gap:6px}
.rs-premio .p.ins img{width:20px;height:20px;object-fit:contain}
/* El gancho: la línea que se lee SIN abrir. Va entre el título y lo que se gana. */
.rs-gancho{margin:-4px 0 10px;font-size:.9rem;line-height:1.45;color:#a8bcd8}
/* Cuánta gente lo lleva ya. A la derecha del todo de la cabecera, callado. */
.rs-cuantos{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:.76rem;
  font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums}
.rs-cuantos svg{opacity:.75}
/* Lo que te llevas, con su nombre y qué es. */
/* 🔴 DOS MITADES: lo que hay que hacer a la izquierda, lo que te llevas a la derecha. Antes todo
   iba en columna y la recompensa acababa siendo una pegatina de 30 px al final, con media tarjeta
   en blanco debajo. Lo que mueve a hacer un reto es VER el premio: el personaje que recuperas tiene
   cara, y a 30 px no se le ve. */
.rs-cols{display:grid;grid-template-columns:1fr 128px;gap:14px;align-items:center}
.rs-izq{min-width:0}
.rs-der{display:flex;flex-direction:column;gap:8px;align-items:center}
.rs-trofeo{margin:0;text-align:center;width:100%}
.rs-trofeo img{width:100%;max-width:112px;aspect-ratio:1;object-fit:contain;display:block;margin:0 auto;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))}
.rs-trofeo figcaption{display:flex;flex-direction:column;line-height:1.25;margin-top:5px}
.rs-trofeo em{font-style:normal;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.rs-trofeo b{font-size:.8rem;font-weight:700}
.rs-trofeo.per b{color:#c79be6} .rs-trofeo.per img{filter:drop-shadow(0 0 16px rgba(199,155,230,.4))}
.rs-trofeo.esp b{color:var(--amber)} .rs-trofeo.esp img{filter:drop-shadow(0 0 16px rgba(242,181,68,.4))}
.rs-trofeo.hito b{color:#4fd18b} .rs-trofeo.hito img{filter:drop-shadow(0 0 16px rgba(79,209,139,.4))}
.rs-trofeo.ins b{color:var(--teal)} .rs-trofeo.ins img{filter:drop-shadow(0 0 16px rgba(55,224,236,.4))}
/* Con dos premios (las Actividades dan dos) caben los dos, más pequeños. */
.rs-der:has(.rs-trofeo + .rs-trofeo) .rs-trofeo img{max-width:74px}
@media(max-width:560px){
  .rs-cols{grid-template-columns:1fr 92px;gap:10px}
  .rs-trofeo img{max-width:84px}
}
.rs-abrir{margin-top:11px;font-size:.8rem;color:var(--mut)}
.reto-sem[open] .rs-abrir{display:none}
.rs-detalle{padding:0 16px 16px;border-top:1px solid var(--line)}
.rs-pasos{margin:13px 0 0;padding:0;list-style:none;counter-reset:q}
.rs-pasos li{counter-increment:q;position:relative;padding:0 0 10px 30px;font-size:.91rem;color:#c7d6ee}
.rs-pasos li::before{content:counter(q);position:absolute;left:0;top:1px;width:20px;height:20px;
  border-radius:50%;background:#14243c;border:1px solid #2a4a6a;color:var(--teal);font-size:.75rem;
  display:grid;place-items:center;font-variant-numeric:tabular-nums}
.rs-marcar{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.rs-marcar .rs-ev{flex:1 1 180px;padding:9px 11px;border-radius:9px;border:1px solid #24304a;
  background:#0b1119;color:#e8eefc;font:inherit;font-size:.88rem}
.rs-ok{margin:12px 0 0;font-size:.88rem;color:#4fd18b}
.rs-atras{margin:14px 0 0;font-size:.9rem;color:var(--mut);border-top:1px solid var(--line);padding-top:12px}

/* ═══════════ EL RANKING DE ESCUADRONES ═══════════ */
.esc-grid{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.esc-card{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:13px;
  background:#0d1420;border:1px solid #24304a}
.esc-card.lider{border-color:var(--amber);box-shadow:0 0 20px rgba(245,176,67,.18)}
.esc-pos{font-family:'Unbounded',sans-serif;font-size:1.1rem;color:var(--mut);width:24px;
  text-align:center;font-variant-numeric:tabular-nums;flex:0 0 auto}
.esc-card.lider .esc-pos{color:var(--amber)}
.esc-emb{width:52px;height:52px;object-fit:contain;flex:0 0 auto}
.esc-txt{min-width:0;flex:1}
.esc-txt b{display:block;font-size:1rem}
.esc-txt em{display:block;font-style:italic;color:var(--amber);font-size:.85rem;margin:1px 0 2px}
.esc-val{margin-left:auto;font-weight:600;color:var(--teal);white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media(max-width:560px){.esc-card{flex-wrap:wrap}.esc-val{margin-left:0;width:100%}}

/* ---------- LOS CAJONES DE LA NAVE (12-sep) ----------
   La primera pantalla aterrizaba con la ficha, 24 insignias, 55 cartas y el vestuario a la vez.
   Ahora las colecciones viven en <details> cerrados. Se usan <details> de verdad y no divs con
   JavaScript: se abren sin cargar nada, funcionan con teclado, el navegador recuerda el foco y
   Cmd+F encuentra lo de dentro aunque esté plegado. */
.cajon{background:var(--card,#0d1420);border:1px solid var(--line,#24304a);border-radius:14px;
  margin:14px 0;overflow:hidden}
.cajon > summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;align-items:center;
  gap:10px;font-size:1.02rem;user-select:none}
.cajon > summary::-webkit-details-marker{display:none}
.cajon > summary::after{content:"▾";margin-left:auto;color:var(--mut2,#6d8398);
  transition:transform .18s ease;font-size:.9em}
.cajon[open] > summary::after{transform:rotate(180deg)}
.cajon > summary:hover{background:rgba(255,255,255,.03)}
.cajon > summary:focus-visible{outline:2px solid var(--teal,#37e0ec);outline-offset:-2px}
.cajon > summary .cnt{font-size:.84rem;font-weight:400;color:var(--mut2,#6d8398);
  border:1px solid var(--line,#24304a);border-radius:999px;padding:2px 10px}
.cajon > *:not(summary){padding:0 18px 18px}
.cajon > section,.cajon > .serie{padding-left:18px;padding-right:18px}
@media (prefers-reduced-motion:reduce){.cajon > summary::after{transition:none}}

/* La orden de la semana, al lado de la ficha. Es lo único que caduca de esa pantalla. */
.orden-sem .foro-msg{max-height:260px;overflow:auto;font-size:.88rem;margin:10px 0}
.orden-sem h3{margin:6px 0 2px}

/* El panel de los planetas, embebido. Genially manda 16:9; en móvil se deja más alto porque
   si no las tarjetas de dentro salen ilegibles. */
.panel-planetas .marco-genially{position:relative;width:100%;aspect-ratio:16/9;margin:10px 0;
  border-radius:12px;overflow:hidden;border:1px solid var(--line,#24304a);background:#0b1119}
.panel-planetas .marco-genially iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){.panel-planetas .marco-genially{aspect-ratio:4/3}}

/* Los personajes, en rejilla. Se ve la cara: es lo que se elige. */
.avatares{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:8px;margin-top:8px}
/* 🔴 ACOTADO A LA REJILLA. Este `.av` es el BOTÓN de elegir personaje, pero `.av` es también la
   clase del avatar en media web (la ficha, el tablero, la barra). Suelto, le metía `width:100%` y
   un borde a cada retrato del sitio. Se quedó suelto porque en `alistarse` no se notaba. */
.avatares .av{padding:0;border:2px solid transparent;border-radius:11px;background:none;cursor:pointer;overflow:hidden;line-height:0}
/* 🔴 `width:100%` EXPLÍCITO. Un <button> en una rejilla no se estira solo a su columna: se queda
   del ancho de su contenido. Con la miniatura a 36 px, la carita quedaba del tamaño de un sello en
   una celda de 122 — y estirarla a la fuerza con `height:100%` la dejaba aplastada, peor todavía. */
.avatares .av{display:block;width:100%}
.avatares .av img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;display:block}
.avatares .av.elegido{border-color:#ffd166;box-shadow:0 0 14px rgba(255,209,102,.35)}
.lema{font-size:1.15rem;font-style:italic;color:#ffd166;margin:14px 0}
/* Cada docente en su fila, como en el panel de profes */
#crear .docente{display:grid;grid-template-columns:1.2fr 1.2fr .7fr 1.3fr auto;gap:8px;margin:9px 0;align-items:center}
#crear .docente input,#crear .docente select{margin-top:0}
#crear .resumen ul{margin:6px 0 0;padding-left:20px;line-height:1.7}
#crear .cuenta p,#alistarse .cuenta p{margin:4px 0}
.aviso{padding:11px 14px;border-radius:9px;margin:0 0 14px;background:#14243c;border:1px solid #24304a}
.aviso.malo{background:#2a1420;border-color:#a33}
.card.bien{border-color:#3a7;box-shadow:0 0 0 1px #3a7 inset}
@media(max-width:700px){#crear .docente{grid-template-columns:1fr;gap:6px}}
/* ---------- la consola ---------- */
/* 15-sep · pestañas en pastilla: con once, en dos filas, las «de carpeta» (sin borde abajo) parecían
   montadas unas encima de otras. */
/* 17-sep · con cuerpo, icono y la encendida en turquesa. Norberto: «se solapan los botones; ¿pueden ser más atractivos?
   pasan muy desapercibidos». La cabecera del grupo no dejaba margen y las pestañas se le pegaban al borde. Las del
   referente van tras una raya fina: se ve de un vistazo qué es de todo el equipo y qué solo de quien lleva el grupo. */
#consola .c-cab{margin:0 0 14px}
.pestanas{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 16px}
.pest{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;border:1px solid #2c4a6a;
  background:linear-gradient(180deg,#16293f,#0e1a2a);color:#dbe7f3;cursor:pointer;font:inherit;font-weight:700;
  box-shadow:0 2px 0 rgba(0,0,0,.35);transition:border-color .15s,color .15s,transform .15s,box-shadow .15s}
.pest::before{font-size:1.05em;line-height:1}
.pest:hover{border-color:var(--teal);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(55,224,236,.16)}
.pest:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.pest.activa{background:linear-gradient(180deg,#37e0ec,#1fb3c4);color:#05222a;border-color:#37e0ec;
  box-shadow:0 0 0 1px #37e0ec inset,0 6px 22px rgba(55,224,236,.32);transform:none}
.pest[data-tab="alumnado"]::before{content:"";background-image:url(../img/iconos/p/gente.png)}
.pest[data-tab="rankings"]::before{content:"";background-image:url(../img/iconos/p/rankings.png)}
.pest[data-tab="zoco"]::before{content:"";background-image:url(../img/iconos/p/zoco.png)}
.pest[data-tab="mios"]::before{content:"";background-image:url(../img/iconos/p/enlace.png)}
.pest[data-tab="calendario"]::before{content:"";background-image:url(../img/iconos/p/calendario.png)}
.pest[data-tab="equipo"]::before{content:"";background-image:url(../img/iconos/p/gente.png)}
.pest[data-tab="escuadrones"]::before{content:"";background-image:url(../img/iconos/p/escudo.png)}
.pest[data-tab="huevos"]::before{content:"";background-image:url(../img/iconos/p/premios.png)}
.pest[data-tab="sorteos"]::before{content:"";background-image:url(../img/iconos/p/ticket.png)}
.pest[data-tab="ofertas"]::before{content:"";background-image:url(../img/iconos/p/rayo.png)}
.pest[data-tab="ajustes"]::before{content:"";background-image:url(../img/iconos/p/ajustes.png)}
.pest[data-tab="canjes"]::before{content:"";background-image:url(../img/iconos/p/notas.png)}
.pest-sep{align-self:stretch;width:1px;margin:4px 4px;background:#2c4a6a}
@media(max-width:700px){.pest-sep{display:none}}
#consola .tabla{width:100%;border-collapse:collapse;margin-top:10px;font-size:.93rem}
#consola .tabla th{text-align:left;padding:8px 9px;border-bottom:1px solid #24304a;color:#9fb0ce;font-size:.85rem}
#consola .tabla td{padding:8px 9px;border-bottom:1px solid #182238;vertical-align:top}
#consola .tabla tbody tr[data-r]{cursor:pointer}
#consola .tabla tbody tr[data-r]:hover{background:#14243c}
.retos-ficha{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.reto{padding:7px 12px;border-radius:8px;border:1px solid #24304a;background:#0d1420;color:#9fb0ce;
  cursor:pointer;font:inherit;font-weight:700;font-size:.85rem}
.reto.hecho{background:#14301f;border-color:#3a7;color:#8fe3b0}
.reto:disabled{opacity:.5;cursor:wait}
.vale{padding:12px 14px;border:1px solid #24304a;border-radius:10px;margin:10px 0;background:#0d1420}
.vale .si{border-color:#3a7;color:#8fe3b0}
.vale .no{border-color:#a55;color:#e3a0a0}
#consola label{display:block;margin:12px 0;font-weight:600}
#consola label[hidden],#alistarse label[hidden],#crear label[hidden]{display:none!important}   /* 15-sep · el display:block de arriba le ganaba al hidden */
#consola input,#consola select{display:block;width:100%;margin-top:5px;padding:11px 13px;border-radius:9px;
  border:1px solid #24304a;background:#0d1420;color:#e8eefc;font:inherit;font-weight:400}
#consola code{display:inline-block;padding:4px 8px;background:#0d1420;border-radius:6px;word-break:break-all}
/* Marcar un reto desde la propia Nave (motor nuevo) */
.reto-marcar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.reto-marcar .reto-ev{flex:1 1 220px;min-width:0;padding:9px 12px;border-radius:8px;border:1px solid #24304a;
  background:#0d1420;color:#e8eefc;font:inherit;font-size:.9rem}
.reto-marcar .reto-ev:focus{outline:2px solid #4da3ff;border-color:transparent}
.reto-marcar .btn{white-space:nowrap}
.reto-marcar .btn:disabled{opacity:.6;cursor:wait}
/* El emblema del escuadrón: grande cuando se revela, minúsculo cuando solo identifica */
.emblema{display:block;margin:6px auto 14px;max-width:220px;height:auto;
  filter:drop-shadow(0 0 26px rgba(55,224,236,.28))}
.celda-esc{white-space:nowrap}
.emb-mini{vertical-align:middle;margin-right:7px;border-radius:50%}
@media(max-width:520px){.emblema{max-width:170px}}

/* ═══════════ LA FIESTA · señales de «aquí ha pasado algo» ═══════════ */
/* Cifras que saltan del punto donde has pulsado */
.salta{position:fixed;z-index:9000;pointer-events:none;font-family:'Unbounded',sans-serif;
  font-weight:700;font-size:1.35rem;text-shadow:0 2px 14px rgba(0,0,0,.85);
  animation:sube 1.4s cubic-bezier(.2,.8,.3,1) forwards;white-space:nowrap;transform:translate(-50%,-50%)}
.salta.xp{color:#37e0ec}
.salta.cred{color:#f5b043}
.salta.gasto{color:#e3a0a0;font-size:1.15rem}
.salta.botin{color:#d7a8f0;font-size:1.2rem}
@keyframes sube{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  18%{opacity:1;transform:translate(-50%,-64%) scale(1.12)}
  34%{transform:translate(-50%,-72%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(.94)}
}
/* Las chispas viven en su propio lienzo, encima de todo y sin estorbar al ratón */
canvas.chispas{position:fixed;z-index:8990;pointer-events:none}
/* El contador mientras rueda */
.monedas .m b.rodando{color:#fff;text-shadow:0 0 18px currentColor}
/* Subir de nivel: lo único que para la pantalla */
.nivel-arriba{position:fixed;inset:0;z-index:9100;display:grid;place-items:center;
  background:radial-gradient(ellipse at center,rgba(8,12,20,.86),rgba(8,12,20,.97));
  animation:nivelEntra .42s ease-out;cursor:pointer}
.nivel-arriba.se-va{animation:nivelSale .4s ease-in forwards}
.na-caja{text-align:center;padding:34px 44px}
.na-eyebrow{display:block;font-family:'Unbounded',sans-serif;font-size:.75rem;letter-spacing:.24em;
  text-transform:uppercase;color:#37e0ec;margin-bottom:14px}
.na-n{display:block;font-family:'Unbounded',sans-serif;font-weight:800;font-size:clamp(4rem,16vw,7rem);
  line-height:1;color:#fff;text-shadow:0 0 46px rgba(55,224,236,.7);animation:naLatido .9s ease-out}
.na-rango{display:block;font-family:'Unbounded',sans-serif;font-size:1.3rem;color:#f5b043;margin-top:10px}
.na-titulo{display:block;color:#9fb2c2;margin-top:6px;font-size:.98rem}
@keyframes nivelEntra{from{opacity:0}to{opacity:1}}
@keyframes nivelSale{to{opacity:0}}
@keyframes naLatido{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.14);opacity:1}100%{transform:scale(1)}}
/* Insignia conseguida: entra por la derecha y se va sola */
.insignia-gana{position:fixed;right:18px;bottom:74px;z-index:9050;display:flex;gap:14px;align-items:center;
  background:#101a28;border:1px solid #37e0ec;border-radius:14px;padding:12px 18px 12px 12px;
  box-shadow:0 14px 44px rgba(0,0,0,.6);animation:igEntra .5s cubic-bezier(.2,.9,.3,1);max-width:330px}
.insignia-gana.se-va{animation:igSale .4s ease-in forwards}
.insignia-gana img{border-radius:10px;flex:0 0 auto}
.ig-eyebrow{display:block;font-family:'Unbounded',sans-serif;font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;color:#37e0ec;margin-bottom:3px}
.insignia-gana b{font-size:1rem;line-height:1.25;color:#e9f0f6}
@keyframes igEntra{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes igSale{to{opacity:0;transform:translateX(60px)}}
/* El interruptor del sonido, discreto y siempre a mano */
#sg-son{position:fixed;right:16px;bottom:16px;z-index:9200;width:42px;height:42px;border-radius:50%;
  border:1px solid #1c2c40;background:#101a28;color:#e9f0f6;font-size:1.05rem;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.5);transition:border-color .15s,transform .15s}
#sg-son:hover{border-color:#37e0ec;transform:translateY(-2px)}
#sg-son.mudo{opacity:.55}
#sg-son:focus-visible{outline:2px solid #37e0ec;outline-offset:3px}
body.embed #sg-son{display:none}
/* 🔴 Quien pide menos movimiento, menos movimiento. El dato se ve igual: lo que se quita es el viaje. */
@media (prefers-reduced-motion:reduce){
  .salta,canvas.chispas{display:none}
  .nivel-arriba,.insignia-gana{animation:none}
  .na-n{animation:none}
}

/* ══════════════════ NEBULA PREGUNTA ══════════════════
   🔴 Sustituye al confirm() del navegador. Aquel decía «stargate.mistercuarter.es dice» encima de
   la pregunta —el nombre del servidor, justo cuando el juego tenía que sostener la ficción— y
   congelaba la página entera mientras estaba abierto. */
.neb-capa{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
  background:rgba(4,8,14,.78);backdrop-filter:blur(5px);animation:nebIn .16s ease-out}
.neb-capa.cerrando{animation:nebOut .14s ease-in forwards}
@keyframes nebIn{from{opacity:0}to{opacity:1}}
@keyframes nebOut{to{opacity:0}}
.neb-caja{position:relative;width:100%;max-width:390px;background:linear-gradient(180deg,#132234,#0d1624);
  border:1px solid #2c4a6a;border-radius:20px;padding:60px 24px 22px;text-align:center;
  box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 0 1px rgba(55,224,236,.07) inset;
  animation:nebSube .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes nebSube{from{transform:translateY(14px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.neb-capa.cerrando .neb-caja{animation:none;transform:translateY(6px);opacity:.4;transition:.14s}
/* La cara sobresale por arriba: es ELLA quien pregunta, no una caja del navegador. */
.neb-cara{position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:84px;height:84px;
  border-radius:50%;background:radial-gradient(circle at 50% 35%,#1d3d52,#0c1826);
  border:2px solid #37e0ec;display:grid;place-items:center;overflow:hidden;
  box-shadow:0 0 28px rgba(55,224,236,.4)}
.neb-cara img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.neb-quien{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);
  font-weight:700;margin-bottom:8px}
.neb-caja h3{font-family:'Unbounded',sans-serif;font-size:1.06rem;line-height:1.35;margin:0 0 14px;
  text-wrap:balance}
.neb-cuerpo{margin-bottom:20px}
.neb-precio{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;padding:12px;
  background:rgba(0,0,0,.3);border:1px solid #24304a;border-radius:12px}
.neb-precio b{font-size:1.5rem;color:var(--amber);font-variant-numeric:tabular-nums;line-height:1.1}
.neb-precio span{font-size:.78rem;color:var(--mut)}
.neb-nota{margin:0;font-size:.83rem;line-height:1.5;color:var(--mut)}
.neb-nota b{color:#c7d6ee}
/* Los dos botones, mismo ancho y mismo eje: ninguno de los dos es una trampa. */
.neb-botones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.neb-botones .btn{width:100%;justify-content:center;text-align:center;margin:0}
/* un botón solo («Seguir», «Entendido») ocupa el ancho entero: si no, se quedaba en la mitad izquierda */
.neb-botones > :only-child{grid-column:1/-1}
@media (max-width:400px){.neb-botones{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.neb-capa,.neb-caja{animation:none}}

/* ══════════════════ MERCADO: TARJETAS CON CARA ══════════════════
   🔴 Eran título + precio + botón sobre fondo liso, y encima sin descripción (el traductor la
   renombraba y nunca llegaba). Comprar era leer un nombre y fiarse. Ahora: la imagen que ya existía
   en assets/img/canje/ y nunca se usó, qué ES la cosa, qué hace y dónde acaba. */
.nave-rec{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.nave-rec .rec-card{padding:0;overflow:hidden}
.rec-foto{aspect-ratio:16/9;background:#0a1119;border-bottom:1px solid var(--line);overflow:hidden;
  display:grid;place-items:center}
.rec-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.nave-rec .rec-card:hover .rec-foto img{transform:scale(1.045)}
.rec-foto.sin{background:linear-gradient(160deg,#16283c,#0c1522)}
.rec-foto.sin span{font-size:2.6rem;filter:saturate(.9)}
.nave-rec .rec-card .rec-cuerpo{padding:15px 17px 0}
.nave-rec .rec-card .rec-pie{padding:12px 17px 17px}
.rec-quees{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);
  font-weight:700;margin-bottom:5px}
.nave-rec .rec-card h3{margin:0 0 2px;font-size:1.02rem;line-height:1.3;text-wrap:balance}
.rec-desc{color:var(--mut);line-height:1.5;margin:.5em 0 0}
/* Dónde acaba la cosa: la pregunta que nadie contestaba. */
.rec-donde{margin:10px 0 0;padding:8px 11px;border-left:2px solid var(--teal);
  background:rgba(55,224,236,.06);border-radius:0 8px 8px 0;font-size:.83rem;color:#bcd6e6;line-height:1.45}
.nave-rec .rec-card.lock{justify-content:center;min-height:230px;padding:20px}
.nave-rec .rec-card.lock h3{margin-top:0}

/* ══════════════════ NEBULA ENTREGA ══════════════════ */
.neb-caja.gana{padding-bottom:20px}
.neb-arte{margin:0 auto 12px;width:150px;border-radius:14px;overflow:hidden;background:#0a1119;
  border:1px solid #2c4a6a;box-shadow:0 10px 30px rgba(0,0,0,.5);display:grid;place-items:center}
.neb-arte img{width:100%;height:auto;display:block}
.neb-arte.emoji{aspect-ratio:1;font-size:3.6rem}
.neb-arte.brilla{animation:nebBrilla .9s ease-out;border-color:#37e0ec;
  box-shadow:0 0 34px rgba(55,224,236,.55),0 10px 30px rgba(0,0,0,.5)}
@keyframes nebBrilla{0%{transform:scale(.9);opacity:.4}55%{transform:scale(1.06)}100%{transform:none;opacity:1}}
.neb-gana-nom{font-family:'Unbounded',sans-serif;font-size:1.05rem;font-weight:600;color:var(--teal);
  margin-bottom:10px;line-height:1.3;text-wrap:balance}
.neb-gasto{margin:0 0 12px;font-size:1.35rem;font-weight:800;color:var(--amber);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;justify-content:center;gap:9px}
.neb-gasto .neb-menos{font-size:.8rem;font-weight:700;color:#ff7a6b;
  animation:nebBaja 1s ease-out .3s both}
@keyframes nebBaja{0%{opacity:0;transform:translateY(-9px)}30%{opacity:1}100%{opacity:.55;transform:translateY(5px)}}
.neb-donde{margin:0 0 18px;font-size:.88rem;line-height:1.5;color:#bcd6e6;
  background:rgba(55,224,236,.07);border:1px solid rgba(55,224,236,.2);border-radius:11px;padding:10px 13px}
.neb-esperando{margin:0;font-size:.88rem;color:var(--mut)}
.neb-caja.esperando .neb-cara{animation:nebLate 1.1s ease-in-out infinite}
@keyframes nebLate{0%,100%{box-shadow:0 0 28px rgba(55,224,236,.4)}50%{box-shadow:0 0 44px rgba(55,224,236,.85)}}
.neb-caja.mal{border-color:#5a2f2f}
.neb-caja.mal .neb-cara{border-color:#ff7a6b;box-shadow:0 0 26px rgba(255,122,107,.4)}
@media (prefers-reduced-motion:reduce){
  .neb-arte.brilla,.neb-gasto .neb-menos,.neb-caja.esperando .neb-cara{animation:none}
}

/* El PIN pasa a ser la salida secundaria: con el motor nuevo nadie lo reparte. */
.puerta-pin{margin-top:16px;text-align:left}
.puerta-pin > summary{cursor:pointer;font-size:.85rem;color:var(--mut);list-style:none}
.puerta-pin > summary::-webkit-details-marker{display:none}
.puerta-pin > summary::before{content:"▸ ";color:var(--teal)}
.puerta-pin[open] > summary::before{content:"▾ "}
.puerta-pin > summary:hover{color:var(--ink)}

/* El botón de Google: su logo sobre fondo claro, como manda su guía de marca. Un botón de
   identidad tiene que PARECERSE al de siempre; si lo tiñes de la paleta de tu web deja de
   reconocerse de un vistazo, que es justo lo que lo hace fiable. */
/* 🔴 LA PASTILLA BLANCA DE GOOGLE, y con la puntería justa para ganar.
   `.btn.primary` (0,2,0) le ganaba a `.btn-google` (0,1,0) y el botón salía turquesa con la «G»
   encima: exactamente lo que NO reconoce nadie. El botón de Google se reconoce por su forma —fondo
   blanco, letra oscura, la «G» a la izquierda—, y esa forma es medio mensaje: dice, sin leer, que
   la contraseña se teclea en Google y no aquí. Por eso se escribe `.btn.btn-google`: para que gane
   lleve las clases que lleve, hoy y cuando alguien añada otra. */
.btn.btn-google{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600;text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.28)}
.btn.btn-google:hover{background:#f7f8f8;border-color:#c8ccd0;color:#1f1f1f}
.btn.btn-google:active{background:#eef0f1}
.btn.btn-google svg{flex:none}
.btn.btn-google span{color:inherit}
.puerta-tranquilo{margin-top:-4px}

/* ══════════════ EL BOTÓN DE EMBARCAR ══════════════
   🔴 Era un botón gris pequeño en una caja medio vacía. Es el momento en que alguien entra en el
   juego para el curso entero y se firma UNA sola vez: si algo merece épica, es esto. */
.a-firmar{text-align:center;padding:26px 20px}
.a-firmar-lema{font-family:'Unbounded',sans-serif;font-size:1.15rem;margin:0 0 16px;color:var(--teal);
  letter-spacing:.01em}
.a-firmar-pie{margin:14px 0 0;font-size:.85rem;color:var(--mut)}
.btn.epico{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  font-family:'Unbounded',sans-serif;font-size:1.18rem;font-weight:700;letter-spacing:.03em;
  padding:18px 46px;border-radius:14px;border:0;cursor:pointer;color:#04141a;
  background:linear-gradient(135deg,#37e0ec,#7ef0c8 45%,#ffd166);
  box-shadow:0 0 0 1px rgba(55,224,236,.5),0 10px 34px rgba(55,224,236,.34),0 2px 0 rgba(255,255,255,.35) inset;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.3),box-shadow .16s}
.btn.epico:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 0 1px rgba(55,224,236,.7),0 16px 44px rgba(55,224,236,.46),0 2px 0 rgba(255,255,255,.4) inset}
.btn.epico:active{transform:translateY(1px) scale(.99)}
.btn.epico:disabled{filter:grayscale(.75) brightness(.7);cursor:default;transform:none;box-shadow:none}
.btn.epico .ep-txt{position:relative;z-index:2}
/* la «G» dentro del botón épico: pastilla blanca pequeña, para que se lea como marca de Google
   sobre el dorado y no como un icono decorativo más */
.btn.epico .ep-g{position:relative;z-index:2;display:inline-flex;align-items:center;
  justify-content:center;width:28px;height:28px;border-radius:50%;background:#fff;
  margin-right:11px;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.btn.epico .ep-g svg{width:17px;height:17px;display:block}
/* El destello que cruza: dice «esto es un momento», no «esto es un formulario». */
.btn.epico .ep-luz{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:epBrillo 3.4s ease-in-out infinite}
@keyframes epBrillo{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.btn.epico .ep-luz{animation:none;opacity:0}.btn.epico{transition:none}}

/* Crear un grupo es el momento en que el sistema pasa a existir. Se despachaba con un «Grupo
   creado» de recibo de compra y una URL larguísima a la vista que nadie iba a leer, solo copiar. */
.card.exito{text-align:center}
.exito-cap{display:flex;align-items:center;gap:18px;text-align:left;margin-bottom:18px}
.exito-cap img{width:110px;flex:none;filter:drop-shadow(0 6px 22px rgba(55,224,236,.3))}
.exito-cap h3{margin:2px 0 6px;font-size:1.35rem}
.exito-cap p{margin:0;color:var(--mut);line-height:1.5}
.exito-acciones{margin:18px 0 16px}
.exito-acciones .btn.grande{font-size:1.02rem;padding:15px 30px}
.exito-acciones p{margin:9px 0 0}
@media(max-width:620px){.exito-cap{flex-direction:column;text-align:center}.exito-cap img{width:92px}}

/* ══════════ SUBIR DE NIVEL: EL PERSONAJE, NO SOLO EL NÚMERO ══════════
   Lo que de verdad importa de subir de nivel aquí es que TU PERSONAJE CAMBIA: el arte evoluciona
   por rangos. Enseñar un «4» y no enseñar en qué te has convertido era contar el premio sin darlo. */
.na-avatar{position:relative;width:168px;height:168px;margin:4px auto 14px}
.na-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:18px;
  border:2px solid #ffd166;box-shadow:0 10px 34px rgba(0,0,0,.55)}
/* El resplandor dorado, detrás y latiendo. */
.na-aura{position:absolute;inset:-22%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,209,102,.85),rgba(255,209,102,.28) 42%,transparent 68%);
  filter:blur(8px);animation:naAura 2.4s ease-in-out infinite}
@keyframes naAura{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.08);opacity:1}}
/* 🔴 LA TRANSFORMACIÓN. La vieja se va mientras la nueva aparece ENCIMA, despacio: así se ve el
   cambio de rango en vez de un corte seco. Arranca con retardo para que dé tiempo a ver quién eras. */
.na-muda .na-viejo{z-index:2;animation:naSale 2.6s ease-in-out .7s both}
.na-muda .na-nuevo{z-index:1;animation:naEntra 2.6s ease-in-out .7s both}
@keyframes naSale{0%{opacity:1;transform:scale(1);filter:none}
  55%{opacity:.45;filter:brightness(1.8) saturate(.4)}
  100%{opacity:0;transform:scale(1.09);filter:brightness(2.4) saturate(0)}}
@keyframes naEntra{0%{opacity:0;transform:scale(.94);filter:brightness(2.2)}
  60%{opacity:.7}
  100%{opacity:1;transform:scale(1);filter:none}}
.na-muda-txt{display:block;margin-top:8px;font-size:.84rem;color:#ffd166;letter-spacing:.02em}
@media(max-width:520px){.na-avatar{width:134px;height:134px}}
@media (prefers-reduced-motion:reduce){
  .na-aura{animation:none}
  .na-muda .na-viejo{display:none}
  .na-muda .na-nuevo{animation:none;opacity:1}
}

/* El botón de completar misión dentro de la ficha de una insignia. */
.mi-hacer{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.mi-hacer p{margin:0 0 9px}
.mi-ya{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:#4fd18b;font-size:.9rem}

/* ══════ QUÉ HACER CON UN RETO YA ENTREGADO ══════
   «Muchos estudiantes darán a completado solo por probar» (Norberto). Sin salida, ese clic es
   irreversible y cada duda acaba siendo un mensaje al docente. Con salida, probar deja de dar
   miedo — y quien prueba, se queda. */
.rh{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;
  flex-direction:column;gap:9px;align-items:flex-start}
.rh-ev{display:flex;gap:8px;width:100%;flex-wrap:wrap}
.rh-in{flex:1 1 200px;padding:9px 11px;border-radius:9px;border:1px solid #24304a;
  background:#0b1119;color:#e8eefc;font:inherit;font-size:.88rem}
.rh-in:focus{outline:none;border-color:var(--teal)}
.rh-desHacer{color:#f0a9a0;border-color:#5a2f2f;background:rgba(255,122,107,.07)}
.rh-desHacer:hover{border-color:var(--rose);background:rgba(255,122,107,.14);color:#ffd0c8}
.rh-nota{margin:0;font-size:.78rem;color:var(--mut);line-height:1.45}

/* ══════ LA COLECCIÓN DE INSIGNIAS, EN GRANDE ══════
   Eran sellos de 60 px. Se gana UNA cada dos semanas y son el registro visible de todo el viaje:
   a ese tamaño no se distinguía qué había caído, que es justo lo que hace que apetezca la siguiente. */
.badge-col{grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:14px}
.badge-col img{width:104px;height:104px;transition:transform .18s}
.badge-col .b{font-size:.75rem;cursor:pointer}
.badge-col .b:hover img{transform:scale(1.06)}
.badge-col .b span{margin-top:6px;line-height:1.3}
.badge-col .b:not(.no) img{filter:drop-shadow(0 0 14px rgba(55,224,236,.3))}
@media(max-width:520px){
  .badge-col{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
  .badge-col img{width:84px;height:84px}
}

/* La espera del canje: a todo el ancho y con barra. Una espera muda parece una espera rota. */
.neb-trab{width:100%}
.neb-trab p{margin:0 0 10px;font-size:.9rem;color:var(--mut);text-align:center;white-space:nowrap}
.neb-barra{height:6px;border-radius:99px;background:rgba(0,0,0,.4);border:1px solid #24304a;overflow:hidden}
.neb-barra i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--teal-d,#0e5f6c),#37e0ec);
  animation:nebCarga 2.6s cubic-bezier(.25,.9,.35,1) forwards}
/* Sube deprisa hasta el 92 % y ahí espera: prometer el 100 % antes de que el servidor conteste
   sería mentir, y quedarse clavado al 40 % parece colgado. */
@keyframes nebCarga{0%{width:4%}35%{width:62%}70%{width:84%}100%{width:92%}}
.neb-botones .neb-trab{grid-column:1/-1}
@media (prefers-reduced-motion:reduce){.neb-barra i{animation:none;width:70%}}

/* ══════ TUS ADORNOS (Mi botín) ══════
   Existe porque Norberto compró título, fondo y marco y «no ha tenido ningún efecto»: sus
   descripciones decían «elígelo en el formulario», el flujo del sistema viejo. Con el motor nuevo
   no hay formulario — tres de las diez recompensas cobraban y no hacían nada. */
.ad-grid{display:flex;flex-direction:column;gap:18px;margin-top:10px}
.ad-uno b{display:block;font-size:1rem;margin-bottom:2px}
.ad-uno p{margin:0 0 9px}
.ad-fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ad-fila input{flex:1 1 200px;padding:9px 11px;border-radius:9px;border:1px solid #24304a;
  background:#0b1119;color:#e8eefc;font:inherit;font-size:.9rem}
.ad-fila input:focus{outline:none;border-color:var(--teal)}
/* Los ocho planetas, con su cara: elegir «Fôrge» de una lista de texto no es elegir nada. */
.ad-planetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.ad-pl{padding:0;border:2px solid transparent;border-radius:12px;background:#0b1119;cursor:pointer;
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.ad-pl img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.ad-pl span{font-size:.75rem;color:#c7d6ee;padding:5px 4px;line-height:1.2}
.ad-pl:hover{border-color:#3a5578;transform:translateY(-2px)}
.ad-pl.on{border-color:#ffd166;box-shadow:0 0 16px rgba(255,209,102,.35)}
.ad-pl.on span{color:#ffd166;font-weight:700}
.ad-nada{justify-content:center;min-height:74px;border-style:dashed;border-color:#24304a}
@media (prefers-reduced-motion:reduce){.ad-pl{transition:none}.ad-pl:hover{transform:none}}

/* El cromo, más grande en la lupa: es la recompensa, no una miniatura de catálogo. */
.lupa-carta{max-width:min(480px,86vw)!important;width:auto}

/* ══════ LA IDENTIDAD, EN LA LÍNEA DE «STARGATE» ══════
   «En la línea de arriba del todo, donde pone STARGATE (recluta), añade la miniatura del personaje,
   nombre, dinero, exp, nivel. En la segunda fila los botones, fijo» (Norberto).
   Esa línea ya existía y solo llevaba una marca: meter ahí quién eres y cuánto tienes deja la
   segunda fila entera para las secciones, y ya no hay que bajar para saber el saldo. */
.nav .wrap{display:flex;align-items:center;gap:14px}
.nb-id{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0}
.nb-id .nb-cara{width:34px;height:34px;border-radius:10px;object-fit:cover;
  border:2px solid var(--amber);flex:0 0 auto;box-shadow:0 0 12px rgba(242,181,68,.3)}
.nb-id-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.nb-id-txt b{font-size:.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14ch}
.nb-id .nb-nv{font-size:.75rem;color:var(--mut);white-space:nowrap}
.nb-id .nb-m{font-family:'Unbounded',sans-serif;font-size:.8rem;font-weight:700;white-space:nowrap;
  padding:5px 10px;border-radius:99px;border:1px solid var(--line);background:rgba(0,0,0,.3);
  font-variant-numeric:tabular-nums}
.nb-id .nb-m.xp{color:var(--teal)} .nb-id .nb-m.cr{color:var(--amber)}
/* La barra del sitio pasa a ser fija también: si la identidad vive ahí, tiene que estar siempre. */
body.nave-dentro .nav{position:sticky;top:0;z-index:25}
@media(max-width:720px){
  .nb-id-txt{display:none}
  .nb-id{gap:7px}
  .nb-id .nb-m{font-size:.75rem;padding:4px 8px}
}

/* Los vídeos de la semana, pegados al mensaje que los nombra. En tira: ocupan el ancho sin abrir
   un hueco nuevo, y en móvil se deslizan en vez de apilarse y alargar la tarjeta. */
.orden-videos{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:10px;
  overflow-x:auto;padding-bottom:4px;margin:12px 0 4px;scrollbar-width:thin}
.orden-videos .yt{margin:0}
.orden-videos .yt .cap b{font-size:.82rem}
.orden-videos .yt .cap em{font-size:.75rem}
@media(max-width:560px){.orden-videos{grid-auto-columns:minmax(168px,1fr)}}

/* ══════════ EL AVATAR NUNCA SE CORTA ══════════
   🔴 «¡NO SE DEBE CORTAR EL AVATAR! Revisa eso siempre» (Norberto). Y es una regla, no un caso: el
   personaje es la recompensa de todo el sistema y sale en seis sitios distintos. Donde se rompía:
   `td.who` es un contenedor FLEX, y un <img> dentro de un flex se estira o se encoge según lo que
   pida la fila — el retrato salía ancho y bajo, con la cara cortada por los lados.

   `flex:0 0 auto` + alto y ancho iguales: el hueco es cuadrado, la fuente es cuadrada, no hay nada
   que recortar. Y `object-position` alto, porque si algún día entra una imagen apaisada lo que se
   pierde son los pies, no la cara. */
img.av, .nb-cara, .av-lupa img, td.who img.av{
  flex:0 0 auto !important;
  object-fit:cover;
  object-position:50% 22%;
}
td.who img.av{width:44px;height:44px;aspect-ratio:1}
.nb-id .nb-cara{aspect-ratio:1}

/* ══════════ LO QUE NO SE HA GANADO, NO SE ENSEÑA ══════════
   🔴 «Bloquea las skins que no se han desbloqueado, no rompas la magia» (Norberto). Y era lo peor
   de los dos mundos: el nombre salía como «???» pero la IMAGEN se veía entera — le quitabas el
   nombre y le regalabas la sorpresa. Los héroes ya tenían su arte `_bloqueado`; las skins no, y
   generar cinco variantes por personaje son 70 imágenes. Con CSS sale gratis y se ve mejor:
   silueta a contraluz, que promete algo sin enseñarlo. */
.vest.no img{filter:brightness(.10) saturate(0) contrast(1.6) blur(1.5px)}
.vest.no{position:relative;overflow:hidden}
/* El candado encima, para que se entienda que no es un fallo de carga. */
.vest.no::after{content:"";width:28px;height:28px;background:url(../img/iconos/p/candado.png) center/contain no-repeat;position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);
  font-size:1.5rem;opacity:.55;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
.vest.no b{color:var(--mut)}

/* ══════════ LA CASA DEL DOCENTE ══════════
   «Un docente debe poder entrar y tener a mano sus grupos. A golpe de clic seleccionar el grupo
   actual y poder lanzar la presentación para clase» (Norberto). Por eso las acciones de directo van
   EN la tarjeta y no dentro del grupo: se buscan con los alumnos ya sentados, y cada clic de más
   ahí es medio minuto de aula mirando una pantalla de carga. */
.gp-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:6px 0 16px;flex-wrap:wrap}
.gp-cab h2{margin:0 0 4px}
.gp-cab p{margin:0}
.gp-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.gp{background:var(--surface,#0e1724);border:1px solid var(--line);border-radius:16px;padding:18px 18px 14px;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.gp.vivo{border-color:#2a5a66}
.gp.vivo::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--teal,#37e0ec),var(--amber,#f5b043))}
.gp.off{opacity:.72}
.gp header{display:flex;align-items:center;gap:13px}
/* 🔴 El emblema de SU escuadrón, no el del grupo: cada docente comanda uno, y poner el del grupo
   daría el mismo icono en las seis tarjetas — es decir, ninguna información. */
.gp-emb{width:54px;height:54px;border-radius:13px;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line);background:#0b1119}
.gp-emb.sin{display:grid;place-items:center;color:var(--teal);font-size:1.4rem}
.gp-tit{flex:1;min-width:0}
.gp-esc{margin:2px 0 0;font-size:.82rem;color:var(--teal)}
/* Las dos cifras que se miran de un vistazo: cuánta gente hay y por dónde vamos. */
.gp-cifras{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gp-cifras div{padding:10px 13px;border-radius:11px;background:rgba(0,0,0,.28);border:1px solid var(--line)}
.gp-cifras b{display:block;font-family:'Unbounded',sans-serif;font-size:1.5rem;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.gp-cifras span{font-size:.76rem;color:var(--mut)}
/* 15-sep · «🚀 Entrar en el grupo», el botón épico de «Entrar en mi Nave» (Norberto: «un botón llamativo para
   entrar en ese grupo»); debajo, las pestañas que hay dentro. En los cursos terminados, un botón normal. */
.gp-pie{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:7px}
.gp-pie .gp-abrir{display:flex;justify-content:center;width:100%;margin:0}
.gp-pie .btn.epico.gp-abrir{font-size:1.02rem;padding:15px 22px}
.gp-dentro{margin:0;text-align:center;font-size:.8rem;color:var(--mut)}
.gp h3{margin:2px 0 3px;font-size:1.18rem;line-height:1.25;text-wrap:balance}
.gp-est{font-size:.75rem;letter-spacing:.16em;font-weight:700;color:var(--teal,#37e0ec)}
.gp.off .gp-est{color:var(--mut)}
.gp-cuando{margin:0;font-size:.86rem;color:var(--mut)}
.gp-ref{flex:none;font-size:.9rem;font-weight:700;
  color:var(--amber);background:rgba(245,176,67,.1);border:1px solid rgba(245,176,67,.3);
  padding:4px 9px;border-radius:99px;white-space:nowrap}
/* Las tres de directo: la de proyectar manda, las otras dos acompañan. */
.gp-hacer{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gp-b{display:flex;align-items:center;gap:9px;padding:12px 13px;border-radius:11px;text-decoration:none;
  background:#0b1119;border:1px solid #24304a;color:#e8eefc;transition:.15s;font-size:.88rem}
.gp-b span{font-size:1.15rem;line-height:1}
.gp-b:hover{border-color:var(--teal);background:rgba(55,224,236,.08);transform:translateY(-1px)}
.gp-b.principal{grid-column:1/-1;background:linear-gradient(135deg,rgba(55,224,236,.16),rgba(55,224,236,.06));
  border-color:#2a5a66;font-size:.95rem}
.gp-b.principal b{font-weight:700}
.gp-viejos{margin-top:22px}
.gp-viejos .gp-grid{margin-top:12px}
@media(max-width:520px){.gp-hacer{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gp-b:hover{transform:none}}

/* Un hero corto para las páginas donde se viene a HACER algo, no a leer. */
/* 🔴 El hero no vive dentro de `.wrap`, así que al alinearlo a la izquierda el titular se iba al
   borde de la ventana, desalineado con todo lo de abajo. Lleva el mismo ancho y el mismo margen que
   el contenido, o deja de parecer la misma página. */
.hero.corto{padding:34px 0 18px;text-align:left}
.hero.corto > *{max-width:1140px;margin-left:auto;margin-right:auto;padding:0 22px}
.hero.corto h1{font-size:clamp(1.7rem,4vw,2.4rem);margin:0 auto}
.hero.corto .kicker{margin-bottom:6px}

/* ══════════ EL OPENING DE LA SESIÓN ══════════
   «Toda esta info es ORO y anima a vencer» (Norberto). Y lo es porque no es un ranking genérico:
   es gente que está sentada en esa clase. Todo pensado para PROYECTARSE — se lee desde el fondo
   del aula o no sirve de nada. */
.dia.datos .kicker{margin-bottom:6px}
.dia.datos h2{margin:0 0 22px}
.ses-pie{margin:22px 0 0;font-size:1rem;color:var(--mut);max-width:62ch}
.ses-grande{font-family:'Unbounded',sans-serif;font-size:clamp(3.5rem,12vw,7rem);font-weight:800;
  color:var(--teal);line-height:1;margin:.1em 0}

/* El podio: cinco, ni uno más. Treinta nombres proyectados no los lee nadie. */
.ses-podio{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:760px}
.ses-podio li{display:flex;align-items:center;gap:16px;padding:13px 18px;border-radius:14px;
  background:rgba(0,0,0,.3);border:1px solid var(--line);font-size:clamp(1.1rem,2.4vw,1.5rem)}
.ses-podio .pos{font-family:'Unbounded',sans-serif;font-weight:800;color:var(--mut);min-width:1.4em}
.ses-podio .al{flex:1;font-weight:700}
.ses-podio .xp{font-variant-numeric:tabular-nums;color:var(--teal);font-weight:700}
.ses-podio .p1{border-color:var(--amber);background:rgba(245,176,67,.1)}
.ses-podio .p1 .pos{color:var(--amber)}
.ses-podio .p2{border-color:#4a5a6a} .ses-podio .p3{border-color:#5a4a3a}

/* Escuadrones: barra por MEDIA. La suma premiaría al más numeroso. */
.ses-esc{display:flex;flex-direction:column;gap:14px;max-width:820px}
.ses-esc-f b{display:block;font-size:clamp(1rem,2vw,1.25rem);margin-bottom:5px}
.ses-esc-f span{font-size:.9rem;color:var(--mut)}
.ses-bar{height:14px;border-radius:99px;background:rgba(0,0,0,.4);border:1px solid var(--line);overflow:hidden;margin-bottom:4px}
.ses-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal-d,#0e5f6c),var(--teal))}

/* A quién felicitar. La diapositiva que más cambia una clase. */
.dia.celebra h2{color:var(--amber)}
.ses-gente{display:flex;flex-wrap:wrap;gap:12px;max-width:900px}
.ses-uno{display:flex;flex-direction:column;padding:12px 18px;border-radius:14px;
  background:rgba(245,176,67,.1);border:1px solid rgba(245,176,67,.32);
  font-size:clamp(1rem,2.2vw,1.35rem);font-weight:700}
.ses-uno em{font-style:normal;font-size:.75em;color:var(--amber);font-weight:600}

/* Lo que dijeron al salir. Anónimo, y se nota que lo es. */
.ses-ecos{display:flex;flex-direction:column;gap:14px;max-width:860px}
.ses-ecos blockquote{margin:0;padding:16px 20px;border-left:3px solid var(--teal);
  background:rgba(55,224,236,.06);border-radius:0 12px 12px 0;font-size:clamp(1rem,2.1vw,1.3rem);
  line-height:1.5;font-style:italic}

/* El consejo semanal: una sola cosa, accionable hoy. */
.dia.consejo .ses-tip{display:flex;gap:22px;align-items:flex-start;max-width:820px}
.ses-tip .ico{font-size:clamp(2.6rem,7vw,4.4rem);line-height:1;flex:none}
.ses-tip h2{margin:0 0 8px}
.ses-tip p{margin:0;font-size:clamp(1rem,2.1vw,1.3rem);color:#c7d6ee;line-height:1.5}

/* Y el final: abrir el fichaje y lanzar el Genially. */
.dia.accion .cta-row{margin-top:26px;gap:12px;flex-wrap:wrap}
/* 🔴 16-sep · LOS RETOS RELÁMPAGO. Diez o quince minutos, en clase: el borde violeta y el sello los
   separan de un vistazo de una entrega de dos horas, que es justo lo que hay que distinguir. */
.reto-sem.relampago{border-color:#4b3a66}
.reto-sem.relampago > summary{background:linear-gradient(90deg,rgba(199,155,230,.10),transparent 60%)}
.chip.rel{background:rgba(199,155,230,.14);border:1px solid #4b3a66;color:#dcc6f2;font-weight:700;white-space:nowrap}

/* 🔴 16-sep · LOS TRES TIEMPOS DE LA CLASE. El rótulo de tramos (apertura · presentación · cierre) y la
   tarjeta puente que manda al Genially. El rótulo va dentro del mazo, arriba. 17-sep · y se pulsa: lleva a la primera
   diapositiva de ese tiempo (la caja deja pasar el clic; solo los botones lo recogen). */
.ses-tramos{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:6px;
  flex-wrap:wrap;justify-content:center;pointer-events:none}
.ses-tramos .tr{font-family:inherit;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.04em;padding:4px 12px;border-radius:99px;
  border:1px solid rgba(255,255,255,.14);color:rgba(233,240,246,.55);background:rgba(8,12,20,.55);white-space:nowrap;
  pointer-events:auto;cursor:pointer;transition:color .15s,border-color .15s}
.ses-tramos .tr:hover:not(.on):not([disabled]){color:#fff;border-color:rgba(55,224,236,.6)}
.ses-tramos .tr:focus-visible{outline:2px solid var(--teal,#37e0ec);outline-offset:2px}
.ses-tramos .tr[disabled]{cursor:default}
.ses-tramos .tr.on{color:#0a1118;background:var(--teal,#37e0ec);border-color:transparent}
.ses-tramos .tr.fuera{opacity:.5;font-weight:500}
@media(max-width:720px){.ses-tramos{display:none}}

.dia.puente{display:grid;place-items:center;text-align:center}
.dia.puente .pu-caja{max-width:640px}
.dia.puente .pu-pasos{list-style:none;margin:22px auto 0;padding:0;display:grid;gap:10px;max-width:520px;text-align:left}
.dia.puente .pu-pasos li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;font-size:18px;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 14px}
.dia.puente .pu-pasos li b{display:grid;place-items:center;height:26px;border-radius:8px;font-size:13px;
  background:rgba(55,224,236,.14);color:var(--teal,#37e0ec)}

.dia.genially{padding:0;display:flex}
.dia.genially iframe{width:100%;height:100%;min-height:60vh;border:0;border-radius:14px;background:#000}
.dia.genially .txt{margin:auto;padding:40px}

/* Los enlaces del grupo, a mano y en solo lectura: el docente los reparte en clase, pero
   cambiarlos es del referente. Verlos sin poder tocarlos es justo lo que hace falta. */
.m-enlaces{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.m-fila{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;
  background:#0b1119;border:1px solid #24304a}
.m-fila span{font-size:1.15rem;line-height:1;flex:none}
.m-fila b{flex:1;font-weight:600;font-size:.92rem;min-width:0}
.m-fila a{font-size:.86rem;white-space:nowrap}
.m-fila.vacia{opacity:.55}
.m-fila em{font-style:normal;font-size:.82rem;color:var(--mut)}

/* ══════════ EL SUBMENÚ DE LA GUÍA ══════════
   La guía es larga a propósito: es el método entero. Sin índice se navega a rueda de ratón. Y se
   pega arriba al bajar — un índice que desaparece al hacer scroll no es un índice, es una portada. */
.guia-sub{position:sticky;top:0;z-index:18;background:rgba(8,12,20,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);margin-bottom:8px}
.guia-sub .wrap{display:flex;gap:4px;overflow-x:auto;padding-top:9px;padding-bottom:9px;
  scrollbar-width:none}
.guia-sub .wrap::-webkit-scrollbar{display:none}
.guia-sub a{flex:none;padding:8px 14px;border-radius:99px;text-decoration:none;font-size:.88rem;
  color:var(--mut);border:1px solid transparent;transition:.15s;white-space:nowrap}
.guia-sub a:hover{color:var(--ink);background:rgba(55,224,236,.08);border-color:#2a5a66}
/* Sin esto, al saltar a una sección la cabecera pegada tapa su título. */
section[id]{scroll-margin-top:110px}

/* Los enlaces de interés: tarjetas que se pulsan enteras, no un párrafo con un enlace dentro. */
.card.enl{display:block;text-decoration:none;color:inherit;transition:.16s}
.card.enl:hover{border-color:var(--teal);transform:translateY(-2px)}
.enl-ico{font-size:2rem;line-height:1;display:block;margin-bottom:8px}
.card.enl h3{margin:0 0 6px}
.card.enl p{margin:0;color:var(--mut);font-size:.9rem;line-height:1.5}
@media (prefers-reduced-motion:reduce){.card.enl:hover{transform:none}}

/* Los cuatro pasos de una clase en directo. Numerados porque SÍ son una secuencia: no se puede
   celebrar antes de proyectar ni fichar antes de que se sienten. */
.clase-viva .card{position:relative;padding-top:26px}
.cv-n{position:absolute;top:-14px;left:20px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-family:'Unbounded',sans-serif;font-weight:800;
  background:var(--teal);color:#04141a;font-size:1rem}
.clase-viva h3{margin:6px 0 8px}

/* El regalo opcional al tocar llamada. Solo un sobre de cromos: los xp ordenan el ranking y
   regalarlos por venir mezclaría lo aprendido con lo asistido. */
.ll-regalo{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.92rem;margin:4px 0 2px}
.ll-regalo input{width:19px;height:19px;accent-color:var(--teal);cursor:pointer;flex:none}
.ll-nota{margin:0 0 14px;font-size:.79rem;color:var(--mut);line-height:1.45}

/* La zona del referente: DEBAJO de sus grupos, plegada. Incluso el referente entra aquí a dar
   clase mucho más a menudo que a crear un grupo. */
.ref-zona{margin-top:26px;border-color:rgba(245,176,67,.3)}
.ref-zona > summary b{color:var(--amber)}
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}
.ref-b{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:12px;
  background:#0b1119;border:1px solid #24304a;text-decoration:none;color:#e8eefc;transition:.15s}
.ref-b:hover{border-color:var(--amber);background:rgba(245,176,67,.07);transform:translateY(-2px)}
.ref-b span{font-size:1.4rem;line-height:1}
.ref-b b{font-size:.95rem}
.ref-b em{font-style:normal;font-size:.8rem;color:var(--mut);line-height:1.4}
@media (prefers-reduced-motion:reduce){.ref-b:hover{transform:none}}

/* ══════════ EL ESCONDITE ══════════
   Vive dentro de una presentación, a menudo proyectada o en el móvil. Todo grande y centrado: se
   encuentra por sorpresa y hay que entenderlo en dos segundos. */
.hv{display:grid;place-items:center;min-height:52vh;padding:20px 0}
.hv-caja{max-width:520px;width:100%;text-align:center;padding:34px 28px;border-radius:20px;
  background:linear-gradient(180deg,#132234,#0d1624);border:1px solid #2c4a6a;
  box-shadow:0 26px 70px rgba(0,0,0,.55)}
.hv-icono{font-size:3.4rem;line-height:1;margin-bottom:10px;animation:hvLate 2.6s ease-in-out infinite}
.hv-icono.grande{font-size:5rem;animation:hvSale .7s cubic-bezier(.2,.9,.3,1.5) both}
@keyframes hvLate{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes hvSale{0%{transform:scale(.3) rotate(-25deg);opacity:0}100%{transform:none;opacity:1}}
.hv-caja h2{font-family:'Unbounded',sans-serif;font-size:1.35rem;margin:4px 0 12px;line-height:1.3;text-wrap:balance}
.hv-sub{margin:0 0 20px;color:#bcd6e6;line-height:1.55}
.hv-que{font-family:'Unbounded',sans-serif;font-size:1.1rem;color:var(--amber);margin:0 0 14px;line-height:1.35}
.hv-pie{margin:18px 0 0}
.hv-caja.mal{border-color:#5a2f2f}
.hv-caja.gana{border-color:#ffd166;box-shadow:0 0 40px rgba(255,209,102,.28),0 26px 70px rgba(0,0,0,.55)}
.hv-cargando{height:5px;border-radius:99px;background:rgba(0,0,0,.4);overflow:hidden;margin-top:8px}
.hv-cargando i{display:block;height:100%;width:35%;border-radius:99px;background:var(--teal);
  animation:hvBarra 1.1s ease-in-out infinite}
@keyframes hvBarra{0%{margin-left:-35%}100%{margin-left:100%}}
.hv-confeti,.bv-confeti{position:fixed;inset:0;pointer-events:none;z-index:200}
@media (prefers-reduced-motion:reduce){.hv-icono,.hv-cargando i{animation:none}}
/* 17-sep · EL ENLACE DIRECTO, EN SU PROPIA PÁGINA DE STARGATE (Norberto: «el enlace directo sí tiene que tener el fondo de
   STARGATE; sin fondo solo el embed, para que se fusione con el Genially»). El universo detrás, el Capitán a un lado con
   su bocadillo y la caja del premio al otro. Sin la cabecera de la web ni la nota para docentes. */
body.huevo-directo{background:linear-gradient(180deg,rgba(8,12,20,.55),rgba(8,12,20,.88)),url(../img/nave/fondo_universo.jpg) center/cover fixed,var(--bg)}
body.huevo-directo .hero.corto,body.huevo-directo .nota-docente,body.huevo-directo footer{display:none}
body.huevo-directo .hv{min-height:calc(100vh - 70px);grid-template-columns:auto minmax(0,520px);gap:12px 34px;align-content:center;justify-content:center;padding:24px 0}
.hv-escena{display:flex;flex-direction:column;align-items:center;gap:0;position:relative}
.hv-cap{width:clamp(180px,22vw,280px);height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));animation:hvCap .6s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes hvCap{from{transform:translateY(24px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.hv-bocadillo{order:-1;position:relative;margin:0 0 12px;max-width:280px;padding:10px 14px;border-radius:14px;background:#f4f7fb;color:#0b1523;
  font-weight:700;font-size:.98rem;line-height:1.4;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.hv-bocadillo::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-9px;border:9px solid transparent;border-top-color:#f4f7fb;border-bottom:0}
body.huevo-rec .hv-caja:not(.mal){border-color:rgba(245,176,67,.55)}
@media(max-width:760px){body.huevo-directo .hv{grid-template-columns:1fr;gap:6px}.hv-cap{width:150px}.hv-bocadillo{font-size:.9rem}}
@media (prefers-reduced-motion:reduce){.hv-cap{animation:none}}
.hv-sim{margin:0 0 14px;padding:8px 12px;border-radius:10px;background:rgba(170,102,204,.14);border:1px solid rgba(199,155,230,.45);color:#e4d2f2;font-size:.9rem;line-height:1.45}

/* El configurador de escondites: una fila por presentación, con su enlace listo para copiar. */
.hv-lista{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.hv-f{display:grid;grid-template-columns:80px 1fr 190px 78px auto auto;gap:8px;align-items:center;
  padding:12px;border-radius:12px;background:#0b1119;border:1px solid #24304a}
.hv-f input,.hv-f select{padding:8px 10px;border-radius:8px;border:1px solid #24304a;
  background:#0a1018;color:#e8eefc;font:inherit;font-size:.86rem;min-width:0}
.hv-f .h-act{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--mut);white-space:nowrap}
.hv-f .h-act input{width:17px;height:17px;accent-color:var(--teal)}
.hv-f .h-url{grid-column:1/-2;font-size:.75rem;color:#7f9ab0;word-break:break-all;
  background:#0a1018;border-radius:7px;padding:6px 9px;user-select:all}
@media(max-width:820px){.hv-f{grid-template-columns:1fr 1fr;gap:7px}.hv-f .h-url{grid-column:1/-1}}


/* ------------------------------------------------------------------ LA PUERTA ÚNICA (entrar.html)
   🔴 Corta a propósito y centrada en la pantalla. La razón está escrita con sangre: el botón de
   Google de `clase.html` quedaba a 734 px de scroll bajo un hero de texto, y Norberto —que conoce
   esta web mejor que nadie— concluyó que «no hay manera de iniciar sesión». Una puerta que hay que
   buscar no es una puerta. Aquí no hay hero, no hay nada debajo y no se puede hacer scroll para
   perderse: la tarjeta ES la página. */
.wrap-puerta{min-height:62vh;display:grid;place-items:center;padding:48px 0}
.puerta-unica{max-width:460px;width:100%;text-align:center}
.puerta-unica h3{font-size:1.45rem;margin:.1em 0 .5em}
.puerta-unica .btn{width:100%;justify-content:center}
.puerta-unica .eyebrow{justify-content:center}

/* el código de clase: grande, espaciado y en mayúsculas — se teclea una sola vez en la vida y
   normalmente copiándolo de una pizarra */
.cod-grande{width:100%;padding:15px 12px;border-radius:12px;border:1px solid var(--line2,#2b5460);
  background:var(--bg,#080c14);color:#fff;font:600 1.5rem/1.2 ui-monospace,'IBM Plex Mono',monospace;
  letter-spacing:.32em;text-align:center;text-transform:uppercase}
.cod-grande:focus{outline:2px solid var(--teal,#3ed6c8);outline-offset:2px;border-color:transparent}
.cod-grande::placeholder{color:#40616b;letter-spacing:.32em}

/* barra de «esto está tardando» para los dos saltos que hace la puerta (Google, y luego el
   servidor diciendo qué eres). Sin ella, dos segundos en blanco parecen una web rota. */
.barra-indef{height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:16px 0 2px}
.barra-indef i{display:block;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--teal,#3ed6c8),transparent);
  animation:indef 1.15s ease-in-out infinite}
@keyframes indef{0%{transform:translateX(-100%)}100%{transform:translateX(330%)}}

.cta-pie{flex-basis:100%;margin:14px 0 0;max-width:52ch;margin-left:auto;margin-right:auto}
.puertas-3 .puerta-tile{cursor:default}
.puertas-3 .puerta-tile:hover{transform:none}

@media (prefers-reduced-motion:reduce){.barra-indef i{animation:none;width:100%;opacity:.5}}

/* el cartel de la demo: dice lo que es y ofrece la salida */
.demo-aviso{border-color:var(--amber,#f2b544)!important;background:rgba(242,181,68,.06)}
.demo-aviso p{margin:0;color:var(--amber,#f2b544)}
.demo-aviso .demo-salidas{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.demo-aviso .demo-salidas .btn{font-size:.9rem}

/* 🔴 El botón DEMO no compite con el de Google: es la segunda opción, la del curioso. Borde ámbar
   —el color que en toda la web significa «esto es de ejemplo»— y sin relleno, para que el ojo vaya
   primero a la pastilla blanca, que es lo que tiene que pulsar quien viene a entrar. */
.btn.btn-demo{background:transparent;border:1.5px solid var(--amber,#f2b544);color:var(--amber,#f2b544)}
.btn.btn-demo:hover{background:rgba(242,181,68,.12);color:#ffd27a}

/* la invitación en la tarjeta del grupo: el código grande —para la pizarra— y el botón al lado */
.gp-invita{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:12px 0 0;padding:10px 12px;border:1px dashed rgba(242,181,68,.45);border-radius:12px;
  background:rgba(242,181,68,.05)}
.gp-invita span{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber,#f2b544)}
.gp-invita b{font:700 1.3rem/1.1 ui-monospace,'IBM Plex Mono',monospace;letter-spacing:.2em;color:#fff}
.btn.ok{border-color:var(--teal,#3ed6c8)!important;color:var(--teal,#3ed6c8)!important}

/* ¿cómo entras hoy? — un botón grande por camino */
.elegir-camino{display:flex;flex-direction:column;gap:10px;margin:16px 0 14px;text-align:left}
.elegir-camino .camino{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:12px;
  padding:14px 16px;border-radius:14px;border:1px solid var(--line2,#2b5460);background:rgba(255,255,255,.03);
  text-decoration:none;color:inherit;transition:.15s}
.elegir-camino .camino:hover{border-color:var(--teal,#3ed6c8);background:rgba(62,214,200,.07)}
.elegir-camino .camino span{grid-row:1/3;font-size:1.6rem;align-self:center}
.elegir-camino .camino b{font-size:1.02rem}
/* 19-sep · recluta: el nombre del grupo, grande y resaltado; debajo, «Recluta · empezó el…» */
.elegir-camino .camino.recluta b{font-size:1.2rem;font-weight:800;line-height:1.2;color:#eafcff}
.elegir-camino .camino.recluta em{color:var(--teal,#3ed6c8);font-weight:600}
.elegir-camino .camino.recluta.terminado{opacity:.8}
.elegir-camino .camino.recluta.terminado em{color:var(--mut,#8aa5ab)}
/* 19-sep · «N cursos terminados» del panel: lleva al cajón */
.doc-cifras .ir{cursor:pointer;transition:.15s}
.doc-cifras .ir:hover,.doc-cifras .ir:focus-visible{border-color:var(--teal,#3ed6c8);outline:none}
.elegir-camino .camino em{font-style:normal;font-size:.84rem;color:var(--mut,#8aa5ab)}
.elegir-camino .camino.docente{border-color:rgba(242,181,68,.45)}

/* ¿eres tú? — la cuenta guardada, a la vista antes de usarla */
.cuenta-actual{display:flex;align-items:center;gap:12px;justify-content:center;margin:14px 0 18px;text-align:left}
.cuenta-actual .ini{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#0e5f6c,#3ed6c8);color:#04161a;font:800 1.2rem/1 'Unbounded',system-ui,sans-serif}
.cuenta-actual b{display:block;font-size:1.02rem}
.cuenta-actual em{display:block;font-style:normal;font-size:.86rem;color:var(--mut,#8aa5ab);word-break:break-all}

/* los topes de cada escondite, con su nombre encima */
.hv-f .h-num{display:inline-flex;flex-direction:column;gap:2px;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut,#8aa5ab);vertical-align:bottom}
.hv-f .h-num input{width:84px}

/* ================================================================== ABRIR UN SOBRE (sobre.js)
   Cada carta sale boca abajo y se descubre con un toque. La rareza se nota ANTES de leer el nombre,
   por el halo: común (turquesa tenue), rara (azul), épica (violeta), legendaria (oro con rayos). */
.sb-capa{position:fixed;inset:0;z-index:9500;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;
  gap:10px;padding:22px 16px 26px;background:radial-gradient(900px 600px at 50% 42%,rgba(16,34,44,.975),rgba(3,7,10,.99));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:sbEntra .25s ease-out;color:#fff;overflow:auto}
.sb-capa.sb-fuera{animation:sbSale .22s ease-in forwards}
@keyframes sbEntra{from{opacity:0}to{opacity:1}}
@keyframes sbSale{to{opacity:0}}
.sb-cab{display:flex;flex-direction:column;align-items:center;gap:8px}
.sb-titulo{font:700 .78rem/1 'DM Sans',system-ui;letter-spacing:.24em;text-transform:uppercase;color:var(--amber,#f2b544)}
.sb-puntos{display:flex;gap:8px}
.sb-puntos i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18);transition:.2s}
.sb-puntos i.vista{background:var(--teal,#3ed6c8)}
.sb-puntos i.ahora{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.sb-escena{position:relative;display:grid;place-items:center;perspective:1400px;min-height:0;width:100%}
.sb-halo{position:absolute;width:min(560px,90vw);aspect-ratio:1;border-radius:50%;opacity:0;transition:opacity .5s .15s;
  background:radial-gradient(circle,var(--sb-c,#3ed6c8) 0%,transparent 62%);filter:blur(18px)}
.sb-capa.r-comun{--sb-c:rgba(62,214,200,.38)}
.sb-capa.r-rara{--sb-c:rgba(90,150,255,.5)}
.sb-capa.r-epica{--sb-c:rgba(190,110,255,.58)}
.sb-capa.r-legendaria{--sb-c:rgba(255,196,64,.72)}
.sb-carta.girada ~ .sb-halo,.sb-escena:has(.girada) .sb-halo{opacity:1}
.sb-capa.r-legendaria .sb-escena:has(.girada)::before{content:"";position:absolute;width:min(760px,120vw);aspect-ratio:1;
  background:repeating-conic-gradient(from 0deg,rgba(255,210,110,.20) 0 6deg,transparent 6deg 18deg);
  border-radius:50%;animation:sbRayos 18s linear infinite;mask:radial-gradient(circle,#000 20%,transparent 66%);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 66%)}
@keyframes sbRayos{to{transform:rotate(360deg)}}
.sb-carta{position:relative;z-index:1;width:min(300px,62vw,calc((100vh - 290px) / 1.681));aspect-ratio:720/1210;
  border:0;padding:0;background:none;cursor:pointer;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);animation:sbFlota 3.2s ease-in-out infinite}
.sb-carta.heroe{aspect-ratio:1;width:min(320px,70vw,calc(100vh - 300px))}
.sb-carta:focus-visible{outline:3px solid var(--teal,#3ed6c8);outline-offset:6px;border-radius:18px}
@keyframes sbFlota{0%,100%{translate:0 0}50%{translate:0 -8px}}
.sb-carta.girada{transform:rotateY(180deg);animation:none}
.sb-carta.sale{transform:rotateY(180deg) translateX(40%) scale(.85);opacity:0;transition:transform .26s ease-in,opacity .26s ease-in}
.sb-cara{position:absolute;inset:0;border-radius:18px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.55)}
.sb-frente{transform:rotateY(180deg);background:#0b1419}
.sb-frente img{width:100%;height:100%;object-fit:cover;display:block}
/* el reverso: el sello de la agencia sobre un campo de estrellas, con borde de metal */
.sb-dorso{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:
    radial-gradient(circle at 50% 42%,rgba(62,214,200,.28),transparent 46%),
    radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 72% 18%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 84% 64%,#cfe,transparent),radial-gradient(1px 1px at 34% 78%,#fff,transparent),
    radial-gradient(1px 1px at 58% 52%,#bff,transparent),
    repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px),
    linear-gradient(160deg,#0f2a33,#081218 60%,#1a1206);
  border:3px solid rgba(242,181,68,.55);box-shadow:inset 0 0 0 7px rgba(8,18,24,.9),inset 0 0 0 8px rgba(242,181,68,.28),0 22px 60px rgba(0,0,0,.55)}
.sb-sello{font-size:clamp(3.4rem,11vw,5.2rem);line-height:1;color:var(--teal,#3ed6c8);text-shadow:0 0 28px rgba(62,214,200,.7)}
.sb-marca{font:800 .86rem/1 'Unbounded',system-ui;letter-spacing:.34em;color:rgba(242,181,68,.9)}
.sb-info{min-height:88px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.sb-pista{margin:8px 0 0;color:var(--mut,#8aa5ab);font-size:.95rem}
.sb-nombre{margin:0;font:800 clamp(1.3rem,4vw,1.7rem)/1.1 'Unbounded',system-ui;animation:sbSube .4s ease-out}
.sb-rareza{font:700 .72rem/1 'DM Sans',system-ui;letter-spacing:.2em;text-transform:uppercase;padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.sb-capa.r-legendaria .sb-rareza{background:linear-gradient(90deg,#8a5a00,#f5b043,#8a5a00);color:#1b1200;border:0}
.sb-capa.r-epica .sb-rareza{background:rgba(190,110,255,.25);border-color:rgba(190,110,255,.6)}
.sb-capa.r-rara .sb-rareza{background:rgba(90,150,255,.22);border-color:rgba(90,150,255,.55)}
.sb-extra{margin:2px 0 0;font-size:.9rem;color:var(--mut,#8aa5ab)}
.sb-extra.nueva{color:var(--teal,#3ed6c8)}
@keyframes sbSube{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.sb-pie{display:flex;flex-direction:column;align-items:center;gap:10px}
.sb-pie .btn{min-width:240px;justify-content:center}
.sb-saltar{background:none;border:0;color:var(--mut,#8aa5ab);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer}
.sb-saltar:hover{color:#fff}
/* el resumen: las cartas en abanico */
.sb-capa.sb-resumen{grid-template-rows:auto 1fr auto auto}
.sb-abanico{display:flex;align-items:center;justify-content:center;padding:20px 0}
.sb-mini{margin:0 -18px;width:min(190px,28vw);transform:rotate(calc((var(--j) - (var(--n) - 1) / 2) * 7deg))
  translateY(calc(max(var(--j) - (var(--n) - 1) / 2, (var(--n) - 1) / 2 - var(--j)) * 10px));
  transition:transform .2s;animation:sbSube .4s ease-out backwards;animation-delay:calc(var(--j) * 90ms)}
.sb-mini:hover{transform:translateY(-14px) scale(1.04);z-index:2}
.sb-mini img{width:100%;aspect-ratio:720/1210;object-fit:cover;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.55);display:block}
.sb-mini.r-legendaria img{box-shadow:0 0 0 2px #f5b043,0 0 30px rgba(245,176,67,.6)}
.sb-mini.r-epica img{box-shadow:0 0 0 2px #b77cff,0 0 24px rgba(183,124,255,.5)}
.sb-mini figcaption{text-align:center;font-size:.82rem;margin-top:8px;color:#dfe}
.sb-guardadas{margin:0;color:var(--teal,#3ed6c8);font-weight:600}
@media (prefers-reduced-motion:reduce){
  .sb-carta,.sb-carta.girada,.sb-mini,.sb-nombre{animation:none!important;transition:none!important}
  .sb-capa.r-legendaria .sb-escena:has(.girada)::before{animation:none}
}

/* evidencias: el enlace de cada reto en la ficha, y el aviso de lo que falta */
.sin-evid{display:inline-block;font-size:.75rem;font-weight:600;color:#ffb3a8;background:rgba(255,122,107,.12);
  border:1px solid rgba(255,122,107,.35);border-radius:99px;padding:2px 8px;margin-left:6px;white-space:nowrap}
.evid-ficha{margin-top:14px;padding-top:12px;border-top:1px solid #182238}
.evid-ficha h4{margin:0 0 8px;font-size:.9rem}
.evid-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.evid-lista li{font-size:.9rem;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.evid-lista li b{min-width:28px}
.evid-lista a{color:var(--teal,#3ed6c8);word-break:break-all}
/* la Nave: el campo del enlace, cuando es obligatorio y cuando falta */
input.obligatoria{border-color:rgba(242,181,68,.55)!important}
input.falta{border-color:#ff7a6b!important;box-shadow:0 0 0 3px rgba(255,122,107,.25)!important}

/* ================================================================== «MI NAVE» SIN AIRE (13-sep)
   Cada tarjeta de su tamaño: estirar la ficha hasta igualar la orden de la semana dejaba un hueco
   de media pantalla bajo el personaje. */
.nave-estado{align-items:start}
.orden-sem .foro-msg{scrollbar-width:thin;scrollbar-color:#2b5460 transparent}
.orden-sem .foro-msg::-webkit-scrollbar{width:8px}
.orden-sem .foro-msg::-webkit-scrollbar-thumb{background:#2b5460;border-radius:99px}
.orden-sem .foro-msg::-webkit-scrollbar-track{background:transparent}
/* la barra de nivel: el número justo al lado, el detalle flotando encima */
.barra-nivel{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin:14px 0 4px;cursor:help;outline:none}
.barra-nivel .progress{margin:0}
.barra-nivel .bn-lado{font-size:.82rem;color:var(--mut,#8aa5ab);white-space:nowrap}
.barra-nivel .bn-lado b{color:#fff}
.barra-nivel .bn-tip{position:absolute;left:0;bottom:calc(100% + 10px);z-index:5;min-width:220px;max-width:320px;padding:10px 13px;
  border-radius:10px;background:#0b1720;border:1px solid var(--line2,#2b5460);box-shadow:0 12px 30px rgba(0,0,0,.45);
  font-size:.86rem;line-height:1.45;color:var(--ink,#e4f0f0);opacity:0;transform:translateY(4px);pointer-events:none;transition:.15s}
.barra-nivel:hover .bn-tip,.barra-nivel:focus .bn-tip,.barra-nivel:focus-within .bn-tip{opacity:1;transform:none}
.barra-nivel:focus-visible .progress{outline:2px solid var(--teal,#3ed6c8);outline-offset:3px;border-radius:99px}

/* ================================================================== EL VISOR DE VÍDEOS */
.cine{margin:22px 0;padding:20px;border-radius:18px;border:1px solid var(--line,#1e3a44);
  background:radial-gradient(900px 300px at 50% 0%,rgba(62,214,200,.07),transparent 70%),#08121a}
.cine-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.cine-cab h3{margin:2px 0 0;font-size:1.25rem}
.cine-temporadas{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.cine-t{font:600 .78rem/1 'DM Sans',system-ui;padding:7px 10px;border-radius:9px;border:1px solid var(--line2,#2b5460);
  background:transparent;color:var(--ink,#e4f0f0);cursor:pointer;min-width:38px;text-align:center}
.cine-t:hover{border-color:var(--teal,#3ed6c8)}
.cine-t.on{background:var(--teal,#3ed6c8);color:#04161a;border-color:var(--teal,#3ed6c8)}
.cine-t.cerrada{opacity:.4;cursor:default}
.cine-pantalla{position:relative;max-width:960px;margin:0 auto;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#000;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.cine-pantalla iframe,.cine-poster{position:absolute;inset:0;width:100%;height:100%;border:0}
.cine-poster{padding:0;cursor:pointer;background:#000}
.cine-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s,filter .4s;filter:brightness(.85)}
.cine-poster:hover img{transform:scale(1.02);filter:brightness(1)}
.cine-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  font-size:2rem;color:#04161a;background:var(--teal,#3ed6c8);box-shadow:0 0 0 10px rgba(62,214,200,.18),0 12px 34px rgba(0,0,0,.55);padding-left:6px}
.cine-poster:focus-visible{outline:3px solid var(--teal,#3ed6c8);outline-offset:-3px}
.cine-info{max-width:960px;margin:12px auto 0;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.cine-info b{display:block;font-size:1.05rem}
.cine-info em{display:block;font-style:normal;font-size:.86rem;color:var(--mut,#8aa5ab)}
.cine-nav{display:flex;align-items:center;gap:12px;font-size:.84rem;color:var(--mut,#8aa5ab)}
.cine-tira{max-width:960px;margin:14px auto 0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:10px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;scrollbar-color:#2b5460 transparent}
.cine-mini{display:grid;grid-template-columns:112px 1fr;gap:10px;align-items:center;padding:8px;border-radius:12px;
  border:1px solid var(--line,#1e3a44);background:rgba(255,255,255,.02);color:inherit;text-align:left;cursor:pointer}
.cine-mini:hover{border-color:var(--line2,#2b5460)}
.cine-mini.on{border-color:var(--teal,#3ed6c8);background:rgba(62,214,200,.08)}
.cine-mini img{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:7px;display:block}
.cine-mini b{display:block;font-size:.84rem;line-height:1.25}
.cine-mini em{display:block;font-style:normal;font-size:.75rem;color:var(--mut,#8aa5ab);margin-top:3px}
@media(max-width:640px){.cine{padding:14px}.cine-play{width:64px;height:64px;font-size:1.5rem}.cine-cab{align-items:flex-start}}

/* ================================================================== LA LETRA, A 12 PX COMO MÍNIMO (13-sep)
   Medido con el fotógrafo del laboratorio: había texto de 9 a 11 px en la etiqueta de la barra
   («Recluta · alumnado», «Capitán · docentes»), en el nivel de la barra de la Nave, en los chips,
   en «EN MARCHA», en las etiquetas de las tarjetas del Mercado y en las antetitulares. En un
   portátil a un metro, eso no se lee: se adivina. Norberto ya lo dijo de las cartas («la letra es
   súper pequeña»); aquí se sube el suelo en toda la web. */
.eyebrow{font-size:.8rem}
.modo{font-size:.75rem}
.chip{font-size:.76rem}
.nb-nv{font-size:.76rem}
.gp-est{font-size:.75rem}
.rec-quees{font-size:.76rem}
.gp-invita span{font-size:.75rem}
.cine-mini em,.evid-lista .small,.sb-extra{font-size:.8rem}
@media(max-width:760px){.modo{font-size:.75rem;padding:2px 8px}}

/* ================================================================== SIN AIRE (13-sep) */
body.nave-dentro header.hero,body.consola-dentro header.hero{display:none}
.orden-sem .foro-msg.recortado{max-height:150px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.orden-sem .foro-msg.recortado.abierto{max-height:none;-webkit-mask-image:none;mask-image:none}
.leer-entero{background:none;border:0;padding:0;margin:-4px 0 10px;color:var(--teal,#3ed6c8);font:600 .86rem/1 'DM Sans',system-ui;cursor:pointer}
.leer-entero:hover{text-decoration:underline}
/* un solo grupo: la tarjeta en horizontal */
@media(min-width:900px){
  .gp-grid.uno{grid-template-columns:1fr}
  .gp-grid.uno .gp{display:grid;grid-template-columns:minmax(250px,1fr) minmax(280px,1.15fr) minmax(250px,1fr);
    grid-template-areas:"cab hacer invita" "cifras pie invita";column-gap:24px;row-gap:14px;align-items:start}
  .gp-grid.uno .gp>header{grid-area:cab}
  .gp-grid.uno .gp-cifras{grid-area:cifras;margin:0}
  .gp-grid.uno .gp-hacer{grid-area:hacer;margin:0}
  .gp-grid.uno .gp-invita{grid-area:invita;margin:0}
  .gp-grid.uno .gp-pie{grid-area:pie;margin:0;align-self:start}
  .gp-grid.uno .gp-invita{align-self:stretch;align-content:center}
  .gp-grid.uno .gp-invita b{font-size:2.1rem;letter-spacing:.14em}
}
/* 19-sep · todas las fichas en fila: el aviso de la Cola de nota, cuando lo hay, a lo ancho arriba */
@media(min-width:900px){
  .gp-grid.uno .gp:has(.gp-cola){grid-template-areas:"cola cola cola" "cab hacer invita" "cifras pie invita"}
  .gp-grid.uno .gp-cola{grid-area:cola;margin:0}
}
.gp-invita{flex-wrap:nowrap}
.gp-invita .btn{white-space:nowrap}
/* las semanas del visor, en una fila deslizante en el móvil (en tres filas se comían la pantalla) */
@media(max-width:640px){.cine-temporadas{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;width:100%;padding-bottom:4px}
  .cine-t{flex:none}}

/* lo que llevas, en cuatro cifras (bajo la barra de nivel) */
.nave-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.nave-cifras .nc{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:12px;padding:8px 6px;
  color:var(--ink,#eaf6fb);cursor:pointer;text-align:center;font:inherit;transition:border-color .2s,background .2s}
.nave-cifras .nc:hover,.nave-cifras .nc:focus-visible{border-color:var(--teal,#37e0ec);background:rgba(55,224,236,.07)}
.nave-cifras b{display:block;font-family:'Unbounded',sans-serif;font-size:1.05rem;line-height:1.15}
.nave-cifras b small{font-family:'DM Sans',system-ui;font-size:.78rem;color:var(--mut);font-weight:600}
.nave-cifras span{display:block;font-size:.78rem;color:var(--mut);margin-top:2px}
.orden-sem .foro-msg.recortado{max-height:120px}
/* el halo de Vaeon sangra 120 px a los lados a propósito; en una ventana de 1280 empujaba la portada
   36 px a la derecha y se podía arrastrar de lado. Se recorta en la sección, sin tocar el halo. */
section:has(.trio-amenaza){overflow-x:clip}
body{overflow-x:clip}
/* sin el titular, la primera sección no necesita 54 px de colchón encima: la barra ya separa */
body.nave-dentro header.hero+section,body.consola-dentro header.hero+section{padding-top:18px}
@media(max-width:760px){body.nave-dentro header.hero+section,body.consola-dentro header.hero+section{padding-top:10px}}
/* etiquetas que no deben partirse en dos renglones */
.gp-invita span{white-space:nowrap}
.cajon>summary .cnt{white-space:nowrap}
@media(max-width:520px){.gp-invita{flex-wrap:wrap}.gp-invita .btn{flex:1 1 100%}}
/* dentro de la Nave, las secciones van seguidas: colchón corto y titulares a escala de la app,
   no de portada (los «Los ocho planetas» a 3 rem se comían media pantalla) */
#nave-app section{margin-top:18px;padding:22px 0}
#nave-app section h2{font-size:clamp(1.35rem,2.6vw,1.8rem);margin:.1em 0 .35em}
#nave-app section .lead{font-size:1rem;margin-bottom:14px}

/* la nota «para el profesorado» de validar, la llamada y los premios no se ve incrustada: dentro de la
   presentación la lee el alumnado */
body.embed .nota-docente{display:none}
/* con un solo grupo, la columna del código es estrecha: código arriba y el botón debajo, a lo ancho
   (en una fila, «Copiar invitación» se salía de la caja por la derecha) */
@media(min-width:900px){
  .gp-grid.uno .gp-invita{flex-wrap:wrap;gap:10px}
  .gp-grid.uno .gp-invita>div{flex:1 1 100%}
  .gp-grid.uno .gp-invita .btn{flex:1 1 100%;justify-content:center}
}

/* ================================================================== PREMIOS POR ENLACE, UNA FILA QUE SE LEE (13-sep) */
.hv-f{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.hv-l1{display:grid;grid-template-columns:104px minmax(150px,1.2fr) minmax(210px,1.3fr) 92px 104px 112px auto auto;gap:10px;align-items:end}
.hv-f .h-campo{display:flex;flex-direction:column;gap:5px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut,#8aa5ab);min-width:0}
.hv-f .h-campo input,.hv-f .h-campo select{width:100%;text-transform:none;letter-spacing:0;font-size:.9rem}
.hv-f .h-num input{width:100%}
@media(min-width:981px){.hv-f .h-cant[hidden]{display:flex!important;visibility:hidden}}
.hv-f .h-act{align-self:center;margin-top:18px;font-size:.84rem}
.hv-f .h-del{align-self:end;height:38px;width:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.hv-l2{display:flex;gap:10px;align-items:center}
.hv-l2 .h-url{flex:1;min-width:0;grid-column:auto}
.hv-l2 .btn{white-space:nowrap}
@media(max-width:980px){
  .hv-l1{grid-template-columns:repeat(6,1fr)}
  .hv-f .h-c-id{grid-column:span 2}.hv-f .h-c-nom{grid-column:span 4}.hv-f .h-c-premio{grid-column:span 6}
  .hv-f .h-num{grid-column:span 2}
  .hv-f .h-act{grid-column:span 4;margin-top:0}.hv-f .h-del{grid-column:span 2;justify-self:end}
}
@media(max-width:520px){.hv-l2{flex-wrap:wrap}.hv-l2 .btn{width:100%}}

/* crear un grupo: los dos papeles en línea, casilla y nombre juntos (salían la casilla encima y el
   nombre debajo, descolgados) */
#crear .docente{grid-template-columns:1.2fr 1.2fr auto 1.3fr auto}
#crear .d-roles{display:flex;gap:16px;align-items:center;padding:0 4px}
#crear .d-roles label{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:.9rem;font-weight:600;white-space:nowrap;cursor:pointer}
#crear .d-roles input{width:18px;height:18px;margin:0;accent-color:var(--teal,#37e0ec)}
@media(max-width:700px){#crear .docente{grid-template-columns:1fr}}
/* las pestañas de un grupo, en el móvil: una fila que se desliza (en cuatro filas se comían la pantalla) */
@media(max-width:700px){
  .pestanas{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .pestanas::-webkit-scrollbar{display:none}
  .pestanas .pest{flex:none}
  .pestanas:has(.tour-target){padding:9px 8px}   /* en la fila deslizante, sitio para el halo de la visita */
}
/* la portada: diez baldosas en DOS filas llenas (con cuatro por fila quedaba una fila coja de dos) */
@media(min-width:1100px){#secciones .tiles{grid-template-columns:repeat(5,1fr);gap:14px}
  #secciones .tile{padding:18px}}
@media(min-width:700px) and (max-width:1099px){#secciones .tiles{grid-template-columns:repeat(2,1fr)}}
/* «Una sola puerta»: las tres tarjetas con su etiqueta al pie, a la misma altura y del mismo estilo */
.puertas-3 .puerta-tile{display:flex;flex-direction:column}
.puertas-3 .puerta-tile .chip{margin-top:auto;align-self:flex-start}

/* la acción principal de la llamada y del aula, rellena: es EL botón de la pantalla */
.ll-btn.grande{background:linear-gradient(180deg,#46e3ee,#1cb4c4);color:#03161b;border-color:transparent;font-weight:700}
.ll-btn.grande:hover{background:linear-gradient(180deg,#5ceaf3,#22c2d2);box-shadow:0 0 26px rgba(55,224,236,.4)}
.ll-btn.grande:disabled{background:#14243c;color:#9fb0ce;border-color:#24304a;box-shadow:none}
/* los rankings de la Nave van justo debajo de la barra: sin el colchón y la raya de una sección de portada */
body.nave-dentro #nave-ranking{padding-top:6px;border-top:0}
body.nave-dentro header.hero+section{border-bottom:0}

/* (las reglas de formulario de la consola ponen cada input en bloque y al 100 %: aquí no) */
#consola .hv-f label{margin:0}
#consola .hv-f .h-act{display:flex;flex-direction:row;align-items:center;gap:7px;font-weight:600}
#consola .hv-f .h-act input{display:inline-block;width:18px;height:18px;margin:0;padding:0}
#consola .hv-f .h-campo input,#consola .hv-f .h-campo select{margin-top:0;padding:9px 11px}
.hv-l2 .h-url{display:block;text-align:left;padding:9px 11px}
#consola .hv-l2 .h-url{display:block;flex:1;min-width:0;text-align:left;padding:9px 11px}
.hv-f{align-items:stretch}
.hv-f .h-cant[hidden]{display:none}
/* 🔴 13-sep · con VARIOS grupos las tarjetas son estrechas y «Copiar invitación» se salía por la
   derecha (el «nowrap» de antes solo se había mirado con un grupo). En todas: el código arriba y el
   botón debajo, a lo ancho. */
.gp-invita{flex-wrap:wrap;gap:10px}
.gp-invita>div{flex:1 1 auto}
.gp-invita .btn{flex:1 1 100%;justify-content:center}
/* 2 o 4 grupos: dos columnas, filas llenas */
@media(min-width:760px){.gp-grid.par{grid-template-columns:repeat(2,1fr)}}
/* 🔴 13-sep · ELEGIR PERSONAJE SIN VERLE LA CARA. La regla general `.av` (el avatar redondo de 40 px
   del ranking) también caía sobre los botones del alistamiento: la imagen era cuadrada pero la caja
   medía 40 px de alto y solo se veía el pelo. Visto haciendo el recorrido de un estudiante de verdad. */
.avatares .av{height:auto;margin:0;box-shadow:none;border-radius:11px;vertical-align:top;background:none}
.avatares .av img{height:auto}
/* el Comandante, con su círculo en línea (las reglas de formulario de #alistarse lo ponían encima) */
#alistarse .comandante{display:flex;align-items:center;gap:10px;margin:0;font-size:1rem}
#alistarse .comandante input{display:inline-block;width:18px;height:18px;margin:0;padding:0;accent-color:#4da3ff;flex:none}

/* ================================================================== LA BIENVENIDA, TRAS ALISTARSE (13-sep)
   🔴 Su HTML existía desde el 12-sep (NEBULA de fondo, el Capitán saludando, el emblema del
   escuadrón) pero su CSS NUNCA se escribió: salía una columna de imágenes a tamaño natural con media
   pantalla vacía. Es lo primero que ve un estudiante al entrar en el juego. Visto con una cuenta real. */
body.alistado header.hero{display:none}
.bv{position:relative;overflow:hidden;isolation:isolate;padding:6px 2px 2px}
.bv-nebula{position:absolute;right:-4%;top:-14%;height:140%;width:auto;max-width:none;opacity:.17;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to left,#000 35%,transparent 92%);mask-image:linear-gradient(to left,#000 35%,transparent 92%)}
.bv-fila{position:relative;z-index:1;display:grid;grid-template-columns:210px minmax(0,1fr) 180px;gap:28px;align-items:center}
.bv-cap{display:block;width:100%;height:auto;max-height:310px;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.55))}
.bv-txt .eyebrow{margin:0 0 6px}
.bv-tit{font-family:'Unbounded',sans-serif;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.1;margin:0 0 12px;text-wrap:balance}
.bv-lead{font-size:1.08rem;margin:0 0 12px;line-height:1.5}
.bv-lema{font-family:'Unbounded',sans-serif;font-size:1.05rem;color:var(--amber,#f5b043);margin:0 0 4px}
.bv-origen{font-size:.88rem;color:var(--mut,#8aa5ab);margin:0}
.bv-emblema{display:block;width:100%;height:auto;filter:drop-shadow(0 0 24px rgba(55,224,236,.45))}
.bv-premios{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.bv-premios span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(55,224,236,.35);background:rgba(55,224,236,.08);font-size:.95rem;font-weight:600}
.bv-premios span+span{color:var(--teal,#37e0ec)}
.bv-ir{position:relative;z-index:1;margin:18px 0 0}
.bv-ir .btn{font-size:1.12rem;padding:15px 32px}
@media(max-width:760px){
  .bv-fila{grid-template-columns:112px minmax(0,1fr);gap:14px}
  .bv-cap{max-height:170px}
  .bv-emblema{grid-column:1/-1;width:130px;justify-self:center}
  .bv-nebula{opacity:.1}
  .bv-ir .btn{width:100%}
}
/* la bienvenida, afinada: NEBULA se funde por TODOS los bordes (su imagen trae fondo y dejaba un
   rectángulo), título a su tamaño, y en el móvil el Capitán y el emblema arriba y el texto a lo ancho */
.bv-nebula{-webkit-mask-image:radial-gradient(ellipse 55% 50% at 50% 42%,#000 35%,transparent 78%);
  mask-image:radial-gradient(ellipse 55% 50% at 50% 42%,#000 35%,transparent 78%);opacity:.2;right:-2%}
#alistarse .bv-tit{font-size:clamp(1.6rem,3.2vw,2.4rem)}
.bv-fila{grid-template-areas:"cap txt emb"}
.bv-cap{grid-area:cap}.bv-txt{grid-area:txt}.bv-emblema{grid-area:emb}
@media(max-width:760px){
  .bv-fila{grid-template-columns:1fr 1fr;grid-template-areas:"cap emb" "txt txt";gap:10px 14px}
  .bv-cap{max-height:190px;justify-self:center}
  .bv-emblema{grid-column:auto;width:128px;justify-self:center;align-self:center}
  .bv-txt .eyebrow{letter-spacing:.14em}
  .bv-ir .btn{font-size:1.02rem;padding:14px 16px;white-space:nowrap}
}
/* el enlace que ya entregaste, a la vista */
.rh-ya{margin:0 0 8px;font-size:.9rem;color:var(--mut,#8aa5ab);word-break:break-all}
.rh-ya a{color:var(--teal,#37e0ec)}
/* dos retos de la semana: si abres uno, el de al lado no se estira vacío */
.rs-grid{align-items:start}

/* ================================================================== PREMIOS POR ENLACE: el héroe que eliges, las fechas y el
   interruptor (13-sep). Tres líneas: qué es · cuándo y cuántos · el enlace. El hueco del detalle cambia con el premio. */
.hv-l1{grid-template-columns:118px minmax(160px,1fr) minmax(220px,1.1fr) minmax(260px,1.4fr) auto}
.hv-f .h-extra{min-width:0;display:flex;align-items:flex-end}
.hv-f .h-extra>*{flex:1;min-width:0}
/* 15-sep · + el «Del sorteo»: «#consola label{display:block}» le ganaba al hidden y salía en todos los premios, cortado */
.hv-f .h-cant[hidden],.hv-f .h-c-heroe[hidden],.hv-f .h-nota[hidden],.hv-f .h-c-sorteo[hidden]{display:none!important;visibility:hidden}
.hv-f .h-nota{margin:0;padding:10px 12px;border-radius:9px;background:rgba(55,224,236,.06);border:1px dashed #2c3a56;
  color:#bcd6e6;font-size:.86rem;line-height:1.35}
.hv-f .h-c-heroe{display:flex;align-items:flex-end;gap:10px}
.hv-f .h-c-heroe .h-campo{flex:1;min-width:0}
.h-heroe-img{width:58px;height:58px;border-radius:10px;object-fit:cover;object-position:top;border:1px solid rgba(55,224,236,.45);flex:none;background:#0a1018}
.hv-l2{align-items:stretch}
#consola .hv-l2 .h-url{display:flex;align-items:center}
.hv-l3{display:grid;grid-template-columns:auto minmax(180px,1fr) minmax(180px,1fr) 104px 112px minmax(230px,1.5fr);gap:10px;align-items:end}
.h-estado{margin:0;align-self:end;padding:9px 12px;border-radius:9px;background:#0a1018;border:1px solid #24304a;
  font-size:.88rem;color:#dbe7f3;line-height:1.35;min-height:40px;display:flex;align-items:center}
/* el interruptor de activo / en pausa: se ve de lejos cuál está encendido */
#consola .hv-f .h-sw{display:inline-flex;flex-direction:row;align-items:center;gap:9px;cursor:pointer;align-self:end;
  height:40px;margin:0;font-weight:700;font-size:.92rem;white-space:nowrap}
#consola .hv-f .h-sw input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0}
.h-sw i{position:relative;flex:none;width:48px;height:28px;border-radius:99px;background:#2a3346;border:1px solid #3a4660;transition:background .2s,border-color .2s}
.h-sw i::after{content:"";position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;background:#9fb0ce;transition:transform .2s,background .2s}
.h-sw input:checked+i{background:#0e4f4a;border-color:#37e0ec}
.h-sw input:checked+i::after{transform:translateX(20px);background:#37e0ec;box-shadow:0 0 10px rgba(55,224,236,.6)}
.h-sw input:focus-visible+i{outline:2px solid #37e0ec;outline-offset:2px}
.h-sw .h-sw-si{color:#7ef0c8}.h-sw .h-sw-no{display:none;color:#ffb86b}
.h-sw input:not(:checked)~.h-sw-si{display:none}.h-sw input:not(:checked)~.h-sw-no{display:inline}
.hv-f input[type=datetime-local]{color-scheme:dark}
.hv-l2{flex-wrap:wrap}
.hv-l2 a.btn{text-decoration:none}
.hv-botones{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
#hv-save.pendiente{box-shadow:0 0 0 3px rgba(255,209,102,.5)}
@media(max-width:1180px){.hv-l3{grid-template-columns:auto 1fr 1fr 104px 112px}.h-estado{grid-column:1/-1}}
@media(max-width:980px){
  .hv-l1{grid-template-columns:repeat(6,1fr)}
  .hv-f .h-extra{grid-column:span 4}
  .hv-l3{grid-template-columns:1fr 1fr}
  #consola .hv-f .h-sw{grid-column:1/-1}
}
/* el héroe que se gana en un reto de clase: grande, con su rareza, antes de pulsar */
.hv-heroe{padding:26px 26px 30px}
.hv-fig{position:relative;margin:10px auto 14px;width:min(290px,64vw)}
.hv-fig img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:18px;
  border:2px solid rgba(55,224,236,.55);box-shadow:0 0 36px rgba(55,224,236,.28),0 18px 40px rgba(0,0,0,.5)}
.hv-heroe.r-épica .hv-fig img{border-color:#c79be6;box-shadow:0 0 40px rgba(199,155,230,.38),0 18px 40px rgba(0,0,0,.5)}
.hv-heroe.r-legendaria .hv-fig img{border-color:#ffd166;box-shadow:0 0 48px rgba(255,209,102,.45),0 18px 40px rgba(0,0,0,.5)}
.hv-rareza{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);padding:5px 14px;border-radius:99px;
  background:#0d1624;border:1px solid rgba(55,224,236,.55);color:#bff6fb;font-size:.8rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.hv-heroe.r-épica .hv-rareza{border-color:#c79be6;color:#e7d4f6}
.hv-heroe.r-legendaria .hv-rareza{border-color:#ffd166;color:#ffe3a1}
.hv-heroe h2{margin-top:22px;font-size:1.5rem}
.hv-heroe.gana .hv-fig img{animation:hvSale .7s cubic-bezier(.2,.9,.3,1.5) both}
.btn.epico[disabled]{opacity:.75;cursor:default;filter:saturate(.5)}
.hv-nota-vista{margin:12px 0 0;font-size:.86rem;color:var(--mut,#8aa5ab)}
/* ================================================================== HÉROES REPETIDOS (13-sep): la burbuja ×N, el cambio
   «2 repetidos → uno al azar» y la oferta de NEBULA cuando el héroe de un enlace ya lo tenías */
.vest{position:relative}
.vest .nx{position:absolute;top:6px;right:6px;background:var(--amber,#ffd166);color:#161006;font-size:.8rem;font-weight:800;
  border-radius:8px;padding:1px 7px;box-shadow:0 2px 8px rgba(0,0,0,.45)}
#vestuario .repes{margin:4px 0 10px}
.hv-copias{position:absolute;top:-10px;right:-10px;min-width:44px;height:44px;padding:0 8px;border-radius:99px;
  display:grid;place-items:center;background:var(--amber,#ffd166);color:#161006;font-family:'Unbounded',sans-serif;
  font-size:1.05rem;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.5);border:2px solid #0d1624}
.hv-caja.ancha{max-width:720px}
.hv-oferta-caja{position:relative;padding-top:58px}
.hv-neb{position:absolute;top:-38px;left:50%;transform:translateX(-50%);width:88px;height:88px;border-radius:50%;
  overflow:hidden;border:3px solid #37e0ec;box-shadow:0 0 26px rgba(55,224,236,.45);background:#0d1624}
.hv-neb img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hv-oferta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 0 20px;text-align:center}
.hv-op{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px 16px;border-radius:16px;
  background:#0b1422;border:2px solid #24304a;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.hv-op:hover{border-color:#37e0ec88;transform:translateY(-2px)}
.hv-op.on{border-color:#37e0ec;box-shadow:0 0 0 3px rgba(55,224,236,.25),0 0 30px rgba(55,224,236,.25)}
.hv-op input{position:absolute;opacity:0;pointer-events:none}
.hv-op input:focus-visible~.hv-op-img{outline:2px solid #37e0ec;outline-offset:3px}
.hv-op-img{position:relative;display:block;width:100%;max-width:170px;aspect-ratio:1;border-radius:12px;overflow:visible}
.hv-op-img img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.hv-op-img .hv-copias{top:-8px;right:-8px;min-width:40px;height:40px;font-size:.95rem}
.hv-op-cr{display:flex;align-items:center;justify-content:center;gap:4px;background:radial-gradient(circle at 50% 40%,#3a2d0a,#140f04);
  border:2px solid #ffd16655;color:#ffd166;font-family:'Unbounded',sans-serif}
.hv-op-cr span{font-size:2.6rem;font-weight:800;line-height:1}.hv-op-cr i{font-style:normal;font-size:1.8rem}
.hv-op-txt{display:flex;flex-direction:column;gap:4px}
.hv-op b{font-size:1.02rem;color:#eef6ff}
.hv-op em{font-style:normal;font-size:.86rem;color:#a9c0d6;line-height:1.35}
@media(max-width:600px){
  .hv-oferta{grid-template-columns:1fr}
  .hv-op{flex-direction:row;text-align:left;gap:12px;padding:10px 12px}
  .hv-op-img{width:86px;flex:none}
  .hv-op-cr span{font-size:1.7rem}.hv-op-cr i{font-size:1.2rem}
}
/* ================================================================== EL AULA: premiar a uno o a varios, «en clase hoy» y la
   pregunta al azar (13-sep). Caras que se tocan para elegir; grandes, que esto se usa proyectado. */
.au-cab2{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.au-cab2 h3{margin:0}
.au-seg{display:inline-flex;border:1px solid #24304a;border-radius:99px;overflow:hidden}
.au-seg button{background:none;border:0;color:#9fb0ce;font:600 .88rem inherit;font-family:inherit;padding:8px 14px;cursor:pointer}
.au-seg button b{margin-left:4px;color:var(--teal)}
.au-seg button[aria-pressed=true]{background:#14243c;color:#fff}
.au-seg button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.au-caras{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin:4px 0 12px}
.au-cara{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 9px;border-radius:14px;
  background:#0b1119;border:2px solid #1d2a40;color:#dfe8f5;cursor:pointer;font:inherit;transition:border-color .12s,transform .12s,box-shadow .12s}
.au-cara img,.au-cara .au-sin{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:top;background:#14243c}
.au-cara .au-sin{display:grid;place-items:center;font-weight:700;font-size:1.4rem;color:var(--teal)}
.au-cara b{font-size:.84rem;font-weight:600;line-height:1.2;text-align:center;word-break:break-word}
.au-cara:hover{border-color:#37e0ec88}
.au-cara.on{border-color:var(--teal);background:#0f2530;box-shadow:0 0 0 2px rgba(55,224,236,.18)}
.au-cara.on::after{content:"✓";position:absolute;top:6px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--teal);color:#03161b;
  font-size:.75rem;font-weight:800;display:grid;place-items:center}
.au-cara.luz{border-color:var(--amber);box-shadow:0 0 22px rgba(255,209,102,.55);transform:scale(1.05)}
.au-cara.gana{border-color:var(--amber);box-shadow:0 0 28px rgba(255,209,102,.6)}
.au-cara.quieta{cursor:default}
.au-caras.mini{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
.au-caras.mini .au-cara img{width:48px;height:48px}
.au-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.au-azar-btn{padding:10px 18px;border-radius:11px;border:1px solid transparent;background:linear-gradient(180deg,#ffd166,#f5b043);color:#1b1204;
  font:700 .95rem inherit;font-family:inherit;cursor:pointer}
.au-azar-btn:hover{box-shadow:0 0 22px rgba(255,209,102,.45)}
.au-azar-btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.au-sinrep{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:#9fb0ce;margin-left:auto;cursor:pointer}
.au-sinrep input{width:17px;height:17px;accent-color:var(--teal);margin:0}
.au-sorteo{display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(180deg,#221a07,#161005);border:1px solid rgba(255,209,102,.5);box-shadow:0 0 30px rgba(255,209,102,.18)}
.au-sorteo[hidden]{display:none}
.au-sorteo img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:top;border:3px solid var(--amber);flex:none}
.au-sorteo div{flex:1;min-width:0}
.au-sorteo b{display:block;font-family:'Unbounded',sans-serif;font-size:1.45rem;color:#fff;line-height:1.2;margin:2px 0 4px}
.au-sorteo em{font-style:normal;color:#d9c9a0;font-size:.9rem}
.au-para{font-size:.9rem;color:var(--teal);font-weight:600}
.au-pr.heroe{border-color:#1f4a52;color:#9ff3fa}
.au-pr.adorno{border-color:#4a3a1a;color:#ffd98a}
.au-heroe-el{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:#0b1119;border:1px solid #24304a}
.au-heroe-el[hidden]{display:none}
.au-heroe-el img{width:64px;height:64px;border-radius:12px;object-fit:cover;object-position:top;flex:none}
.au-heroe-el select{flex:1;min-width:0;padding:9px 11px;border-radius:9px;border:1px solid #24304a;background:#0a1018;color:#e8eefc;font:inherit}
.au-res{line-height:1.6;margin-top:10px}
.au-res .malo{color:#ffb4b4}
@media(max-width:560px){.au-caras{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.au-cara img,.au-cara .au-sin{width:52px;height:52px}
  .au-sinrep{margin-left:0}.au-heroe-el{flex-wrap:wrap}.au-heroe-el .btn{width:100%}}
/* los regalos del aula, en tres filas con nombre y rejilla pareja (en el móvil, de dos en dos) */
.au-grupo-pr{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:start;margin-top:10px}
.au-gt{padding-top:12px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7f95ad}
.au-grupo-pr .au-premios{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px;margin-top:0}
.au-grupo-pr .au-pr{width:100%;text-align:center;padding:12px 10px}
.au-res:empty{display:none}
@media(max-width:560px){.au-grupo-pr{grid-template-columns:1fr;gap:4px}.au-gt{padding-top:4px}
  .au-grupo-pr .au-premios{grid-template-columns:1fr 1fr}.au-grupo-pr.tres .au-premios{grid-template-columns:repeat(3,1fr)}
  .au-grupo-pr.tres .au-pr{padding:10px 6px;font-size:.86rem}
  .au-seg button{padding:8px 10px;font-size:.84rem}}
.au-caras.mini{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.au-cara b{word-break:normal;overflow-wrap:anywhere;hyphens:auto}

/* ═══════ 🔴 20-sep · HERRAMIENTAS DE CLASE: lo de directo, y VISTO ═══════
   «la sección de a quién cambia el nombre y usa dibujos e iconos para las recompensas, es muy poco
   visual. Intenta compactar más la info». Cada premio enseña la misma imagen que le llegará al
   recluta; el nombre, debajo y pequeño. Y arriba, el enlace que se pega en el chat de la clase. */
.au-pr{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 8px 8px;line-height:1.15}
/* la lámina del premio, recortada como una miniatura (el arte es apaisado: a 46 px «contain» no se veía nada) */
.au-pr-i{width:100%;height:54px;object-fit:cover;object-position:center;border-radius:8px;background:#060d15}
.au-pr.puntos .au-pr-i{height:44px;width:44px;object-fit:contain;background:none;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.au-pr-t{font-size:.84rem;font-weight:700}
.au-grupo-pr .au-pr{padding:9px 6px 8px}
.au-chat .au-cab2{margin-bottom:2px}
.au-chat-u{display:block;margin-top:8px;padding:7px 10px;border-radius:9px;background:#0b1119;border:1px solid #24304a;
  color:#9fd8e0;font-size:.78rem;word-break:break-all}
.au-viva{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:#bfe9ef}
.au-viva::before{content:"";width:8px;height:8px;border-radius:50%;background:#3ed6c8;box-shadow:0 0 0 0 rgba(62,214,200,.6);animation:auLate 1.6s infinite}
@keyframes auLate{70%{box-shadow:0 0 0 7px rgba(62,214,200,0)}100%{box-shadow:0 0 0 0 rgba(62,214,200,0)}}
@media (prefers-reduced-motion:reduce){.au-viva::before{animation:none}}
@media(max-width:560px){.au-pr-i{width:38px;height:38px}.au-pr-t{font-size:.78rem}}

/* ================================================================== LA NAVE POR CAPÍTULOS (13-sep) */
.prox-cap{margin:4px 0 0;font-size:.9rem;color:var(--mut,#8aa5ab)}
.prox-cap b{color:#ffe3a1}
.rep-caps{position:relative}
.rep-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;gap:6px;min-width:250px;
  padding:10px;border-radius:12px;background:#0d1624;border:1px solid #2c4a6a;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.rep-menu[hidden]{display:none}
.rep-menu .btn{justify-content:flex-start;text-align:left;width:100%}
.rec-prox{margin:14px 0 0;padding:11px 14px;border-radius:11px;background:rgba(255,209,102,.06);border:1px dashed rgba(255,209,102,.35);
  color:#e9dcb5;font-size:.93rem;line-height:1.5}
.rec-prox span{color:var(--mut,#8aa5ab)}
.tabla td.bienv{white-space:nowrap;color:var(--mut,#8aa5ab)}.tabla td.bienv.ok{color:#7ef0c8;font-weight:600}
/* ================================================================== LA NAVE DEL COMANDANTE (simulacro, 13-sep)
   Se proyecta dentro de la sesión: la barra dice lo que es y lleva los mandos del docente. */
body.embed.simulacro .nav{display:block}
body.simulacro .nav .brand{pointer-events:none}
.sim-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 12px;padding:10px 14px;border-radius:14px;
  background:linear-gradient(90deg,rgba(255,209,102,.14),rgba(55,224,236,.08));border:1px solid rgba(255,209,102,.45)}
.sim-tit{display:flex;flex-direction:column;line-height:1.25}
.sim-tit b{font-family:'Unbounded',sans-serif;font-size:.98rem;color:#ffe3a1}
.sim-tit em{font-style:normal;font-size:.84rem;color:#d9c9a0}
.sim-mandos{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.sim-sem{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600;color:#e8eefc;margin:0}
.sim-sem select{padding:6px 8px;border-radius:8px;border:1px solid #2c4a6a;background:#0b1119;color:#e8eefc;font:inherit;font-size:.9rem}
.sim-pjs{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px;padding-top:4px}
.sim-pjs[hidden]{display:none}
.sim-pjs button{padding:0;border:2px solid #24304a;border-radius:12px;overflow:hidden;background:#0b1119;cursor:pointer;aspect-ratio:1}
.sim-pjs button:hover{border-color:var(--teal,#37e0ec)}
.sim-pjs img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
@media(max-width:700px){.sim-mandos{margin-left:0}}
/* la sesión proyectable: «se abre esta semana» y la Nave del Comandante incrustada */
.dia.nuevo-nave{flex-direction:row;align-items:center;gap:32px}
.dia.nuevo-nave .nn-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.dia.nuevo-nave .kicker{color:#ffd166}
.nn-lista{margin:6px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:1.12rem;line-height:1.4}
.nn-neb{margin:6px 0 0;color:var(--muted);font-size:.95rem}
.nn-img{width:min(40%,460px);border-radius:18px;border:1px solid rgba(255,209,102,.35);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.mazo:fullscreen .nn-lista{font-size:clamp(1.1rem,1.9vw,1.7rem)}
.dia.simulacro{padding:0;display:flex}
.dia.simulacro iframe{width:100%;height:100%;min-height:62vh;border:0;border-radius:14px;background:#070b12}
.mazo:fullscreen .dia.simulacro iframe{min-height:calc(100vh - 92px)}
@media(max-width:760px){.dia.nuevo-nave{flex-direction:column;align-items:stretch}.nn-img{width:100%}}
/* las diapositivas con una página dentro (la Nave del Comandante, el Genially): las flechas y el contador
   del mazo, FUERA del marco (encima tapaban los créditos y el texto de la Nave) */
.dia.simulacro,.dia.genially{padding:34px 62px 10px}
.mazo:fullscreen .dia.simulacro,.mazo:fullscreen .dia.genially{padding:34px 62px 10px}
@media(min-width:900px){.rs-grid.par{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* el Mercado por capítulos: con 2 o 4 tarjetas, de dos en dos; con 3 o 6, de tres en tres (auto-fill dejaba huecos) */
@media(min-width:700px){.grid.nave-rec.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.grid.nave-rec.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ================================================================== EL ZOCO ESTELAR (13-sep) */
.nb-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:99px;
  background:var(--amber,#ffd166);color:#1b1204;font-size:.75rem;font-weight:800}
.zoco-barra{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:6px 0 16px}
.z-h{margin:18px 0 10px;font-size:1.08rem}
.zc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.zc{display:flex;flex-direction:column;padding:0;overflow:hidden}
.zc-img{background:#070b12;display:grid;place-items:center;padding:10px}
.zc-img img{display:block;max-width:100%;height:190px;object-fit:contain;border-radius:10px}
.zc.heroe .zc-img img{width:100%;height:190px;object-fit:cover;object-position:top}
.zc-txt{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.zc-txt b{font-size:1rem;line-height:1.25}
.zc-meta{font-size:.84rem;color:var(--mut,#8aa5ab)}
.zc-txt .btn{margin-top:auto;justify-content:center}
.zt-lista{display:flex;flex-direction:column;gap:10px}
.zt{padding:14px 16px}
.zoco-aviso{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:0 0 14px;
  border-color:rgba(255,209,102,.6);background:linear-gradient(90deg,rgba(255,209,102,.12),rgba(255,209,102,.03))}
.zoco-aviso p{margin:0;font-size:1.02rem}
.zt-nov{margin:6px 2px -4px;font-size:1rem}
.zt.toca{border-color:rgba(255,209,102,.6);box-shadow:0 0 0 1px rgba(255,209,102,.25) inset}
.zt-cab{display:flex;gap:12px;align-items:center}
.zt-pz{width:80px;height:80px;border-radius:10px;object-fit:cover;object-position:top;flex:none;background:#070b12}
.zt-pz.cromo{object-fit:contain;height:108px}
.zt-tit{margin:0 0 4px;font-size:.98rem}
.zt-fila{display:flex;flex-wrap:wrap;gap:10px 24px;margin:12px 0 6px}
.zt-et{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut,#8aa5ab);margin-bottom:6px}
.zq{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.zq-cr{padding:6px 12px;border-radius:99px;background:rgba(255,209,102,.12);border:1px solid rgba(255,209,102,.4);color:#ffe3a1;font-weight:800}
.zp{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;width:104px}
.zp img{width:104px;height:104px;border-radius:10px;object-fit:cover;object-position:top;background:#070b12}
.zp.cromo img{object-fit:contain;height:142px}
.zp figcaption{font-size:.82rem;text-align:center;line-height:1.2;color:#dbe7f3}
.zt-msgs{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.9rem}
.zt-msgs li{padding:6px 10px;border-radius:9px;background:#0b1320}
.zt-msgs li.mio{background:#0f2530}
.zt-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.zoco-capa{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:18px;background:rgba(3,8,14,.72);backdrop-filter:blur(3px)}
.zoco-caja{width:100%;max-width:720px;max-height:calc(100vh - 36px);overflow:auto;padding:22px 22px 18px;border-radius:18px;
  background:linear-gradient(180deg,#132234,#0d1624);border:1px solid #2c4a6a;box-shadow:0 26px 70px rgba(0,0,0,.6)}
.zoco-caja h3{margin:0 0 4px}
.zm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:8px;margin:12px 0}
.zm-p{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 6px;border-radius:12px;background:#0b1119;
  border:2px solid #1d2a40;color:#dfe8f5;cursor:pointer;font:inherit}
.zm-p img{width:100px;height:100px;border-radius:9px;object-fit:cover;object-position:top}
.zm-p.cromo img{object-fit:contain;height:136px}
.zm-p b{font-size:.84rem;font-weight:600;line-height:1.2;text-align:center}
.zm-p.on{border-color:var(--teal,#37e0ec);background:#0f2530;box-shadow:0 0 0 2px rgba(55,224,236,.2)}
.zm-p:disabled{opacity:.45;cursor:default}
.zm-p .nx{position:absolute;top:6px;right:6px;background:var(--amber,#ffd166);color:#161006;font-size:.75rem;font-weight:800;border-radius:7px;padding:0 5px}
.zm-ya{font-size:.75rem;color:#ffe3a1}
.zm-obj{display:flex;justify-content:center;margin:8px 0}
.zm-obj .zp{width:120px}.zm-obj .zp img{width:120px;height:120px}
.zm-campo{display:flex;flex-direction:column;gap:5px;margin:10px 0;font-weight:600;font-size:.92rem}
.zm-campo input{padding:10px 12px;border-radius:10px;border:1px solid #24304a;background:#0a1018;color:#e8eefc;font:inherit}
.zm-et{margin:12px 0 0;font-weight:600;font-size:.92rem}
.zm-pie{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.lupa-zoco{margin-top:10px}
.vest-caja{position:relative;display:flex}
.vest-caja>.vest{flex:1}
.vest-zoco{position:absolute;top:6px;left:6px;width:34px;height:34px;border-radius:10px;border:1px solid #2c4a6a;background:rgba(7,11,18,.85);
  color:#e8eefc;font-size:1rem;cursor:pointer;display:grid;place-items:center}
.vest-zoco:hover{border-color:var(--teal,#37e0ec)}
@media(max-width:560px){.zc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.zc-img img,.zc.heroe .zc-img img{height:140px}
  .zm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rep-menu{min-width:300px}
.rep-tit{margin:0 0 4px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut,#8aa5ab)}
.rep-menu .btn{display:flex;justify-content:space-between;gap:10px}
.rep-menu .btn em,.rep-vien em{font-style:normal;font-size:.8rem;color:var(--mut,#8aa5ab);white-space:nowrap}
.rep-vien{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;border:1px dashed #24304a;color:#6f8399;font-size:.88rem}
/* 13-sep · la tabla del Zoco en la consola: un mensaje sin espacios la estiraba y se comía «Deshacer» */
.zoco-tabla td{overflow-wrap:anywhere}
.zoco-tabla td:nth-child(6){min-width:200px}
/* 13-sep · el calendario del grupo (consola del referente) */
.cal-cab{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 22px;margin:6px 0 12px}
.cal-cab label{margin:0;max-width:260px}
.cal-tabla td{vertical-align:top}
.cal-tabla .cal-fechas{white-space:nowrap;font-variant-numeric:tabular-nums}
.cal-tabla .cal-sem{white-space:nowrap}
.cal-tabla .cal-abre{line-height:1.55;min-width:240px}
.cal-tabla tr.cal-pasada td{opacity:.55}
.cal-tabla tr.cal-hoy td{background:rgba(55,224,236,.07)}
.cal-tabla tr.cal-pausa td{background:repeating-linear-gradient(135deg,rgba(255,209,102,.07) 0 10px,transparent 10px 20px)}
.cal-tabla tr.cal-pausa .cal-sem b{color:#ffe3a1}
.cal-caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.cal-cap{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid #1d2a40;background:#0b1119}
.cal-cap.on{border-color:rgba(55,224,236,.45)}
.cal-guardar ul{margin:6px 0 10px;padding-left:20px;line-height:1.6}
/* 13-sep · borrar un grupo de prueba (Ajustes) y el aviso al volver */
.zona-peligro{border-color:rgba(255,122,107,.55)}
.btn.peligro{background:#5a1c17;border-color:#ff7a6b;color:#ffe1dc}
.btn.peligro:hover:not(:disabled){background:#7a241d}
.btn.peligro:disabled{opacity:.45;cursor:not-allowed}
.borrado-ok{border-color:rgba(255,122,107,.45);background:rgba(255,122,107,.06)}
.borrado-ok p{margin:0}
/* 14-sep · el Gran Sorteo en la Nave */
.rec-card.sorteo{border-color:rgba(255,209,102,.55);box-shadow:0 0 0 1px rgba(255,209,102,.18) inset}
.rec-card.sorteo .rec-quees{color:#ffe3a1}
.sorteo-mias{margin:4px 0 6px;font-size:1.02rem}
.sorteo-res{margin:6px 0;font-size:1.02rem;line-height:1.5}
.sorteo-gane{margin:6px 0;padding:8px 12px;border-radius:10px;background:rgba(255,209,102,.14);color:#ffe3a1}
.sorteo-aviso{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:0 0 14px;
  border-color:rgba(255,209,102,.6);background:linear-gradient(90deg,rgba(255,209,102,.12),rgba(255,209,102,.03))}
.sorteo-aviso.gane{background:linear-gradient(90deg,rgba(255,209,102,.3),rgba(255,209,102,.08))}
.sorteo-aviso p{margin:0;font-size:1.02rem}
.sorteo-aviso span{display:flex;gap:8px}
.botin-premios{border-color:rgba(255,209,102,.55);background:rgba(255,209,102,.08)}
.botin-premios p{margin:0 0 4px}
/* 14-sep · la consola: los sorteos */
.sr-caja .sr-cab{display:flex;gap:16px;align-items:center}
.sr-caja .sr-cab img{width:180px;aspect-ratio:16/9;object-fit:cover;border-radius:12px;flex:none}
.sr-caja .sr-cab h3{margin:0 0 6px}
.sr-caja .sr-cab p{margin:6px 0 0}
.sr-caja.hecho{border-color:rgba(255,209,102,.5)}
.sr-cuenta{margin:12px 0 6px;font-size:1.02rem}
.sr-botones{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.sr-ganadores ul{margin:6px 0 0;padding-left:20px;line-height:1.7}
.sr-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 12px;margin:12px 0 0;padding:14px;border-radius:12px;border:1px solid #1d2a40;background:#0b1119}
.sr-form .sr-f-premio,.sr-form .sr-f-desc{grid-column:1/-1}
.sr-form .sr-f-pie{grid-column:1/-1;margin:4px 0 0}
@media (max-width:640px){.sr-caja .sr-cab{flex-direction:column;align-items:flex-start}.sr-caja .sr-cab img{width:100%}}
/* el sorteo en directo (para proyectar) */
.sr-proy{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:24px;overflow:auto;
  background:radial-gradient(900px 500px at 50% 0%,rgba(255,209,102,.16),transparent 60%),#050b12}
.sr-proy-caja{width:min(1100px,100%);text-align:center}
.sr-proy h2{font-family:'Unbounded',system-ui,sans-serif;font-size:clamp(1.6rem,4vw,2.8rem);margin:.2em 0 .3em;text-wrap:balance}
.sr-proy-sub{font-size:1.15rem;color:#c9d6e3;margin:0 0 18px}
.sr-bombo{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 16px;margin:10px 0 18px}
.sr-chip{padding:10px 16px;border-radius:99px;border:1px solid #2c4a6a;background:#0d1826;font-size:1.15rem;font-weight:700;color:#e8f1fb;transition:transform .12s,background .12s,box-shadow .12s}
.sr-chip i{font-style:normal;color:#ffe3a1;font-weight:600;margin-left:4px}
.sr-chip.luz{background:#1f3a55;border-color:#37e0ec;transform:scale(1.05)}
.sr-chip.gana{background:linear-gradient(180deg,#ffd166,#e2a93b);color:#1b1206;border-color:#fff1c9;transform:scale(1.07);box-shadow:0 0 24px rgba(255,209,102,.55)}
.sr-chip.gana i{color:#3b2408}
.sr-res{min-height:3.2em}
.sr-gana{font-family:'Unbounded',system-ui,sans-serif;font-size:clamp(1.4rem,3.4vw,2.4rem);color:#ffe3a1;margin:.2em 0}
.sr-proy-bot{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sr-proy-img{display:block;width:min(440px,72%);margin:0 auto 12px;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
/* 14-sep · las participaciones del sorteo en el Zoco (su imagen es apaisada) */
/* (el texto de la imagen está a la izquierda: se recorta por la derecha, donde está NEBULA) */
.zp.participacion img,.zm-p.participacion img,.zt-pz.participacion,.zc.participacion .zc-img img{object-fit:cover;object-position:28% center}
.zc.participacion .zc-img img{width:100%}

/* 14-sep · LA SESIÓN DENTRO DEL GENIALLY (sesion.html?embed=1): solo el mazo, a pantalla llena, y la
   entrada del docente (Google → «¿En qué grupo estamos?») con el Capitán */
body.embed section:has(#sesion-app){padding:0;border:0}
body.embed .wrap:has(#sesion-app){max-width:none;padding:0}
body.embed .mazo{border:0;border-radius:0;height:100vh;display:flex;flex-direction:column}
body.embed .mazo .lienzo{flex:1;min-height:0;overflow:hidden}
body.embed .mazo .dia{padding:3.5vh 6vw}
body.embed .mazo .dia h1{font-size:clamp(2rem,5.6vw,4.6rem)}
body.embed .mazo .dia h2{font-size:clamp(1.6rem,4.2vw,3.2rem)}
body.embed .mazo .dia .sub,body.embed .mazo .dia .cuando,body.embed .mazo .dia .pide p{font-size:clamp(1rem,1.8vw,1.5rem)}
.ses-cambiar{flex:0 0 auto;border:1px solid var(--line);background:rgba(8,12,20,.72);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted);border-radius:8px;padding:5px 10px;font-size:.75rem;cursor:pointer;opacity:.7;transition:.15s}
.ses-cambiar:hover,.ses-cambiar:focus-visible{opacity:1;color:#fff;border-color:var(--teal)}
.ses-puerta{display:flex;align-items:center;gap:clamp(16px,3vw,36px);min-height:min(80vh,560px);padding:clamp(18px,4vh,40px) clamp(18px,5vw,56px);
  border:1px solid var(--line);border-radius:20px;background:radial-gradient(120% 100% at 30% 0,rgba(55,224,236,.12),transparent 60%),#070b12}
body.embed .ses-puerta{min-height:100vh;border:0;border-radius:0}
.ses-cap{width:clamp(150px,26vw,300px);flex:0 0 auto;filter:drop-shadow(0 0 40px rgba(55,224,236,.28));animation:ses-entra .5s ease-out both}
.ses-puerta-txt{flex:1;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ses-puerta-txt h2{margin:0;font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.1}
.ses-puerta-txt .sub{margin:0;color:var(--muted);font-size:clamp(1rem,1.6vw,1.25rem);max-width:46ch}
.ses-puerta .kicker{color:var(--teal2);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:800}
.ses-err{color:#ff9d8f;margin:0}
.ses-grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;width:100%}
.ses-grupo{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;background:rgba(255,255,255,.03);color:#fff;cursor:pointer;transition:.15s;animation:ses-entra .4s ease-out both}
.ses-grupo:nth-child(2){animation-delay:.06s}.ses-grupo:nth-child(3){animation-delay:.12s}.ses-grupo:nth-child(4){animation-delay:.18s}
.ses-grupo b{font-size:clamp(1.1rem,1.8vw,1.4rem)}
.ses-grupo span{color:var(--teal2);font-size:.95rem}
.ses-grupo:hover,.ses-grupo:focus-visible{border-color:var(--teal);background:rgba(55,224,236,.10);transform:translateY(-2px)}
@keyframes ses-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ses-cap,.ses-grupo{animation:none}}
@media (max-width:720px){.ses-puerta{flex-direction:column;text-align:center}.ses-puerta-txt{align-items:center}.ses-cap{width:140px}}

/* ════════ 14-sep · LA SESIÓN REHECHA PARA PROYECTAR ════════
   Norberto: «embellécela, animaciones, personajes e imágenes… tiene mucho aire». Menos margen, todo
   más grande, las caras de la gente y las insignias como protagonistas; cada diapositiva entra con
   un escalonado corto (y nada se mueve si el sistema pide menos movimiento). */
.mazo .dia{padding:24px 34px;gap:8px}
.mazo .dia h2{font-size:clamp(1.5rem,3.2vw,2.5rem)}
.dia.entra > *{animation:ses-sube .5s cubic-bezier(.2,.8,.2,1) both}
.dia.entra > *:nth-child(2){animation-delay:.07s}.dia.entra > *:nth-child(3){animation-delay:.14s}
.dia.entra > *:nth-child(4){animation-delay:.21s}.dia.entra > *:nth-child(5){animation-delay:.28s}
@keyframes ses-sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ses-pop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes ses-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ses-gira{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}
.dia.portada .planeta{animation:ses-gira 240s linear infinite}

/* las caras de la gente */
.cara{--t:84px;width:var(--t);height:var(--t);border-radius:50%;overflow:hidden;flex:0 0 auto;display:grid;place-items:center;
  background:#101a2a;border:3px solid rgba(55,224,236,.55);box-shadow:0 0 18px rgba(55,224,236,.22)}
.cara img{width:100%;height:100%;object-fit:cover;display:block}
.cara b{font-size:calc(var(--t)*.42);color:var(--teal2)}
.cara.grande{--t:clamp(110px,15vh,170px)}
.ses-caras{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px 10px;margin-top:6px}
.ses-caras figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  animation:ses-pop .45s ease-out both;animation-delay:calc(var(--i,0)*55ms)}
.ses-caras figcaption{font-weight:700;font-size:1rem;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ses-caras figcaption em{display:block;font-style:normal;color:var(--amber);font-weight:800;font-size:.95rem;margin-top:2px}
.ses-caras .mas .cara{border-style:dashed}
.ses-caras .mas .cara b{font-size:1.6rem}

/* 2 · la llamada a filas */
.dia.llamada{flex-direction:row;align-items:stretch;gap:24px}
.dia.llamada .ll-cap{width:min(28%,300px);align-self:flex-end;object-fit:contain;filter:drop-shadow(0 0 36px rgba(55,224,236,.25))}
.dia.llamada .ll-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;justify-content:center}
.dia.llamada .ll-mando{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.dia.llamada .ll-minutos{justify-content:flex-start;margin:0}
.dia.llamada .ll-viva{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:1.2rem}
.dia.llamada .ll-viva > b{font-size:clamp(2.2rem,5vw,3.6rem);color:var(--amber);line-height:1}
.dia.llamada .ll-punto{width:14px;height:14px;border-radius:50%;background:#ff5d5d;box-shadow:0 0 0 0 rgba(255,93,93,.6);animation:ll-late 1.4s infinite}
@keyframes ll-late{0%{box-shadow:0 0 0 0 rgba(255,93,93,.6)}100%{box-shadow:0 0 0 16px rgba(255,93,93,0)}}
.dia.llamada .ll-cuenta{color:var(--muted);font-variant-numeric:tabular-nums}
.dia.llamada .ll-esperando{color:var(--muted);font-size:1.1rem;margin:6px 0 0}
.ses-caras.ll figure{animation:none}
.ses-caras.ll figure.nuevo{animation:ses-pop .6s ease-out both}

/* 4 · las misiones de la semana pasada */
.ant-lista{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.ant-f{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;border:1px solid var(--line);border-radius:18px;
  padding:12px 16px;background:rgba(255,255,255,.025);animation:ses-sube .5s both;animation-delay:calc(var(--i,0)*120ms + .15s)}
.ant-ins{width:clamp(100px,16vh,150px);height:clamp(100px,16vh,150px);object-fit:contain;filter:drop-shadow(0 0 20px rgba(55,224,236,.35))}
.ant-ins.vacia{display:grid;place-items:center;font-size:2.6rem}
.ant-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ant-cab b{font-size:clamp(1.1rem,2vw,1.5rem)}
.ant-et{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#05222a;background:var(--teal);border-radius:99px;padding:3px 10px}
.ant-n{margin-left:auto;color:var(--muted);font-size:1.05rem}.ant-n b{color:var(--amber);font-size:1.4rem}
.ant-f .ses-caras{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.ant-f .cara{--t:62px}.ant-f .ses-caras figcaption{font-size:.88rem}

/* 6 · el podio de la semana, que se destapa de uno en uno */
.podio{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:18px;flex:1;margin-top:4px}
.podio-p{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.podio-p.fr{opacity:0;transform:translateY(46px) scale(.9);transition:opacity .55s ease,transform .7s cubic-bezier(.2,1.3,.4,1)}
.podio-p.fr.on{opacity:1;transform:none}
.podio-al{font-size:clamp(1.2rem,2.4vw,1.9rem)}
.podio-xp{color:var(--amber);font-weight:800;font-size:clamp(1rem,1.8vw,1.4rem)}
.podio-escalon{width:100%;border-radius:14px 14px 0 0;display:grid;place-items:center;font-weight:900;font-size:clamp(2rem,4vw,3.2rem);color:rgba(0,0,0,.55)}
.podio-p.p1 .podio-escalon{height:clamp(110px,22vh,210px);background:linear-gradient(180deg,#ffd166,#c8912a)}
.podio-p.p2 .podio-escalon{height:clamp(80px,15vh,150px);background:linear-gradient(180deg,#dfe7f2,#8fa1b8)}
.podio-p.p3 .podio-escalon{height:clamp(60px,10vh,110px);background:linear-gradient(180deg,#e7a36c,#9b5f33)}
.podio-p.p1 .cara{border-color:#ffd166;box-shadow:0 0 40px rgba(255,209,102,.55)}
.podio-p.p1.on .cara{animation:ses-flota 3s ease-in-out .8s infinite}
.podio-p.p2 .cara{border-color:#dfe7f2}.podio-p.p3 .cara{border-color:#e7a36c}

/* 7 · el top 5 */
.top5{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.top5 li{display:grid;grid-template-columns:44px auto minmax(0,1.2fr) 2fr auto;align-items:center;gap:14px;border:1px solid var(--line);
  border-radius:16px;padding:8px 14px;background:rgba(255,255,255,.025);animation:ses-sube .45s both;animation-delay:calc(var(--i,0)*90ms + .1s)}
.top5 li:first-child{border-color:rgba(255,209,102,.6);background:rgba(255,209,102,.07)}
.top-pos{font-size:1.6rem;font-weight:900;color:var(--teal2);text-align:center}
.top5 .cara{--t:58px}
.top-al{display:flex;flex-direction:column;min-width:0}.top-al b{font-size:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-al em{font-style:normal;color:var(--muted);font-size:.9rem}
.top-bar,.esc-bar{height:12px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.top-bar i,.esc-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),#8af3ff);animation:ses-barra 1s ease-out both .3s;transform-origin:left}
@keyframes ses-barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.top-xp,.esc-xp{font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums;color:var(--amber)}

/* 8 · escuadrones */
.esc-lista{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.esc-f{display:grid;grid-template-columns:auto minmax(0,1.3fr) 2fr auto;align-items:center;gap:16px;border:1px solid var(--line);
  border-radius:16px;padding:10px 16px;background:rgba(255,255,255,.025);animation:ses-sube .45s both;animation-delay:calc(var(--i,0)*100ms + .1s)}
.esc-f.mio{border-color:var(--teal);box-shadow:0 0 22px rgba(55,224,236,.18)}
.esc-emb{width:64px;height:64px;object-fit:contain}.esc-emb.vacia{display:grid;place-items:center;font-size:2rem}
.esc-nom{display:flex;flex-direction:column;min-width:0}.esc-nom b{font-size:1.25rem}.esc-nom em{font-style:normal;color:var(--muted);font-size:.9rem}

/* 9 · el ticket de salida */
.dia.ticket{flex-direction:row;align-items:center;gap:24px}
.tk-neb{width:min(24%,260px);align-self:flex-end;filter:drop-shadow(0 0 36px rgba(55,224,236,.3));animation:ses-flota 6s ease-in-out infinite}
.tk-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.tk-cifras{display:flex;gap:14px;flex-wrap:wrap}
.tk-c{border:1px solid var(--line);border-radius:16px;padding:10px 18px;background:rgba(255,255,255,.03);display:flex;align-items:baseline;gap:10px}
.tk-c b{font-size:clamp(2rem,4.4vw,3.2rem);color:var(--amber);line-height:1}.tk-c span{color:var(--muted)}
.tk-ecos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.tk-ecos blockquote{margin:0;border-left:4px solid var(--teal);background:rgba(55,224,236,.06);border-radius:0 14px 14px 0;
  padding:10px 14px;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.4;animation:ses-sube .45s both;animation-delay:calc(var(--i,0)*110ms + .2s)}
/* 🔴 20-sep · EL TICKET, POR TEMA. El resumen de cómo fue el tema anterior (el reparto de cada nota, no una
   media suelta), las dudas con la pregunta de la que salen, y qué se dice cuando nadie ha contestado. */
.tk-c.ancha b{font-size:clamp(1.1rem,2.2vw,1.7rem);color:#e8f3fa}
.tk-de{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal2);margin-bottom:4px}
.tk-nada{border:1px dashed rgba(62,214,200,.45);border-radius:16px;padding:16px 20px;background:rgba(55,224,236,.05)}
.tk-nada > b{display:block;font:800 clamp(1.4rem,3vw,2.2rem)/1.1 var(--display,inherit);color:var(--amber);margin-bottom:6px}
.tk-nada .sub b{color:#e8f3fa}   /* (el nombre del tema va DENTRO de la frase, no en su propia línea) */
.tk-nada .sub{margin:0}
.tk-notas{display:flex;flex-direction:column;gap:7px}
.tk-nota{display:grid;grid-template-columns:minmax(120px,26%) 1fr auto;align-items:center;gap:10px}
.tk-n-t{color:#cfe0ec;font-size:clamp(.85rem,1.3vw,1.05rem)}
.tk-n-b{display:flex;height:22px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.05)}
.tk-n-b i{display:flex;align-items:center;justify-content:center;min-width:0;transition:width .4s ease}
.tk-n-b em{font-style:normal;font-size:.7rem;font-weight:800;color:#06131a;opacity:.85}
.tk-n-m{font-variant-numeric:tabular-nums;font-size:clamp(1rem,1.8vw,1.35rem);color:var(--amber)}
.tk-n-b .v1,.tk-leyenda .v1{background:#ff7d7d}.tk-n-b .v2,.tk-leyenda .v2{background:#ffa96b}
.tk-n-b .v3,.tk-leyenda .v3{background:#ffd76b}.tk-n-b .v4,.tk-leyenda .v4{background:#8fe0a8}
.tk-n-b .v5,.tk-leyenda .v5{background:#3ed6c8}
.tk-leyenda{margin:2px 0 0;color:var(--muted);font-size:.78rem;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.tk-leyenda i{width:12px;height:12px;border-radius:3px;display:inline-block}
.dia.ticket-form .tk-otro{margin:0}
/* el enlace para el chat, en la portada: solo lo ve quien da la clase */
.pt-chat{margin:14px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pt-chat .small{color:var(--muted)}
@media (max-width:760px){ .tk-nota{grid-template-columns:1fr auto;grid-template-areas:"t m" "b b"} .tk-n-t{grid-area:t} .tk-n-m{grid-area:m} .tk-n-b{grid-area:b} }

/* 11 · las misiones de hoy, con su insignia */
.dia.mision.con-ins{flex-direction:row;align-items:center;gap:30px}
.reto-ins{margin:0;width:min(30%,300px);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.reto-ins img{width:100%;max-width:240px;filter:drop-shadow(0 0 34px rgba(55,224,236,.45));animation:ses-flota 5s ease-in-out infinite}
.reto-ins figcaption{font-weight:800;color:var(--teal2);font-size:1.05rem}
.reto-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.reto-hito{margin:6px 0 0;border:1px solid rgba(245,176,67,.5);background:rgba(245,176,67,.08);border-radius:14px;padding:10px 14px;font-size:1.05rem}
.ins-grid figure{animation:ses-pop .45s ease-out both;animation-delay:calc(var(--i,0)*90ms + .15s)}
.nn-lista li{animation:ses-sube .45s both;animation-delay:calc(var(--i,0)*90ms + .2s)}

/* tu ejemplo */
.dia.tuyo{flex-direction:row;align-items:center;gap:26px}
.tuyo-cap{width:min(26%,260px);align-self:flex-end;filter:drop-shadow(0 0 30px rgba(55,224,236,.22))}

/* en pantalla completa o dentro del Genially, todo a escala de proyector */
.mazo:fullscreen .ses-caras,body.embed .mazo .ses-caras{grid-template-columns:repeat(auto-fill,minmax(clamp(112px,11vw,170px),1fr))}
.mazo:fullscreen .cara,body.embed .mazo .cara{--t:clamp(84px,9vw,130px)}
.mazo:fullscreen .ant-f .cara,body.embed .mazo .ant-f .cara{--t:clamp(60px,6vw,88px)}
.mazo:fullscreen .top5 .cara,body.embed .mazo .top5 .cara{--t:clamp(56px,6vh,80px)}
.mazo:fullscreen .ses-caras figcaption,body.embed .mazo .ses-caras figcaption{font-size:clamp(1rem,1.5vw,1.4rem)}
.mazo:fullscreen .dia{padding:3vh 4vw}
body.embed .mazo .dia{padding:3vh 4vw}
@media (prefers-reduced-motion:reduce){
  .dia.entra > *,.ses-caras figure,.ant-f,.top5 li,.esc-f,.tk-ecos blockquote,.ins-grid figure,.nn-lista li{animation:none}
  .dia.portada .planeta,.reto-ins img,.tk-neb,.podio-p.p1.on .cara{animation:none}
  .podio-p.fr{transition:none}
}
@media (max-width:720px){
  .dia.llamada,.dia.ticket,.dia.mision.con-ins,.dia.tuyo{flex-direction:column}
  .dia.llamada .ll-cap,.tk-neb,.tuyo-cap{width:120px;align-self:center}
  .reto-ins{width:60%}
  .top5 li{grid-template-columns:34px auto 1fr auto}.top-bar{display:none}
  .esc-f{grid-template-columns:auto 1fr auto}.esc-bar{display:none}
  /* 15-sep · en un móvil: el podio cabe (el 3.º se cortaba), el planeta gira sin salirse de su sitio
     (la animación le devolvía el translateY(-50%) del escritorio) y el relleno es el del móvil */
  .podio{gap:8px}.podio .cara.grande{--t:clamp(64px,22vw,96px)}.podio-al{font-size:1rem;overflow-wrap:anywhere}
  .mazo .dia{padding:22px 16px}
}
@media (max-width:720px) and (prefers-reduced-motion:no-preference){.dia.portada .planeta{animation-name:ses-gira-movil}}
@keyframes ses-gira-movil{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* 14-sep · la cuenta congelada (Nave) y la zona del referente en la ficha (consola) */
.congelado-aviso{border-color:rgba(120,190,255,.55);background:linear-gradient(180deg,rgba(120,190,255,.14),rgba(120,190,255,.05));margin:0 0 14px}
.congelado-aviso p{margin:0;font-size:1.02rem}
.ficha-ref{margin-top:16px;border-top:1px solid #182238;padding-top:12px}
.ficha-ref h4{margin:0 0 8px;font-size:.9rem;color:var(--amber);text-transform:uppercase;letter-spacing:.08em}
.ficha-ref p{margin:0 0 10px}
tr.congelado td{opacity:.75}

/* 7b · los coleccionistas */
.col-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:4px}
.col-c{border:1px solid var(--line);border-radius:18px;padding:12px 14px;background:rgba(255,255,255,.025)}
.col-c h3{margin:0 0 8px;font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--teal2)}
.col-c ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.col-c li{display:grid;grid-template-columns:24px auto 1fr auto;align-items:center;gap:10px;animation:ses-sube .45s both;animation-delay:calc(var(--i,0)*90ms + .15s)}
.col-c .cara{--t:52px}
/* 15-sep (noche) · con la cuarta columna (los logros de a bordo) el alias se cortaba («Lara Lu…»): el número baja bajo el
   nombre y el nombre puede partirse en dos líneas. Nada cortado en lo que se proyecta. */
.col-c li{grid-template-columns:24px auto minmax(0,1fr);grid-template-rows:auto auto;row-gap:0}
.col-c li > .col-pos,.col-c li > .cara{grid-row:1 / span 2}
.col-c li > b{grid-column:3;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.15}
.col-c li > .col-n{grid-column:3;font-size:1.08rem;line-height:1.2}
.col-c li b{font-size:1.08rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-pos{font-weight:900;color:var(--muted);text-align:center}
.col-n{font-weight:900;color:var(--amber);font-size:1.25rem;font-variant-numeric:tabular-nums}.col-n em{font-style:normal;color:var(--muted);font-size:.85rem;font-weight:600}
.col-c li:first-child .cara{border-color:#ffd166;box-shadow:0 0 22px rgba(255,209,102,.45)}
.col-ley{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:10px;border:1px solid rgba(255,209,102,.45);border-radius:16px;
  padding:10px 14px;background:rgba(255,209,102,.07)}
.col-ley-t{font-weight:900;color:#ffd166}
.col-ley-u{display:flex;align-items:center;gap:8px}.col-ley-u .cara{--t:40px;border-color:#ffd166}
.col-ley-u b{font-size:1rem}.col-ley-u em{font-style:normal;color:var(--muted);font-size:.9rem}
@media (prefers-reduced-motion:reduce){.col-c li{animation:none}}

/* 14-sep · «Ver resultado del sorteo» (NEBULA): los ganadores, uno a uno */
.sres-gan{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 22px;margin:6px 0}
.sres-gan figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;animation:ses-pop .6s ease-out both;animation-delay:calc(var(--i,0)*700ms + .5s)}
.sres-gan img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #ffd166;box-shadow:0 0 26px rgba(255,209,102,.5)}
.sres-gan figcaption{font-weight:800;font-size:1.05rem}
.sres-tu{font-size:1.05rem}
@media (prefers-reduced-motion:reduce){.sres-gan figure{animation:none}}

/* 14-sep · LA OFERTA DE LA SEMANA, arriba del Mercado: grande, con su rareza en el borde y cuenta atrás */
.ofertas{display:grid;gap:14px;margin:14px 0 18px}
.oferta-card{--rz:#37e0ec;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0;padding:0;overflow:hidden;
  border:2px solid var(--rz);box-shadow:0 0 30px color-mix(in srgb,var(--rz) 35%,transparent);background:linear-gradient(120deg,rgba(255,255,255,.03),rgba(255,255,255,0))}
.oferta-card.rz-rara{--rz:#6aa8ff}.oferta-card.rz-epica{--rz:#b77bff}.oferta-card.rz-legendaria{--rz:#ffd166}
.of-foto{position:relative;min-height:220px;background:#070b12}
.of-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oferta-card.es-carta .of-foto img{object-fit:contain;padding:10px}
.of-pct{position:absolute;left:12px;top:12px;background:#ff5d5d;color:#fff;font-weight:900;font-size:1.3rem;border-radius:12px;padding:6px 12px;
  box-shadow:0 6px 20px rgba(255,93,93,.45);animation:of-late 2.4s ease-in-out infinite}
@keyframes of-late{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.of-cuerpo{padding:16px 20px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.of-kicker{color:var(--rz);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem}
.of-cuerpo h3{margin:0;font-size:clamp(1.25rem,2.4vw,1.7rem)}
.of-precio{margin:0;font-size:1.2rem}.of-precio s{color:var(--muted)}.of-precio b{color:var(--amber);font-size:1.7rem;margin-left:6px}
.of-meta{margin:0;display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:.98rem}.of-meta b{color:#fff}
.of-cuerpo .btn{align-self:flex-start}
@media (max-width:720px){.oferta-card{grid-template-columns:1fr}.of-foto{min-height:180px}}
@media (prefers-reduced-motion:reduce){.of-pct{animation:none}}
/* la pestaña del referente */
.of-fila{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.of-fila.fin,.of-fila.cancelada{opacity:.7}
.of-botones{margin:0;display:flex;gap:6px;flex-wrap:wrap}
/* 15-sep · con #consola delante: «#consola label{display:block}» ganaba y la casilla salía sola, centrada encima del texto */
.of-auto,#consola .of-auto{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:6px 0;cursor:pointer;width:auto}
.of-auto input,#consola .of-auto input{width:20px;height:20px;flex:0 0 auto;margin:0;accent-color:var(--teal)}
.of-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:8px}
.of-form select{max-width:340px}

/* 9b · la oferta de la semana, proyectada */
.dia.oferta-dia{flex-direction:row;align-items:center;gap:28px}
.of-dia-img{position:relative;width:min(48%,560px);flex:0 0 auto;border-radius:18px;overflow:hidden;border:2px solid #ffd166;box-shadow:0 0 40px rgba(255,209,102,.35);animation:ses-flota 6s ease-in-out infinite}
.of-dia-img img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.dia.oferta-dia.es-carta .of-dia-img img{object-fit:contain;background:#070b12}
.of-dia-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.odia-precio{margin:0;font-size:clamp(1.3rem,2.6vw,2rem)}.odia-precio s{color:var(--muted)}.odia-precio b{color:var(--amber);font-size:clamp(2rem,4.4vw,3.2rem);margin-left:8px}
.odia-meta{margin:0;color:var(--muted);font-size:clamp(1rem,1.7vw,1.3rem)}.odia-meta b{color:#fff}
@media (max-width:720px){.dia.oferta-dia{flex-direction:column}.of-dia-img{width:100%}}
@media (prefers-reduced-motion:reduce){.of-dia-img{animation:none}}

/* 15-sep · «Copiar ganadores» cuando el navegador no deja copiar solo */
textarea.gan-copia{display:block;width:100%;margin:10px 0 0;font:inherit;font-size:.95rem;line-height:1.5;color:var(--ink);background:var(--bg2);border:1px solid var(--teal);border-radius:10px;padding:10px 12px;resize:vertical}

/* ════════ 15-sep · EL FRAGMENTO PROHIBIDO (reto secreto S7) · fragmento.html ════════ */
body.fragmento{background:var(--bg)}
.fr-escena{min-height:100vh;min-height:100svh;padding:clamp(14px,4vw,48px);border-bottom:0;display:flex;align-items:center;justify-content:center;
  background-color:var(--bg);background-size:cover;background-position:center;background-repeat:no-repeat}
.fr-panel{width:min(1080px,100%);display:flex;flex-direction:column;gap:14px;padding:clamp(18px,3.4vw,40px);border-radius:22px;
  background:rgba(9,15,25,.74);border:1px solid rgba(55,224,236,.24);box-shadow:0 30px 80px rgba(0,0,0,.5);backdrop-filter:blur(6px);animation:fr-entra .5s ease both}
@keyframes fr-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fr-panel h1{font-size:clamp(2.2rem,6vw,4rem);margin:0;text-wrap:balance;text-shadow:0 0 34px rgba(55,224,236,.35)}
.fr-panel h2{font-size:clamp(1.7rem,4.4vw,2.8rem);margin:0;text-wrap:balance}
.fr-panel h1:focus,.fr-panel h2:focus{outline:none}
.fr-sub{margin:0;font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.55;color:#d7e3ec;max-width:70ch}
.fr-acciones{margin:4px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.fr-nebula{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center;background:rgba(55,224,236,.07);border:1px solid rgba(55,224,236,.25);border-radius:16px;padding:14px 16px}
.fr-nebula img{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 12%;border:2px solid var(--teal);box-shadow:0 0 26px rgba(55,224,236,.4)}
.fr-nebula p{margin:0;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.55;color:#e3eef5}
.fr-nebula p b:first-child{display:block;color:var(--teal);font-size:.8rem;letter-spacing:.24em;margin-bottom:2px}
/* el telar */
.fr-tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.fr-tipo{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(245,176,67,.07);border:1px solid rgba(245,176,67,.28)}
.fr-tipo .fr-ico{grid-row:span 2;font-size:1.7rem}
.fr-tipo b{font-family:'Unbounded';font-size:.95rem;color:var(--amber)}
.fr-tipo em{font-style:normal;font-size:.9rem;color:var(--mut)}
.fr-hilos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fr-hilo{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px 16px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(16,26,40,.72);border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
.fr-hilo.bien{border-color:var(--amber);box-shadow:0 0 22px rgba(245,176,67,.3)}
.fr-hilo.bien .fr-hilo-t::after{content:" ✓";color:var(--amber);font-weight:800}
.fr-hilo-t{font-size:clamp(1rem,1.5vw,1.12rem);font-weight:600}
.fr-opciones{display:flex;flex-wrap:wrap;gap:6px}
.fr-op{font:inherit;font-size:.9rem;font-weight:700;padding:9px 12px;border-radius:999px;border:1px solid #2a4656;background:rgba(8,12,20,.6);color:#dbe8f0;cursor:pointer;transition:.15s}
.fr-op:hover{border-color:var(--teal)}
.fr-op:focus-visible,.fr-reset:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.fr-op.on{background:linear-gradient(180deg,#37e0ec,#1fb3c4);color:#05222a;border-color:#37e0ec}
.fr-op:disabled{cursor:default;opacity:.85}
.fr-msg{margin:0;min-height:1.5em;color:#ffb3a7;font-size:1.02rem}
.fr-revela p{margin:0 0 6px;color:var(--mut)}
.fr-revela blockquote{margin:0;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.45;text-shadow:0 0 18px rgba(245,176,67,.35)}
/* el sello */
.fr-insc{display:flex;gap:clamp(6px,1.4vw,14px);flex-wrap:wrap}
.fr-insc span,.fr-lee span{display:grid;place-items:center;width:clamp(44px,7vw,64px);height:clamp(52px,8vw,74px);border-radius:12px;font-family:'Unbounded';font-weight:800;font-size:clamp(1.5rem,3.4vw,2.3rem)}
.fr-insc span{color:var(--amber);background:rgba(245,176,67,.08);border:1px solid rgba(245,176,67,.45);text-shadow:0 0 16px rgba(245,176,67,.6)}
.fr-lee span{color:var(--teal);background:rgba(55,224,236,.08);border:1px solid rgba(55,224,236,.4)}
.fr-lee{display:flex;gap:clamp(6px,1.4vw,12px);flex-wrap:wrap}
.fr-lee-t{margin:0;color:var(--mut)}
.fr-sello-cuerpo{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,34px);align-items:start}
.fr-disco-caja{display:flex;flex-direction:column;align-items:center;gap:10px}
.fr-disco{width:min(340px,86vw);height:auto;display:block}
.fr-aro1{fill:rgba(9,15,25,.92);stroke:rgba(245,176,67,.55);stroke-width:2}
.fr-aro2{fill:rgba(55,224,236,.06);stroke:rgba(55,224,236,.5);stroke-width:1.5}
.fr-aro3{fill:rgba(8,12,20,.96);stroke:rgba(55,224,236,.3)}
.fr-l{font-family:'Unbounded',sans-serif;font-size:16px;font-weight:700;text-anchor:middle}
.fr-l.ext{fill:#cfdbe4}.fr-l.ext.clave{fill:var(--amber);font-weight:900}
.fr-l.int{fill:var(--teal)}
.fr-int{transform-box:view-box;transform-origin:160px 160px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.fr-centro{fill:var(--mut);font-family:'DMSans',sans-serif;font-size:14px;letter-spacing:.2em;text-anchor:middle}
.fr-centro.n{fill:var(--amber);font-family:'Unbounded',sans-serif;font-size:28px;font-weight:800;letter-spacing:0}
.fr-giros{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0}
.fr-sello-der{display:flex;flex-direction:column;gap:12px;min-width:0}
.fr-campo{display:flex;flex-direction:column;gap:6px;font-weight:700;color:#dbe8f0}
.fr-campo input{font:inherit;font-family:'Unbounded',sans-serif;font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;border-radius:12px;border:1px solid #2a4656;background:rgba(8,12,20,.85);color:var(--ink);width:100%}
.fr-campo input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(55,224,236,.25)}
.fr-vaeon{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:10px 14px;border-radius:14px;background:rgba(255,93,93,.08);border:1px solid rgba(255,93,93,.4);animation:fr-sacude .45s ease}
.fr-vaeon img{width:110px;height:auto;filter:drop-shadow(0 0 18px rgba(120,220,255,.35))}
.fr-vaeon p{margin:0;font-size:clamp(1.02rem,1.6vw,1.2rem);font-style:italic;color:#ffc9c2}
@keyframes fr-sacude{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
/* la revelación */
.fr-rev{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:clamp(16px,3vw,34px);align-items:center}
.fr-carta img{display:block;width:100%;height:auto;max-height:74vh;object-fit:contain;border-radius:18px;box-shadow:0 0 60px rgba(245,176,67,.45);animation:fr-carta 1.1s cubic-bezier(.2,.9,.2,1) both}
@keyframes fr-carta{from{opacity:0;transform:scale(.86) rotateY(70deg)}to{opacity:1;transform:none}}
.fr-rev-txt{display:flex;flex-direction:column;gap:12px;min-width:0}
.fr-nombre{font-family:'Unbounded';font-size:clamp(2.6rem,8vw,5.2rem)!important;letter-spacing:.14em;color:var(--amber);text-shadow:0 0 40px rgba(245,176,67,.6)}
.fr-premio{margin:0;font-size:1.05rem;color:#f0e2c8}
.fr-nota{margin:0;color:var(--mut);font-style:italic}
.fr-pie{margin:0;padding:12px 16px 18px;text-align:center;color:var(--mut);font-size:.8rem}
.fr-reset{font:inherit;font-size:.8rem;background:none;border:0;color:var(--teal2);cursor:pointer;text-decoration:underline;padding:4px}
@media (max-width:720px){
  .fr-hilo,.fr-sello-cuerpo,.fr-rev{grid-template-columns:1fr}
  .fr-nebula{grid-template-columns:64px 1fr}.fr-nebula img{width:64px;height:64px}
  .fr-vaeon{grid-template-columns:80px 1fr}.fr-vaeon img{width:80px}
  .fr-carta{max-width:300px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){.fr-panel,.fr-vaeon,.fr-carta img{animation:none}.fr-int{transition:none}}

/* ════════ 15-sep · EL BUZÓN DEL MANDO · buzon.html («📡 Frecuencia de mando») ════════ */
.bz-cab{display:flex;gap:22px;align-items:center}
.bz-cab .bz-cap-grande{width:clamp(96px,14vw,150px);height:auto;flex:0 0 auto;filter:drop-shadow(0 0 28px rgba(245,176,67,.3))}
.bz-cab h1{margin:.1em 0 .25em}
.bz-cab p{margin:0;max-width:70ch;color:#d7e3ec}
.bz-puerta{max-width:620px}
.bz-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.bz-nueva{display:flex;flex-direction:column;gap:12px;margin:0}
.bz-nueva h2,.bz-lista h2,.bz-mando h2{margin:0;font-size:clamp(1.15rem,2.2vw,1.45rem)}
.bz-chips,.bz-filtros{display:flex;flex-wrap:wrap;gap:8px}
.bz-chip{font:inherit;font-size:.9rem;font-weight:700;padding:8px 13px;border-radius:999px;border:1px solid #2a4656;background:rgba(8,12,20,.6);color:#dbe8f0;cursor:pointer}
.bz-chip:hover{border-color:var(--teal)}
.bz-chip.on{background:rgba(55,224,236,.16);border-color:var(--teal);color:#eafcff}
.bz-chip b{color:var(--amber);margin-left:2px}
.bz-tipos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bz-tipo{font:inherit;font-weight:700;font-size:.95rem;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:14px;border:1px solid #2a4656;background:rgba(16,26,40,.8);color:#dbe8f0;cursor:pointer}
.bz-tipo span{font-size:1.5rem}
.bz-tipo.on{border-color:var(--amber);background:rgba(245,176,67,.12);color:#fff;box-shadow:0 0 18px rgba(245,176,67,.18)}
.bz-chip:focus-visible,.bz-tipo:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.bz-campo{display:flex;flex-direction:column;gap:6px;font-weight:700;position:relative}
.bz-campo textarea,.bz-campo select,.bz-contesta textarea,.bz-contesta select{font:inherit;font-weight:400;font-size:1rem;color:var(--ink);background:rgba(8,12,20,.85);border:1px solid #2a4656;border-radius:12px;padding:11px 13px;width:100%}
.bz-campo textarea{resize:vertical;min-height:130px}
.bz-campo textarea:focus,.bz-contesta textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(55,224,236,.2)}
.bz-cuenta{align-self:flex-end;font-weight:400;font-size:.78rem;color:var(--mut)}
.bz-urg{display:flex;gap:10px;align-items:center;font-weight:700;color:#ffc2b8}
.bz-urg input{width:20px;height:20px;accent-color:#ff7a6b}
.bz-acciones{margin:0}
.bz-sugiere{display:flex;flex-direction:column;gap:12px;position:sticky;top:84px}
.bz-cap{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(245,176,67,.07);border:1px solid rgba(245,176,67,.3)}
.bz-cap img{width:84px;height:auto}
.bz-cap p{margin:0;font-size:1rem;line-height:1.5}
.bz-cap p b{display:block;color:var(--amber);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:2px}
.bz-sol{padding:14px 16px;border-radius:14px;background:rgba(55,224,236,.07);border:1px solid rgba(55,224,236,.3)}
.bz-sol h3{margin:0 0 6px;font-size:1.02rem}
.bz-sol div{font-size:.97rem;line-height:1.55;color:#dbe8f0}
.bz-sol-botones{margin:0}
.bz-ok-cap{width:46px;height:auto;vertical-align:middle;margin-right:6px}
.bz-lista,.bz-mando{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.bz-mando{padding-top:18px;border-top:1px solid var(--line)}
.bz-msg{padding:14px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.bz-msg.urgente{border-color:rgba(255,122,107,.6)}
.bz-msg.fresco{border-color:var(--teal);box-shadow:0 0 22px rgba(55,224,236,.18)}
.bz-msg.resuelto{opacity:.82}
.bz-msg header{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.bz-tipo-et{font-weight:800}
.bz-msg header time,.bz-quien{font-size:.85rem;color:var(--mut)}
.chip.bz-urgente{background:rgba(255,122,107,.16);color:#ffc2b8;border-color:rgba(255,122,107,.5)}
.chip.bz-nueva-r{background:rgba(55,224,236,.16);color:#bff6fb;border-color:var(--teal)}
.bz-texto{margin:0;white-space:pre-wrap;font-size:1rem;line-height:1.55}
.bz-cx{margin:0;font-size:.82rem;color:var(--mut);font-family:ui-monospace,Menlo,monospace}
.bz-hilo{display:flex;flex-direction:column;gap:8px;padding-left:12px;border-left:2px solid var(--line)}
.bz-r{padding:10px 12px;border-radius:12px;background:rgba(16,26,40,.75)}
.bz-r.mando{background:rgba(55,224,236,.08);border:1px solid rgba(55,224,236,.25)}
.bz-r b{font-size:.85rem;color:var(--teal2)}
.bz-r.docente b{color:var(--amber)}
.bz-r p{margin:4px 0;white-space:pre-wrap}
.bz-r time{font-size:.78rem;color:var(--mut)}
.bz-contesta{display:flex;flex-direction:column;gap:8px}
.bz-contesta-b{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bz-contesta-b select{width:auto}
/* el acceso desde la consola, la sesión, el aula y la llamada */
.bz-acceso{white-space:nowrap}
.bz-acceso .bz-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--teal);color:#05222a;font-size:.75rem;font-weight:900;margin-left:4px}
.bz-flotante{position:fixed;right:14px;bottom:14px;z-index:40;font-size:.85rem;padding:8px 12px;border-radius:999px;background:rgba(10,15,24,.9);border:1px solid #2a4656;color:#dbe8f0;text-decoration:none;opacity:.8}
.bz-flotante:hover,.bz-flotante:focus-visible{opacity:1;border-color:var(--teal)}
@media (max-width:820px){.bz-grid{grid-template-columns:1fr}.bz-sugiere{position:static}.bz-cab{flex-direction:column;align-items:flex-start}}
@media (max-width:520px){.bz-tipos{grid-template-columns:1fr}.bz-tipo{flex-direction:row;justify-content:flex-start;padding:10px 12px}}
.gp-cab-b{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.prep-b{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ════════ 15-sep · LA SESIÓN: EL MENSAJE COMO APERTURA DE SAGA, LAS FICHAS Y LAS ENTREGAS ════════ */
.dia.foro-crawl{padding:0!important;background:#01030a;overflow:hidden;perspective:340px;perspective-origin:50% 28%;justify-content:flex-start}
.fc-cielo{position:absolute;inset:0;width:100%;height:100%;display:block}
.fc-intro{position:absolute;left:10%;right:10%;top:42%;margin:0;text-align:center;color:#5fd3ff;font-size:clamp(20px,2.5vw,36px);font-weight:500;opacity:0}
.foro-crawl.f1 .fc-intro{animation:fc-intro 4.2s ease both}
@keyframes fc-intro{0%{opacity:0}18%{opacity:1}78%{opacity:1}100%{opacity:0}}
.fc-logo{position:absolute;left:0;right:0;top:50%;text-align:center;font-family:'Unbounded',sans-serif;font-weight:900;letter-spacing:.06em;line-height:1;
  color:transparent;-webkit-text-stroke:2px #ffc93c;text-shadow:0 0 30px rgba(255,201,60,.25);font-size:clamp(34px,11vw,190px);opacity:0;transform:translateY(-50%) scale(1.5)}
.foro-crawl.f2 .fc-logo{animation:fc-logo 8s cubic-bezier(.35,0,.75,1) both}
@keyframes fc-logo{0%{opacity:1;transform:translateY(-50%) scale(1.5)}82%{opacity:1}100%{opacity:0;transform:translateY(-50%) scale(.04)}}
.fc-marco{position:absolute;inset:0;transform-origin:50% 100%;transform:rotateX(26deg);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 36%);mask-image:linear-gradient(to bottom,transparent 0%,#000 36%)}
.fc-texto{position:absolute;left:12%;right:12%;top:0;transform:translateY(var(--desde,100vh));color:#ffcf3f;font-size:clamp(22px,3vw,48px);
  font-weight:700;line-height:1.35;text-align:justify;hyphens:auto;visibility:hidden}
.foro-crawl.f3 .fc-texto{visibility:visible;animation:fc-sube var(--dur,60s) linear both}
@keyframes fc-sube{from{transform:translateY(var(--desde,100vh))}to{transform:translateY(var(--hasta,-200%))}}
.fc-texto p{margin:0 0 .9em}
.fc-texto .fc-ep{text-align:center;margin:0;font-size:.78em;letter-spacing:.14em;text-transform:uppercase}
.fc-texto .fc-tit{text-align:center;margin:.1em 0 .8em;font-size:1.7em;letter-spacing:.08em;text-transform:uppercase;color:#ffcf3f}
.fc-texto .fc-firma{text-align:right}
.fc-son{position:absolute;right:16px;bottom:16px;z-index:3;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;
  padding:6px 14px;font-size:16px;cursor:pointer;opacity:.7}
.fc-son:hover,.fc-son:focus-visible,.fc-son.pide{opacity:1;border-color:#ffc93c}
.foro-crawl.quieto .fc-intro,.foro-crawl.quieto .fc-logo{display:none}
.foro-crawl.quieto .fc-marco{transform:none;-webkit-mask-image:none;mask-image:none;overflow:auto;pointer-events:auto;padding:4vh 0}
.foro-crawl.quieto .fc-texto{position:static;transform:none;visibility:visible;margin:0 auto;max-width:900px;animation:none}
/* las entregas, a un clic, debajo de cada cara */
.ses-caras .ev-ver{display:inline-flex;align-items:center;gap:4px;margin-top:2px;padding:3px 10px;border-radius:999px;font-size:.85rem;font-weight:700;
  color:#07121a;background:var(--teal,#37e0ec);text-decoration:none;box-shadow:0 0 14px rgba(55,224,236,.35)}
.ses-caras .ev-ver:hover,.ses-caras .ev-ver:focus-visible{background:#fff}
/* 17-sep · «✍️ Leer» su reflexión (retos sin enlace), y la reflexión en grande */
.ses-caras button.ev-ver{border:0;cursor:pointer;font-family:inherit}
.ses-caras .ev-leer{background:var(--amber,#f5b043);box-shadow:0 0 14px rgba(245,176,67,.35)}
.ses-ficha .fr-pide{margin:6px 0 0;color:var(--mut);font-size:1rem;line-height:1.45}
.ses-ficha .fr-rf{margin:14px 0 6px;padding:14px 18px;border-left:4px solid var(--amber,#f5b043);background:rgba(0,0,0,.28);border-radius:0 14px 14px 0;font-size:1.35rem;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.ses-ficha .fr-reflexion .ev-ver{display:inline-flex;padding:6px 14px;border-radius:999px;font-weight:700;color:#07121a;background:var(--teal,#37e0ec);text-decoration:none}
/* cada cara abre su ficha */
.dia .cara[data-quien]{cursor:pointer;transition:transform .15s}
.dia .cara[data-quien]:hover{transform:scale(1.06)}
.ses-ficha{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center}
.ses-ficha-fondo{position:absolute;inset:0;background:rgba(4,8,14,.86);backdrop-filter:blur(3px)}
.ses-ficha .fr-caja{position:relative;z-index:1;max-height:92%;overflow:auto;background:#0b1320;border:1px solid var(--line);border-radius:18px;padding:22px 24px;
  width:min(94%,860px);font-size:1.05rem;animation:ses-entra .25s ease-out both}
.ses-ficha .fr-av{width:120px;height:120px}
.ses-ficha h4{font-family:'Unbounded',sans-serif;font-size:1rem;margin:14px 0 8px;color:#eafcff}
.ses-ficha-x{position:absolute;top:10px;right:12px;background:transparent;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;padding:4px 8px}
.ses-ficha-retos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 14px}
.ses-ficha-retos li{font-size:1rem}
.ses-ficha .fr-kpis{grid-template-columns:repeat(3,1fr)}
/* la puerta de la sesión: quién ha entrado y salir */
.ses-quien{margin:6px 0 0;color:var(--muted);font-size:1rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ses-puerta-txt .ses-h-larga{font-size:clamp(1.3rem,2.7vw,2.1rem)}
.ses-salir-b{flex:0 0 auto;border:1px solid var(--line);background:rgba(8,12,20,.72);color:var(--muted);border-radius:8px;padding:5px 10px;font-size:.8rem;cursor:pointer;opacity:.6;transition:.15s}
.ses-salir-b:hover,.ses-salir-b:focus-visible{opacity:1;color:#fff}
.ses-salir-b.seguro{opacity:1;color:#ffb4a8;border-color:#ff8f7e}
/* 15-sep · el código de clase, tapado hasta que se pulsa; y los embeds, una sola vez para todos los grupos */
.gp-cod{display:inline-flex;align-items:baseline;gap:10px;background:transparent;border:0;padding:2px 0;cursor:pointer;
  font:700 1.3rem/1.1 ui-monospace,'IBM Plex Mono',monospace;letter-spacing:.2em;color:#fff}
.gp-cod em{font:700 .8rem/1 'DMSans',system-ui,sans-serif;letter-spacing:0;font-style:normal;color:var(--teal,#37e0ec);white-space:nowrap}
.gp-cod:hover em,.gp-cod:focus-visible em{text-decoration:underline}
@media(min-width:900px){ .gp-grid.uno .gp-cod{font-size:2.1rem;letter-spacing:.14em} }
.gp-gen{display:flex;align-items:center;justify-content:space-between;gap:14px 22px;flex-wrap:wrap;margin:14px 0 4px;padding:14px 18px;
  border:1px dashed var(--line);border-radius:16px;background:rgba(55,224,236,.04)}
.gp-gen-txt{flex:1 1 320px}
.gp-gen-txt h3{margin:0 0 4px;font-size:1.05rem}
.gp-gen-txt p{margin:0}
.gp-gen-b{display:flex;gap:8px;flex-wrap:wrap}
/* 15-sep · el Capitán contesta al momento: las dudas rápidas y sus respuestas con los datos de cada grupo */
.bz-chips-t{margin:2px 0 6px;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bz-chip.duda{border-color:rgba(55,224,236,.45);background:rgba(55,224,236,.07)}
.bz-chip.duda:hover,.bz-chip.duda:focus-visible{background:rgba(55,224,236,.16)}
.bz-dato{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.bz-dato b{display:block}
.bz-dato span{color:var(--teal2,#8fe9f0);font-size:.95rem}
.bz-dato .bz-codigo{font:700 1.25rem/1.2 ui-monospace,'IBM Plex Mono',monospace;letter-spacing:.18em;color:#fff}
.bz-botones{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.bz-enl{align-items:flex-start;flex-direction:column}
/* 15-sep · el temporizador del aula */
.au-tiempo{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 12px;background:#070b12;border-radius:16px}
.au-tiempo:fullscreen{justify-content:center;padding:4vh 4vw}
.au-reloj{font:800 clamp(72px,16vw,220px)/1 'Unbounded',sans-serif;letter-spacing:.02em;color:#eafcff;text-shadow:0 0 40px rgba(55,224,236,.25);font-variant-numeric:tabular-nums}
.au-tiempo:fullscreen .au-reloj{font-size:min(30vw,48vh)}
.au-t-barra{width:min(100%,760px);height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.au-t-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--teal,#37e0ec),var(--amber,#f5b043));transition:width .25s linear}
.au-t-pre,.au-t-ctl{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.au-t-pre .btn.on{border-color:var(--teal,#37e0ec);color:#fff}
.au-t-otro{display:inline-flex;align-items:center;gap:6px;font-size:.95rem;color:var(--muted)}
.au-t-otro input{width:78px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:#0b1320;color:#fff;font-size:1rem}
.au-tiempo.ultimos .au-reloj{color:#ffb4a8;animation:au-late 1s ease-in-out infinite}
.au-tiempo.fin .au-reloj{color:#ff8f7e}
@keyframes au-late{50%{transform:scale(1.04)}}
.au-mini-reloj{border:1px solid var(--line);background:rgba(8,12,20,.7);color:#eafcff;border-radius:999px;padding:4px 10px;font:700 .9rem 'DMSans',sans-serif;cursor:pointer;font-variant-numeric:tabular-nums}
.au-mini-reloj.corre{border-color:var(--teal,#37e0ec)}
.au-mini-reloj.fin{border-color:#ff8f7e;color:#ffb4a8}
@media (prefers-reduced-motion:reduce){.au-tiempo.ultimos .au-reloj{animation:none}}
/* 15-sep · el simulacro de cada semana, con su selector */
.dia.simulacro{flex-direction:column;gap:8px}
.sim-barra{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;color:var(--muted);font-size:1rem}
.sim-t{font-weight:800;color:#eafcff}
.sim-sel{display:inline-flex;align-items:center;gap:6px}
.sim-sel select{font:inherit;font-weight:700;padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:#0b1320;color:#fff}
.sim-nota{margin-left:auto;font-size:.9rem;color:var(--amber,#f5b043)}
.dia.simulacro iframe{flex:1}
/* 15-sep · un segundo enlace de evidencia (el «+») */
.ev-par{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%}
.ev-par>input:not([hidden]){flex:1 1 220px;min-width:0}
.ev-par>input.ev2{flex-basis:100%}
.ev-mas{flex:0 0 auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:rgba(55,224,236,.08);color:var(--teal,#37e0ec);
  font:800 1.2rem/1 'DMSans',system-ui,sans-serif;cursor:pointer}
.ev-mas:hover,.ev-mas:focus-visible{background:rgba(55,224,236,.18);color:#fff}
.ev-mas[hidden],.ev-par>input[hidden]{display:none}
.ses-caras .ev-vers{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
/* 15-sep · las insignias de la Nave, por temas */
.ins-temas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:8px}
.ins-tema{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.02)}
.ins-tema.completo{border-color:rgba(245,176,67,.55);background:rgba(245,176,67,.05)}
.ins-tema-cab{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ins-tema-cab img{width:34px;height:34px;object-fit:contain;flex:0 0 auto}
.ins-tema-t{flex:1;min-width:0;line-height:1.2}
.ins-tema-t b{display:block;font-size:.95rem}
.ins-tema-t span{display:block;font-size:.8rem;color:var(--mut,#8fa3b4)}
.ins-tema-cab em{font-style:normal;font-weight:800;font-size:.85rem;color:var(--teal,#37e0ec);white-space:nowrap}
.ins-tema.completo .ins-tema-cab em{color:var(--amber,#f5b043)}
.ins-tema .badge-col{margin-top:4px}
.ins-temas .ins-tema .badge-col{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px 8px}
.ins-temas .ins-tema .badge-col .b img{width:54px;height:54px}

/* ════════ 15-sep · MODO DOCENTE, INVITACIÓN, PROFESORES Y LA PRUEBA DEL EQUIPO ════════ */
.sg-modo{border:1px solid rgba(245,176,67,.45);background:rgba(245,176,67,.08);color:#f5d9a8;border-radius:999px;padding:6px 12px;
  font:700 .85rem 'DMSans',system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.sg-modo:hover,.sg-modo:focus-visible{background:rgba(245,176,67,.18);color:#fff}
.sg-modo.on{border-color:var(--teal,#37e0ec);background:rgba(55,224,236,.12);color:#dffbff}
/* la invitación */
.inv-caja{display:flex;align-items:center;gap:clamp(16px,3vw,36px);padding:clamp(18px,4vh,40px) clamp(16px,4vw,48px);border:1px solid var(--line);
  border-radius:20px;background:radial-gradient(120% 100% at 30% 0,rgba(55,224,236,.12),transparent 60%),#070b12;margin:18px 0}
.inv-cap{width:clamp(130px,22vw,260px);flex:0 0 auto;filter:drop-shadow(0 0 40px rgba(55,224,236,.28))}
.inv-txt{flex:1;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.inv-txt h2{margin:0;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.12}
.inv-txt .sub{margin:0;color:var(--muted);font-size:clamp(1rem,1.5vw,1.2rem);max-width:52ch}
.inv-txt .kicker{color:var(--teal2);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:800}
.inv-botones{display:flex;gap:10px;flex-wrap:wrap;margin:0}
@media (max-width:720px){.inv-caja{flex-direction:column;text-align:center}.inv-txt{align-items:center}.inv-cap{width:130px}}
/* profesores */
.pr-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px}
.pr-cifras div{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.03)}
.pr-cifras b{display:block;font:800 1.6rem/1.1 'Unbounded',sans-serif;color:#eafcff}
.pr-cifras span{font-size:.85rem;color:var(--muted)}
.pr-invitar h2,.pr-lista h2{margin:0 0 6px;font-size:1.2rem}
.pr-fila{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.pr-fila input{flex:1 1 220px;min-width:0;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:#0b1320;color:#fff;font:inherit}
.pr-enlace{margin:10px 0;padding:10px 12px;border:1px dashed rgba(55,224,236,.5);border-radius:12px;background:rgba(55,224,236,.05)}
.pr-enlace p{margin:0 0 6px}
.pr-enlace code{word-break:break-all;font-size:.9rem}
.pr-invs{margin-top:10px}
.pr-invs ul{margin:6px 0 0;padding-left:18px}
.pr-invs li{margin:4px 0}
.pr-lista{margin-top:16px}
.pr-lista-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pr-filtros{display:flex;gap:6px;flex-wrap:wrap}
.pr-profe{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(260px,1fr);grid-template-areas:"quien datos" "grupos grupos" "acciones acciones";
  gap:8px 16px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 10px;background:rgba(255,255,255,.02)}
.pr-profe.ref{border-color:rgba(245,176,67,.4)}
.pr-quien{grid-area:quien;display:flex;align-items:center;gap:10px;min-width:0}
.pr-quien img,.pr-ini{width:44px;height:44px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:#0b1320;display:grid;place-items:center;font-weight:800;color:#eafcff}
.pr-quien div{min-width:0}
.pr-quien b{display:block}
.pr-quien span{display:block;font-size:.9rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-quien em{font-style:normal;font-size:.8rem;font-weight:800;color:var(--amber,#f5b043)}
.pr-datos{grid-area:datos;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pr-datos div{text-align:center}
.pr-datos b{display:block;font-size:1.1rem;color:#eafcff}
.pr-datos .pr-cuando{font-size:.9rem}
.pr-datos span{font-size:.8rem;color:var(--muted)}
.pr-grupos{grid-area:grupos;display:flex;gap:6px;flex-wrap:wrap}
.pr-grupo{display:inline-flex;gap:6px;align-items:baseline;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:#dbe8f0;text-decoration:none;font-size:.9rem}
.pr-grupo small{color:var(--teal2,#8fe9f0);font-size:.8rem}
.pr-grupo:hover{border-color:var(--teal,#37e0ec)}
.pr-acciones{grid-area:acciones;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pr-acciones select{padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:#0b1320;color:#fff;font:inherit;font-size:.9rem}
.pr-acciones .seguro{border-color:#ff8f7e;color:#ffb4a8}
@media (max-width:720px){.pr-cifras{grid-template-columns:repeat(2,1fr)}.pr-profe{grid-template-columns:1fr;grid-template-areas:"quien" "datos" "grupos" "acciones"}}
/* la prueba manual del equipo */
.pe-wrap{max-width:900px}
.pe-cuenta{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:rgba(55,224,236,.12);color:#dffbff;font-weight:800}
.pe-bloque{margin:0 0 18px}
.pe-bloque h2{font-size:1.2rem;margin:0 0 8px}
.pe-pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pe-paso{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.02)}
.pe-paso label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.pe-paso input{margin-top:4px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--teal,#37e0ec)}
.pe-qq{font-weight:700}
.pe-ver{margin:6px 0 0 28px;color:var(--muted);font-size:.95rem}
.pe-paso.hecho{opacity:.62}
.pe-paso.hecho .pe-qq{text-decoration:line-through;text-decoration-color:rgba(55,224,236,.6)}

/* ================================================================== 15-sep (tarde) · LA CONSOLA DEL GRUPO, REPENSADA
   Norberto: la Cola de nota solo cuando hay algo (y brillando), la fecha del Zoco, el equipo docente persona a persona,
   los escuadrones que se abren, la ficha que SÍ se abre y el calendario como un calendario. */
@keyframes colaBrilla{0%,100%{box-shadow:0 0 0 0 rgba(245,176,67,0)}50%{box-shadow:0 0 16px 2px rgba(245,176,67,.45)}}
.pest.activa.pest-aviso{color:#05222a}
.pest.pest-aviso{border-color:var(--amber);color:#ffe3a1;animation:colaBrilla 2.2s ease-in-out infinite}
.pest-n{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:8px;padding:0 6px;border-radius:99px;
  background:var(--amber);color:#1a1204;font-size:.8rem;font-weight:800;font-variant-numeric:tabular-nums;vertical-align:1px}
.gp-cola{display:flex;align-items:center;gap:8px;width:100%;padding:10px 13px;border-radius:11px;border:1px solid var(--amber);
  background:rgba(245,176,67,.1);color:#ffe3a1;font:inherit;font-size:.9rem;text-align:left;cursor:pointer;animation:colaBrilla 2.2s ease-in-out infinite}
.gp-cola b{font-variant-numeric:tabular-nums}
.gp-cola span{margin-left:auto;font-weight:700;color:var(--amber);white-space:nowrap}
.gp-grid.uno .gp-cola{grid-column:1/-1}
@media (prefers-reduced-motion:reduce){.pest.pest-aviso,.gp-cola{animation:none;box-shadow:0 0 12px rgba(245,176,67,.35)}}

/* Mi gente: de qué escuadrón */
.gente-filtro{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.gf{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;border:1px solid #24304a;background:#0d1420;
  color:#c9d6e6;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;transition:border-color .15s}
.gf img{width:22px;height:22px;object-fit:contain}
.gf em{font-style:normal;font-weight:500;color:var(--mut);font-size:.8rem}
.gf span{font-variant-numeric:tabular-nums;font-weight:700;color:var(--mut);background:rgba(255,255,255,.06);border-radius:99px;padding:0 7px}
.gf:hover{border-color:#3a5578}
.gf.on{border-color:var(--teal);background:rgba(55,224,236,.1);color:#eafcff}
.gf.on span{color:var(--teal)}
#consola .tabla tbody tr[data-r]:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}

/* la ficha, en una ventana encima */
body.con-modal{overflow:hidden}
.c-modal{position:fixed;inset:0;z-index:1005;display:none;align-items:flex-start;justify-content:center;padding:4vh 16px;
  background:rgba(4,7,12,.72);backdrop-filter:blur(3px);overflow-y:auto}
.c-modal.abierto{display:flex}
.c-modal-caja{position:relative;width:min(760px,100%);background:linear-gradient(180deg,#101a28,#0b1119);border:1px solid #2a5a66;
  border-radius:18px;padding:22px 24px 20px;box-shadow:0 30px 90px rgba(0,0,0,.6);outline:none}
.c-modal-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:1px solid #2a4656;background:#0d1420;
  color:var(--ink);font-size:1rem;cursor:pointer}
.c-modal-x:hover,.c-modal-x:focus-visible{border-color:var(--teal)}
.fi-cab{display:flex;align-items:center;gap:14px;padding-right:44px}
.fi-emb{width:56px;height:56px;object-fit:contain;flex:none}
.fi-esc{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--teal)}
.fi-cab h3{margin:2px 0 0;font-size:1.3rem;text-wrap:balance}
.fi-cab h3 span{font-family:'DMSans',system-ui,sans-serif;font-weight:500;font-size:1rem;color:var(--mut)}
.fi-cab p{margin:2px 0 0}
.fi-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin:14px 0 10px}
.fi-cifras div{padding:9px 12px;border-radius:11px;background:rgba(0,0,0,.28);border:1px solid var(--line)}
.fi-cifras b{display:block;font-family:'Unbounded',sans-serif;font-size:1.15rem;font-variant-numeric:tabular-nums}
.fi-cifras span{font-size:.78rem;color:var(--mut)}
.c-modal-caja h4{margin:14px 0 4px;font-size:.95rem}
.c-modal-aviso{margin:10px 0 0}

/* el Zoco: cuándo se abre */
.zoco-abre{margin:4px 0 10px;padding:9px 13px;border-radius:10px;background:rgba(55,224,236,.07);border:1px solid #1f4a52;font-size:.95rem}

/* el equipo docente, persona a persona */
.eq-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;margin-top:12px}
.eq-p{display:flex;flex-direction:column;gap:9px;padding:14px 16px;border-radius:14px;background:#0d1420;border:1px solid #24304a}
.eq-p.ref{border-color:#4a3a1e}
.eq-cab{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}   /* 15-sep · si no cabe, la etiqueta baja: el correo ya no se parte a trozos */
.eq-cab img{width:52px;height:52px;object-fit:contain;flex:none}
.eq-sin{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.05);font-size:1.4rem;flex:none}
.eq-quien{min-width:0;flex:1 1 170px}
.eq-quien h4{margin:0;font-size:1.02rem}
.eq-quien p{margin:0;overflow-wrap:anywhere}
.eq-rol{flex:none;margin-left:auto;font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:99px;border:1px solid #24304a;color:var(--mut);white-space:nowrap}
.eq-rol.ref{color:var(--amber);border-color:#4a3a1e;background:rgba(245,176,67,.08)}
.eq-esc{margin:0;font-size:.92rem}
.eq-lnk{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--teal);cursor:pointer}
.eq-lnk:hover{text-decoration:underline}
.eq-otros{margin:0;color:var(--mut)}
.eq-otros a{color:var(--teal)}
.eq-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:2px}
.eq-acc:empty{display:none}
#consola .eq-p .btn.min{padding:7px 12px;font-size:.84rem}
.eq-quien h4 .chip{font-size:.75rem;padding:1px 7px;vertical-align:2px;letter-spacing:.06em;border:1px solid #2a4656;color:var(--teal)}
.eq-pasar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.88rem;color:var(--mut)}
.eq-p .eq-pasar{margin-top:auto}
.eq-p .eq-pasar + .eq-acc{margin-top:0}
#consola .eq-pasar select{display:inline-block;width:auto;max-width:200px;margin:0;padding:7px 10px}
#consola .eq-pasar label{display:inline-flex;align-items:center;gap:6px;margin:0}
.eq-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 12px}

/* los escuadrones, que se abren */
.esc-det{margin:10px 0}
.esc-det>summary{list-style:none;cursor:pointer;transition:border-color .15s}
.esc-det>summary::-webkit-details-marker{display:none}
.esc-det>summary:hover{border-color:#3a5578}
.esc-det>summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.esc-det .esc-val{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.esc-ver{font-size:.78rem;font-weight:700;color:var(--mut)}
.esc-ver::after{content:" ▾"}
.esc-det[open] .esc-ver::after{content:" ▴"}
.esc-det[open]>summary{border-color:var(--teal);border-bottom-left-radius:0;border-bottom-right-radius:0}
.esc-cuerpo{border:1px solid var(--teal);border-top:0;border-radius:0 0 13px 13px;padding:12px 16px 14px;background:#0b1119}
.esc-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:6px}
.esc-datos div{display:flex;flex-direction:column;padding:9px 12px;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid var(--line)}
.esc-datos span{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:700}
.esc-datos b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.esc-datos em{font-style:normal;font-size:.82rem;color:var(--mut);word-break:break-all}
@media(max-width:560px){.esc-det .esc-val{align-items:flex-start}}

/* el calendario, como un calendario: una fila por semana con sus siete días */
.cal-resumen{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.cal-resumen span{padding:6px 11px;border-radius:10px;background:#0b1119;border:1px solid var(--line);font-size:.88rem;color:var(--mut)}
.cal-resumen b{color:var(--ink);font-variant-numeric:tabular-nums}
.cal-resumen em{font-style:normal}
.cal-resumen .cal-hoy-txt{border-color:#4a3a1e;color:#e8d6b0}
.cal-cab p{margin:0;flex:1 1 320px}
.cal-ley{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px;font-size:.8rem}
.cal-ley .l{padding:4px 10px;border-radius:8px;border:1px solid var(--line);color:var(--mut)}
.cal-ley .l.lectiva{color:var(--teal);background:rgba(55,224,236,.08)}
.cal-ley .l.nolectiva{background:repeating-linear-gradient(135deg,rgba(159,178,194,.14) 0 6px,transparent 6px 12px)}
.cal-ley .l.festivo{color:#e8d6b0;background:repeating-linear-gradient(135deg,rgba(245,176,67,.16) 0 6px,transparent 6px 12px)}
.cal-ley .l.canje{color:var(--amber);background:rgba(245,176,67,.08)}
.cal-ley .l.hoy{border-color:var(--amber);color:#e8d6b0}
.cal-vis{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.cal-fila{display:grid;grid-template-columns:58px minmax(250px,330px) minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:6px 10px;border-radius:11px;border:1px solid transparent;background:#0b1119}
.cal-fila.cal-cabeza{background:none;padding-top:0;padding-bottom:0;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:700}
.cal-7{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-cabeza .cal-7 span{text-align:center}
.cal-d{display:flex;flex-direction:column;align-items:center;justify-content:center;height:40px;border-radius:8px;
  font-variant-numeric:tabular-nums;font-weight:600;font-size:.92rem;color:var(--ink);background:rgba(255,255,255,.03);line-height:1.05}
.cal-d small{font-size:.75rem;font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:.04em}
.cal-d.hoy{box-shadow:inset 0 0 0 2px var(--amber);color:#fff}
.cal-et{font-family:'Unbounded',sans-serif;font-weight:700;font-size:.95rem;text-align:center;padding:7px 0;border-radius:9px;color:var(--mut)}
.cal-fila.lectiva .cal-et{color:var(--teal);background:rgba(55,224,236,.1)}
.cal-fila.lectiva .cal-d{background:rgba(55,224,236,.07)}
.cal-fila.nolectiva{background:repeating-linear-gradient(135deg,rgba(159,178,194,.08) 0 10px,transparent 10px 20px),#0b1119}
.cal-fila.nolectiva .cal-d{color:var(--mut);background:transparent}
.cal-fila.festivo{background:repeating-linear-gradient(135deg,rgba(245,176,67,.1) 0 10px,transparent 10px 20px),#0b1119}
.cal-fila.festivo .cal-d{color:#e8d6b0;background:transparent}
.cal-fila.canje .cal-et{color:var(--amber);background:rgba(245,176,67,.12)}
.cal-fila.canje .cal-d{background:rgba(245,176,67,.07)}
.cal-fila.actual{border-color:var(--amber);box-shadow:0 0 18px rgba(245,176,67,.14)}
.cal-fila.pasada{opacity:.55}
.cal-fila.toca{cursor:pointer;transition:border-color .15s}
.cal-fila.toca:hover{border-color:#3a5578}
.cal-fila.toca:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.cal-que{font-size:.88rem;line-height:1.5;color:#d7e4ec;min-width:0}
.cal-tg{font-size:.78rem;font-weight:700;color:var(--mut);border:1px solid #2a3a52;border-radius:99px;padding:4px 10px;white-space:nowrap;
  opacity:0;transition:opacity .15s}
.cal-fila.toca:hover .cal-tg,.cal-fila.toca:focus-visible .cal-tg,.cal-fila.nolectiva.toca .cal-tg,.cal-fila.festivo.toca .cal-tg{opacity:1}
.cal-fila.nolectiva.toca .cal-tg,.cal-fila.festivo.toca .cal-tg{color:#e8d6b0;border-color:#5a4a2a}
@media (hover:none){.cal-tg{opacity:1}}
@media(max-width:760px){
  .cal-fila{grid-template-columns:46px minmax(0,1fr);grid-template-areas:"et dias" "que que" "tg tg";gap:6px 8px}
  .cal-et{grid-area:et}.cal-7{grid-area:dias}.cal-que{grid-area:que}.cal-tg{grid-area:tg;justify-self:start;opacity:1}
  .cal-cabeza .cal-que,.cal-fila .cal-que:empty{display:none}
  .cal-d{height:36px;font-size:.88rem}
}

/* ================================================================== 15-sep · LA NAVE: SIMETRÍA
   Los contadores de cada planeta, en el MISMO eje (Norberto: «0/4, 0/2… deben estar en el mismo eje vertical»): el
   contador y la flecha compartían el hueco sobrante y cada contador caía donde le dejaba su título. */
.reto-pl .reto-cuenta{margin-left:auto;min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
.reto-pl>summary::after{margin-left:14px}
.reto-pl>summary:not(:has(.reto-cuenta))::after{margin-left:auto}
/* Los dos retos de la semana, a la MISMA altura («es importante la simetría y la estética»), con el premio y «Cómo se
   hace» al pie de cada uno. Si abres uno, el de al lado no se estira vacío. */
.rs-grid{align-items:stretch}
.rs-grid:has(.reto-sem[open]){align-items:start}
.reto-sem:not([open])>summary{height:100%;box-sizing:border-box;display:flex;flex-direction:column}
.reto-sem:not([open]) .rs-cols{flex:1;align-items:stretch}
.reto-sem:not([open]) .rs-izq{display:flex;flex-direction:column}
.reto-sem:not([open]) .rs-premio{margin-top:auto}
.reto-sem:not([open]) .rs-der{justify-content:center}

/* ================================================================== 15-sep · LAS CAJAS INCRUSTADAS, SIN FONDO
   Norberto: «en los embeds que son ventanas o cajas sueltas (recompensas…), fondo transparente, solo el fondo, no la
   caja». El premio por enlace, validar un reto y el foro de la semana: se ve el Genially detrás. La sesión, el aula, la
   llamada y el tablero se quedan con su fondo (ocupan todo el lienzo). `color-scheme:normal` porque si el iframe
   declarase otro esquema que la página que lo incrusta, el navegador le pintaría un fondo opaco igualmente. */
html:has(body.embed.embed-caja){background:transparent;color-scheme:normal}
body.embed.embed-caja{background:transparent}
body.embed.embed-caja section,body.embed.embed-caja .wrap{background:transparent}
body.embed.embed-caja .hv{min-height:0;padding:8px 0}
/* 17-sep · Norberto: «en el embed aparece una línea negra horizontal en la parte inferior, elimínala; reduce al máximo el
   radio de la sombra». La línea era el borde de abajo de toda <section> (y la sombra de 70 px se cortaba en el iframe). */
body.embed section{border-bottom:0}
body.embed.embed-caja .hv-caja{box-shadow:0 1px 3px rgba(0,0,0,.35)}
body.embed.embed-caja .hv-caja.gana{box-shadow:0 0 0 1px rgba(255,209,102,.35),0 1px 3px rgba(0,0,0,.35)}
body.embed.embed-caja .hv-fig img{box-shadow:0 1px 3px rgba(0,0,0,.35)}

/* ================================================================== 15-sep · «QUÉ HAY QUE HACER, EXPLICADO» CON LA TARJETA DE
   LA SEMANA (Norberto: «muy fea, no hay imágenes, no se ve la insignia… y compacta un poco más la tarjeta»). */
.reto-pl > .rs-grid-pl{margin:12px 14px 14px;gap:10px}
.reto-sem > summary{padding:12px 14px}
.rs-cols{grid-template-columns:1fr 112px;gap:12px}
.rs-trofeo img{max-width:96px}
.rs-tit{margin-bottom:6px}
.rs-gancho{margin:-2px 0 8px}
.rs-abrir{margin-top:8px}
/* el ejemplo, solo donde lo hay */
.rs-ej{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;font-size:.84rem;font-weight:700;
  color:var(--amber);text-decoration:none;border:1px solid #4a3a1e;background:rgba(245,176,67,.08)}
.rs-ej:hover,.rs-ej:focus-visible{background:rgba(245,176,67,.18)}
/* 17-sep · el ejemplo de cada reto, plegado bajo los pasos */
.rs-ej-ver{margin:8px 0 0;font-size:.9rem}
.rs-ej-ver a{display:inline-flex;gap:4px;flex-wrap:wrap;color:var(--amber);font-weight:700;text-decoration:none;padding:7px 11px;border-radius:9px;
  background:rgba(245,176,67,.08);border:1px solid #4a3a1e}
.rs-ej-ver a span{color:#f3e2c0;font-weight:600}
.rs-ej-ver a:hover,.rs-ej-ver a:focus-visible{background:rgba(245,176,67,.16)}
@media(max-width:560px){.rs-cols{grid-template-columns:1fr 88px;gap:10px}}

/* 15-sep · lo que ayuda a hacer el reto, dentro de su tarjeta (el padlet de la clase, el GIF de cómo copiar el enlace) */
.rs-extra{margin:10px 0 0}
.rs-gif{margin:10px 0 0;border:1px solid #24304a;border-radius:10px;padding:8px 12px;background:#0b1119}
.rs-gif summary{cursor:pointer;font-weight:700;font-size:.9rem;color:var(--teal)}
.rs-gif img{display:block;max-width:100%;height:auto;margin-top:8px;border-radius:8px}
.rs-escape{flex-direction:column;align-items:flex-start;gap:6px}

/* 15-sep · una festiva de la UNIR que en este grupo aún cuenta como lectiva (grupos de antes de la regla) */
.cal-aviso{color:#ffe3a1;font-weight:700}
.cal-aviso-caja{margin:4px 0 12px;padding:9px 13px;border-radius:10px;background:rgba(245,176,67,.1);border:1px solid #6a5022;color:#ffe3a1}
.cal-aviso-caja .btn{margin-left:6px}

/* 15-sep · la cabecera del grupo en la consola: nombre y datos a la izquierda, botones a la derecha */
#consola .c-cab{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding:14px 18px}
#consola .c-cab-t{display:flex;flex-direction:column;gap:2px;min-width:0}
#consola .c-cab-t b{font-size:1.08rem;line-height:1.25}
#consola .c-cab-t span{color:var(--muted);font-size:.92rem}
#consola .c-cab-b{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ================================================================== LAS REFLEXIONES DE LOS RETOS (15-sep, noche)
   Norberto: «que lo respondan directamente sobre el reto… una caja de texto más grande» y «que puedan ver el del resto de
   sus compañeros así como el enlace… y responderse/comentar». La caja en la tarjeta del reto, «Lo que ha escrito tu
   tripulación» debajo, la reflexión en la ficha del docente y «Lo que dijisteis» en la sesión. */
.rf-caja{flex:1 1 100%;display:flex;flex-direction:column;gap:6px;margin:2px 0 4px}
.rf-et{font-weight:700;font-size:.95rem;color:#e8eefc;line-height:1.35}
#consola .rf-et,.rf-et{margin:0}
.rf-preg{display:block;font-weight:500;font-size:.88rem;color:var(--muted);margin-top:2px}
.rf-txt{width:100%;min-height:130px;padding:11px 13px;border-radius:10px;border:1px solid #2c3a56;background:#0b1119;color:#e8eefc;
  font:inherit;font-size:.95rem;line-height:1.5;resize:vertical}
.rf-txt:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(55,224,236,.15)}
.rf-txt.falta{border-color:#e06a5a;box-shadow:0 0 0 3px rgba(224,106,90,.18)}
.rf-pie{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;font-size:.84rem;color:var(--muted)}
.rf-n{font-variant-numeric:tabular-nums;font-weight:700;padding:2px 9px;border-radius:99px;border:1px solid #2c3a56;white-space:nowrap}
.rf-n.ok{color:#4fd18b;border-color:rgba(79,209,139,.45)}
.rf-aviso{flex:1 1 220px;line-height:1.35}
.rf-mia .rf-pie{justify-content:space-between}
.rf-tripu{margin-top:14px;padding-top:12px;border-top:1px dashed #2c3a56}
.rf-ver{font-weight:700}
.rf-lista{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.rf-cuantos,.rf-vacio{margin:0;font-size:.88rem;color:var(--muted)}
.rf-item{padding:12px 14px;border-radius:12px;background:#0d1420;border:1px solid #24304a;display:flex;flex-direction:column;gap:8px}
.rf-item.mia{border-color:rgba(55,224,236,.45)}
.rf-quien{display:flex;align-items:center;gap:10px;font-size:.95rem}
.rf-quien .chip{font-size:.75rem}
.rf-cara{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid rgba(55,224,236,.5);flex:none;background:#101a2a}
.rf-ini{display:grid;place-items:center;font-weight:800;color:var(--teal)}
.rf-texto{margin:0;font-size:.95rem;line-height:1.55;color:#dfe8f6;white-space:normal;overflow-wrap:anywhere}
.rf-enlaces{margin:0;display:flex;gap:8px;flex-wrap:wrap}
.rf-enlace{font-weight:700;font-size:.88rem;color:var(--teal);text-decoration:none;padding:4px 10px;border-radius:99px;border:1px solid rgba(55,224,236,.35)}
.rf-enlace:hover{background:rgba(55,224,236,.08)}
.rf-coms{display:flex;flex-direction:column;gap:5px}
.rf-coms:empty{display:none}
.rf-com{margin:0;padding:7px 10px;border-radius:9px;background:#0b1119;font-size:.9rem;line-height:1.45;overflow-wrap:anywhere}
.rf-com b{color:var(--amber);margin-right:4px}
.rf-borrar{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.85rem;padding:0 4px}
.rf-borrar:hover{color:#e06a5a}
.rf-comentar{display:flex;gap:8px;flex-wrap:wrap}
.rf-comentar input{flex:1 1 200px;min-width:0;padding:8px 11px;border-radius:9px;border:1px solid #2c3a56;background:#0b1119;color:#e8eefc;font:inherit;font-size:.9rem}
.rf-comentar input:focus{outline:none;border-color:var(--teal)}
/* la ficha del docente */
.evid-rf{margin:6px 0 4px;padding:9px 12px;border-left:3px solid var(--teal);background:rgba(55,224,236,.05);border-radius:0 10px 10px 0}
.evid-rf-t{margin:0 0 6px;font-size:.92rem;line-height:1.5;overflow-wrap:anywhere}
.evid-rf-coms summary{cursor:pointer;font-size:.88rem;color:var(--muted);font-weight:600}
.evid-com{margin:6px 0 0;font-size:.88rem;line-height:1.45}
.evid-rf p:last-child{margin-bottom:0}
/* la sesión: «Lo que dijisteis» */
.dia.reflex h2{margin-bottom:.35em}
.rfx-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.rfx-lista.n1{grid-template-columns:minmax(0,1fr)}
.rfx{position:relative;margin:0;padding:16px 18px;border-radius:16px;background:rgba(13,20,32,.85);border:1px solid rgba(55,224,236,.28);
  display:flex;flex-direction:column;gap:10px;animation:ses-pop .45s ease-out both;animation-delay:calc(var(--i,0)*80ms)}
.rfx-quien{display:flex;align-items:center;gap:12px;font-size:1.1rem}
.rfx-quien .cara{--t:58px}
.rfx blockquote{margin:0;font-size:1.08rem;line-height:1.5;color:#e8eefc;overflow-wrap:anywhere}
.rfx .ev-ver{align-self:flex-start}
.rfx-ocultar{position:absolute;top:10px;right:12px;border:1px solid #2c3a56;background:rgba(8,12,20,.6);color:var(--muted);
  border-radius:99px;padding:3px 10px;font:inherit;font-size:.78rem;cursor:pointer;opacity:.55;transition:.15s}
.rfx-ocultar:hover,.rfx-ocultar:focus-visible{opacity:1;color:#fff}
.rfx-mas{margin-top:10px}
@media (max-width:720px){ .rfx-lista{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ .rfx{animation:none} }

/* ─────────── LOS LOGROS DE A BORDO (15-sep, noche) · Mi botín, la ficha, el cartel y la consola ───────────
   Cinco cubiertas con sus hitos; lo hecho, en color y con su fecha; lo que falta, gris y con «Ir». Abajo, el
   Contramaestre: su carta (con el alias escrito en el hueco del nombre) y sus dos héroes. Nada por debajo de 12 px. */
.nave-cifras{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.a-bordo .ab-dias{margin:0 0 12px;padding:9px 12px;border-radius:10px;background:rgba(245,176,67,.07);border:1px solid #4a3a1e;font-size:.9rem;color:#f3dcb4}
.ab-cubiertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:10px}
.ab-cub{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.ab-cub.llena{border-color:#6b5320;background:linear-gradient(180deg,rgba(245,176,67,.09),rgba(245,176,67,.02))}
.ab-cab{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ab-cab b{font-family:'Unbounded',sans-serif;font-size:.92rem;color:#eafcff}
.ab-cab span{font-size:.8rem;color:var(--mut)}
.ab-cab em{margin-left:auto;font-style:normal;font-weight:700;font-size:.8rem;color:var(--mut)}
.ab-cub.llena .ab-cab em{color:var(--amber)}
.ab-hitos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ab-h{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.02);border:1px solid transparent}
.ab-h .ab-i{font-size:1.15rem;text-align:center;filter:grayscale(1);opacity:.55}
.ab-h.hecho{background:rgba(55,224,236,.07);border-color:#1f4a52}
.ab-h.hecho .ab-i{filter:none;opacity:1}
.ab-t b{display:block;font-size:.88rem;line-height:1.25;color:#dfe9f2}
.ab-t span{display:block;font-size:.78rem;line-height:1.3;color:var(--mut)}
.ab-h:not(.hecho) .ab-t b{color:#b9c7d4}
.ab-ok{font-style:normal;font-size:.78rem;font-weight:700;color:var(--teal);white-space:nowrap}
.ab-h .btn.min{font-size:.78rem;padding:4px 10px}
.ab-premio{margin:2px 0 0;font-size:.8rem;color:#e7c88f}
.ab-leyenda{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:start;padding:10px 12px;border-radius:12px;
  border:1px solid #4a3a1e;background:radial-gradient(420px 220px at 12% 40%,rgba(245,176,67,.12),transparent 70%),rgba(255,255,255,.02)}
.ab-leyenda.ganada{border-color:#8a6a24;box-shadow:0 0 0 1px rgba(245,176,67,.18) inset}
.ab-ley-t h3{margin:2px 0 6px;font-size:1.02rem}
.ab-ley-t p{margin:0 0 8px;font-size:.84rem;line-height:1.42;color:#c9d6e2}
.ab-heroes{display:flex;gap:8px}
.ab-heroes img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid #6b5320}
.ab-carta{position:relative;display:block;width:100%;container-type:inline-size;border-radius:10px;overflow:hidden}
.ab-carta img{display:block;width:100%;height:auto}
/* el alias, en el hueco del nombre de la carta (mismo sitio y misma letra que el nombre de las demás) */
.ab-nombre{position:absolute;left:4%;right:4%;top:48.4%;text-align:center;font-family:'Unbounded',sans-serif;font-weight:800;line-height:1;
  color:#f5faff;white-space:nowrap;overflow:hidden;text-shadow:0 .35cqw 0 #000,0 0 2.4cqw rgba(0,0,0,.7);
  font-size:min(6.2cqw,calc(90cqw / (var(--ab-l,5) * .8)))}
.ab-carta.oculta img{filter:brightness(.28) saturate(.4) blur(2px)}
.ab-q{position:absolute;inset:0;display:grid;place-items:center;font-family:'Unbounded',sans-serif;font-size:3rem;color:rgba(245,176,67,.85)}
.ab-carta-btn{padding:0;border:0;background:none;cursor:zoom-in;display:block;width:100%;border-radius:10px}
.ab-carta-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.logro-caja .ab-carta.en-logro{width:min(230px,58vw);margin:6px auto 10px;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.lupa-caja .ab-carta.en-lupa{width:min(440px,86vw,calc((76vh) * .595));border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.75);border-radius:14px}
@media(max-width:640px){.ab-leyenda{grid-template-columns:104px 1fr}.ab-heroes img{width:44px;height:44px}}
/* la consola: la línea de logros de a bordo en la ficha del recluta */
.fi-abordo{margin:8px 0 0;font-size:.84rem;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fi-ab{display:inline-block;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--mut);font-size:.78rem}
.fi-ab.ok{border-color:#6b5320;color:var(--amber)}
/* 15-sep (noche) · lo que se quedó sin abrir, arriba del botín */
.botin-sinabrir{border-color:#6b5320}.botin-sinabrir p{margin:0 0 8px}.botin-sinabrir .sa-lista{display:flex;flex-wrap:wrap;gap:8px}

/* ── EL SIMULADOR DE JORAN (16-sep) · la puerta, en «Mi nave» ───────────────────────────── */
.sim-caja{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.sim-caja.cerrada{border-color:rgba(255,209,102,.4)}
.sim-em{flex:none;filter:drop-shadow(0 4px 12px rgba(55,224,236,.35))}
.sim-caja.cerrada .sim-em{filter:grayscale(.7) opacity(.75)}
.sim-txt{flex:1;min-width:230px}
.sim-txt h3{margin:2px 0 6px}
.sim-marcas{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}
.sim-marcas span{background:rgba(13,24,36,.8);border:1px solid #1d3448;border-radius:999px;padding:3px 11px;font-size:13px}
.sim-marcas b{color:var(--amber,#ffd166)}
.rs-batalla{margin-top:12px}

/* ── LA VOTACIÓN DEL AULA (16-sep) ────────────────────────────────────────────── */
.voto-caja{border-color:rgba(255,209,102,.45)}
.voto-caja h3{margin:2px 0 8px}
.voto-ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:10px 0}
.voto-op{padding:11px 14px;border-radius:12px;border:1px solid #22374c;background:rgba(13,24,36,.85);color:#e8f2f8;
  font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:border-color .12s,transform .12s}
.voto-op:hover:not(:disabled){border-color:var(--teal,#37e0ec);transform:translateY(-1px)}
.voto-op.mio{border-color:var(--amber,#ffd166);background:rgba(255,209,102,.14)}
.voto-op:disabled{opacity:.5;cursor:default}
.voto-op em{font-style:normal;color:var(--amber,#ffd166)}
.voto-extra{color:var(--amber,#ffd166)}
.voto-pie{margin:6px 0 0}
/* el aula */
.au-vt-lista{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}
.au-vt-op{display:grid;gap:4px}
.au-vt-t{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.au-vt-t span{font-variant-numeric:tabular-nums;color:var(--tenue,#9fb2c4)}
.au-vt-t em{font-style:normal;color:var(--amber,#ffd166);font-size:12.5px}
.au-vt-barra{height:8px;border-radius:6px;background:#12202e;overflow:hidden}
.au-vt-barra i{display:block;height:100%;background:linear-gradient(90deg,#37e0ec,#7ef0c8);transition:width .4s ease}
.au-vt-botones{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.au-vt-ajustes{display:grid;gap:6px;margin:10px 0}
.au-check{display:flex;gap:8px;align-items:center;font-size:14.5px}
.au-et{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue,#9fb2c4);margin:10px 0 4px}
.au-inp{width:100%;padding:9px 12px;border-radius:10px;border:1px solid #22374c;background:rgba(8,14,22,.6);color:inherit;font:inherit;margin-bottom:6px}
.au-vt-vieja{margin:0 0 10px}

/* la votación, proyectada */
.dia.votacion .vt-res{margin-top:10px}
.vt-lista{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.vt-lista li{display:grid;grid-template-columns:1fr 2fr auto;gap:12px;align-items:center;font-size:clamp(16px,2.2vw,22px)}
.vt-lista li.gana{font-weight:700;color:var(--amber,#ffd166)}
.vt-b{display:block;height:12px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.vt-b i{display:block;height:100%;background:linear-gradient(90deg,#37e0ec,#7ef0c8)}
.vt-lista li.gana .vt-b i{background:linear-gradient(90deg,#ffd166,#ffe9b0)}
.vt-n{font-variant-numeric:tabular-nums}
.vt-abierta{margin-top:18px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.vt-ops{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.vt-ops li{background:rgba(13,24,36,.7);border:1px solid #1d3448;border-radius:999px;padding:6px 16px;font-size:clamp(14px,1.8vw,19px)}

.gp-csv{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0 0}
.gp-csv .small{flex:1 1 260px}

.dip-caja{border-color:rgba(255,209,102,.45)}
.dip-caja h3{margin:2px 0 8px}

/* ═══ 16-sep · LA FICHA POR TEMAS, LO ENTREGADO SIN AIRE Y LOS RANKINGS EN LA CONSOLA ═══════════════════════════ */
/* Cada tema en una fila compacta: cabecera · sus insignias (encendidas las ganadas) · sus retos. Sin aire: la ficha
   tiene que caber en una pantalla con los enlaces de lo entregado debajo. */
.fi-temas{display:grid;gap:6px;margin:8px 0 6px}
.fi-tema{display:grid;grid-template-columns:128px auto 1fr;gap:10px;align-items:center;padding:6px 10px;
  border:1px solid #1c2a40;border-radius:10px;background:#0b111c}
.fi-tema.completo{border-color:#2f6b4a;background:linear-gradient(90deg,rgba(79,209,139,.07),transparent 55%)}
.fi-tema-cab{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.fi-tema-cab b{font-size:.86rem;color:#e8eefc}
.fi-tema-cab span{font-size:.78rem;color:#9fb0ce;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-tema-cab em{font-style:normal;font-size:.75rem;color:#8fe3b0;font-weight:700;font-variant-numeric:tabular-nums}
.fi-tema-ins{display:flex;gap:4px;flex-wrap:wrap}
.fi-in{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(55,224,236,.35))}
.fi-in.no{filter:grayscale(1) brightness(.45);opacity:.55}
.fi-tema .retos-ficha{margin:0;gap:5px;justify-content:flex-end}
.fi-tema .reto{padding:4px 9px;font-size:.8rem}
.reto.rel{border-style:dashed}
.reto.rel.hecho{border-style:solid}
/* 17-sep · el primer reto de cada tema perdía el borde de arriba: `.reto:first-of-type{border-top:0}` es de la lista de
   retos de la Nave y alcanzaba a estos botones (Norberto: «se borra la parte superior de A2, A3, A4 y A5») */
.retos-ficha .reto:first-of-type{border-top:1px solid #24304a}
.retos-ficha .reto.hecho:first-of-type{border-top-color:#3a7}
.retos-ficha .reto.rel:first-of-type{border-top-style:dashed}
.retos-ficha .reto.rel.hecho:first-of-type{border-top-style:solid}
@media(max-width:720px){.fi-tema{grid-template-columns:1fr}.fi-tema .retos-ficha{justify-content:flex-start}}

/* Lo que ha entregado: una línea por reto, el enlace recortado y la reflexión plegada en su sitio */
.evid-ficha{margin-top:10px;padding-top:8px}
.evid-ficha h4{margin:0 0 4px}
.evid-lista{gap:0;border:1px solid #1c2a40;border-radius:10px;overflow:hidden}
.evid-lista li{gap:8px;padding:5px 10px;font-size:.86rem;line-height:1.35;border-bottom:1px solid #151f31;align-items:center}
.evid-lista li:last-child{border-bottom:0}
.evid-lista li:nth-child(odd){background:#0b111c}
.evid-lista li b{min-width:26px;font-size:.8rem;color:#9fb0ce}
.evid-lista a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch;display:inline-block;vertical-align:bottom;word-break:normal}
.evid-lista .evid-rf{flex-basis:100%;margin:2px 0 2px 34px;padding:6px 10px}
.evid-lista .evid-rf-t{font-size:.86rem;margin:0 0 4px}
.evid-lista .evid-rf p{margin:0}

/* Cambiar de Comandante */
.fi-cmd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.fi-cmd select{font:inherit;font-size:.86rem;padding:5px 8px;border-radius:8px;border:1px solid #24304a;background:#0d1420;color:#e8eefc;max-width:100%}

/* Rankings: de quién es el ranking (el grupo o un escuadrón) y el emblema de cada fila */
.rank-ambito{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.rank-ambito .ra{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.85rem;font-weight:600;padding:5px 11px;border-radius:99px;
  border:1px solid #24304a;background:#0d1420;color:#9fb0ce;cursor:pointer}
.rank-ambito .ra img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.rank-ambito .ra span{font-size:.75rem;color:#6d8296;font-variant-numeric:tabular-nums}
.rank-ambito .ra.on{border-color:#37e0ec;color:#e8eefc;background:#0b1a1e}
.rank-ambito .ra:focus-visible{outline:2px solid #37e0ec;outline-offset:1px}
.rank .who .rank-esc{width:26px;height:26px;border-radius:50%;object-fit:cover;margin-right:6px;flex:none;vertical-align:middle;
  box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.c-rank .rank-tabs{flex-wrap:wrap}
/* 16-sep · el bloque del referente, también sin aire */
.ficha-ref{margin-top:10px;padding-top:8px}
.ficha-ref h4{margin:0 0 6px}
.ficha-ref p{margin:0 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ficha-ref .btn.min{padding:6px 12px}

/* 16-sep · CADA EMBED, EN SU VENTANA: el botón ⧉ al lado de cada acción de clase y de cada código de Genially */
.gp-celda{position:relative;display:flex;min-width:0}
.gp-celda.principal{grid-column:1/-1}
.gp-celda .gp-b{flex:1;padding-right:42px;min-width:0}
.gp-vent{font:inherit;font-size:1rem;line-height:1;width:32px;height:32px;border-radius:9px;border:1px solid #2a4656;background:#0b1119;
  color:#9fd8e0;cursor:pointer;display:inline-grid;place-items:center;flex:none;transition:border-color .15s,color .15s,background .15s}
.gp-vent:hover{border-color:var(--teal,#37e0ec);color:#e8eefc;background:rgba(55,224,236,.10)}
.gp-vent:focus-visible{outline:2px solid var(--teal,#37e0ec);outline-offset:2px}
.gp-celda .gp-vent{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:28px;height:28px;font-size:.92rem}
.gp-gen-par{display:inline-flex;align-items:center;gap:4px}
.m-fila .gp-vent{width:30px;height:30px}

/* 16-sep · Mi gente con la cara de cada recluta, y los enlaces del grupo con sus dos formas de copiar */
#consola .gente-tabla td.gente-quien{min-width:170px}
#consola .gente-tabla .gq{display:flex;align-items:center;gap:10px}
#consola .gente-tabla .gente-quien .av.gente-av{width:36px;height:36px;margin:0;border-width:2px;flex:none;box-shadow:none}
#consola .gente-tabla .gq > span{min-width:0;line-height:1.3}
.m-fila .btn.min{white-space:nowrap}
@media(max-width:640px){.m-fila{flex-wrap:wrap}.m-fila b{flex-basis:100%}}

/* 16-sep · EL RELÁMPAGO, CON SU RELOJ, en la diapositiva de la misión (se proyecta: grande y legible desde el fondo) */
.dia.mision .rel-crono{margin-top:18px;padding:14px 18px;border-radius:16px;border:1px solid #4b3a66;
  background:linear-gradient(135deg,rgba(199,155,230,.14),rgba(55,224,236,.06));display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"eye eye" "reloj botones";align-items:center;gap:6px 22px}
.rel-crono .rc-eyebrow{grid-area:eye;font-size:.95rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#dcc6f2}
.rel-crono .rc-reloj{grid-area:reloj;font-family:'Unbounded',sans-serif;font-weight:800;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;
  font-variant-numeric:tabular-nums;color:#e8eefc}
.rel-crono .rc-botones{grid-area:botones;display:flex;gap:8px;flex-wrap:wrap}
.rel-crono .rc-botones .btn{font-size:1rem;padding:9px 16px}
.rel-crono.corre .rc-reloj{color:#37e0ec}
.rel-crono.ultimo .rc-reloj{color:#f5b043}
.rel-crono.fin{border-color:#ff9f7a}
.rel-crono.fin .rc-reloj{color:#ff9f7a;animation:rc-latido 1s ease-in-out infinite}
@keyframes rc-latido{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.rel-crono.fin .rc-reloj{animation:none}}
@media(max-width:720px){.dia.mision .rel-crono{grid-template-columns:1fr;grid-template-areas:"eye" "reloj" "botones"}}
/* ══════════════════ LA PREGUNTA DEL PUESTO DE MANDO (17-sep) ══════════════════
   🔴 Sustituye a confirm/prompt/alert del navegador en la web del profesorado. En su ventana, o desplegada debajo de lo
   que se ha pulsado cuando ya se está dentro de otra ventana (la ficha de un recluta). */
.sgp-capa{position:fixed;inset:0;z-index:9700;display:grid;place-items:center;padding:20px;
  background:rgba(4,8,14,.78);backdrop-filter:blur(5px);animation:nebIn .16s ease-out}
.sgp-capa.cerrando{animation:nebOut .13s ease-in forwards}
.sgp-caja{width:100%;max-width:460px;background:linear-gradient(180deg,#132234,#0d1624);border:1px solid #2c4a6a;
  border-radius:16px;padding:16px 18px;text-align:left;color:var(--ink);
  box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 0 1px rgba(55,224,236,.07) inset;animation:nebSube .2s cubic-bezier(.2,.9,.3,1.2)}
.sgp-caja.peligro{border-color:#7a3a36;background:linear-gradient(180deg,#221a26,#130f18)}
.sgp-quien{margin:0 0 4px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--teal)}
.sgp-caja.peligro .sgp-quien{color:#ff9f8f}
.sgp-caja h3{font-size:1rem;line-height:1.35;margin:0 0 8px;text-wrap:balance}
.sgp-txt p{margin:0 0 6px;font-size:.9rem;line-height:1.5;color:var(--mut)}
.sgp-txt p b{color:var(--ink)}
.sgp-txt a{word-break:break-all}
.sgp-campo{display:grid;gap:6px;margin-top:8px}
.sgp-campo label{font-size:.85rem;font-weight:700;color:var(--ink)}
.sgp-campo label span{font-weight:400;color:var(--mut)}
.sgp-campo input,.sgp-campo textarea{width:100%;font:inherit;font-size:.92rem;color:var(--ink);background:#08111c;
  border:1px solid #2c4a6a;border-radius:10px;padding:8px 10px;resize:vertical}
.sgp-campo input:focus,.sgp-campo textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
.sgp-rapidos{display:flex;flex-wrap:wrap;gap:6px}
.sgp-rapidos button{font:inherit;font-size:12px;font-weight:600;color:var(--teal2);background:rgba(55,224,236,.08);
  border:1px solid rgba(55,224,236,.28);border-radius:999px;padding:3px 10px;cursor:pointer}
.sgp-rapidos button:hover,.sgp-rapidos button:focus-visible{background:rgba(55,224,236,.18);color:#eafcff}
.sgp-err{margin:0;font-size:12px;color:#ffb3a8}
.sgp-bot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:12px}
.sgp-bot .btn[disabled]{opacity:.45;cursor:not-allowed}
/* desplegada en su sitio: ocupa el ancho, sin sombra de ventana */
.sgp-caja.en-linea{max-width:none;margin:8px 0 4px;box-shadow:none;animation:sgpBaja .16s ease-out}
@keyframes sgpBaja{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sgp-pregunta{outline:2px solid var(--amber);outline-offset:2px}
/* en la ficha, debajo de la fila del tema, a todo el ancho */
.fi-tema>.sgp-caja{grid-column:1/-1;margin:2px 0 4px}
.fi-tema .reto.sgp-pregunta{outline-offset:1px}
.sgp-reto{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.sgp-reto b{font-size:.92rem}
.sgp-cifras{font-variant-numeric:tabular-nums}
.sgp-rf{margin:2px 0 8px;padding:8px 12px;border-left:3px solid var(--teal);background:rgba(0,0,0,.25);border-radius:0 10px 10px 0}
.sgp-txt .sgp-rf p{margin:0}
.sgp-rf-cab{font-size:.85rem}
.sgp-rf-coms{margin-top:6px}
.sgp-rf-coms summary{cursor:pointer;font-size:.85rem;color:var(--teal2)}
.sgp-txt .sgp-rf-coms p{margin:4px 0 0;font-size:.85rem;color:var(--ink)}
.sgp-txt .sgp-rf-mod{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.sgp-rf .btn.seguro{border-color:#ff7a6b;color:#ffd6cf;background:#3a1a1a}
.sgp-txt .sgp-rf-txt{margin-top:4px;color:var(--ink);font-size:.92rem;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere;max-height:16em;overflow:auto}
@media (prefers-reduced-motion:reduce){.sgp-capa,.sgp-caja,.sgp-caja.en-linea{animation:none}}
/* 17-sep · la Nave: el mensaje del Comandante al validar o anular un reto */
.msg-cmd{margin:0 0 12px;padding:12px 16px;border-color:rgba(55,224,236,.45);background:linear-gradient(180deg,rgba(55,224,236,.10),rgba(55,224,236,.03))}
.msg-cmd.anulado{border-color:rgba(245,176,67,.55);background:linear-gradient(180deg,rgba(245,176,67,.12),rgba(245,176,67,.03))}
.msg-cmd.validado{border-color:rgba(79,209,139,.5);background:linear-gradient(180deg,rgba(79,209,139,.11),rgba(79,209,139,.03))}
.msg-cmd p{margin:0}
.msg-cmd .mc-cab{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.9rem}
.msg-cmd .mc-cuando{font-size:12px;color:var(--mut)}
.msg-cmd .mc-cab .btn{margin-left:auto;padding:4px 14px}
.msg-cmd .mc-ico{font-size:1rem}
.msg-cmd .mc-que{margin-top:4px;font-size:.95rem}
.msg-cmd .mc-txt{margin-top:6px;padding:8px 12px;border-left:3px solid var(--teal);background:rgba(0,0,0,.22);border-radius:0 10px 10px 0;font-size:.95rem;line-height:1.5;white-space:pre-line}
.msg-cmd.anulado .mc-txt{border-left-color:var(--amber)}
.msg-cmd.validado .mc-txt{border-left-color:#4fd18b}

/* ══════════════════ LOS DESPLEGABLES DE LA CASA (17-sep) ══════════════════
   🔴 Norberto: «no queremos menús grises en ningún sitio». Cada <select> se viste solo (stargate.js): el nativo queda
   escondido debajo y manda; esto lo enseña y lo elige. */
.sgsel{position:relative;display:inline-block;max-width:100%;vertical-align:middle}
.sgsel.ancho{display:block;width:100%}
.sgsel-nativo{position:absolute!important;left:0!important;top:0!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;margin:0!important}
.sgsel-b{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:8px 12px;border-radius:10px;border:1px solid #2c4a6a;
  background:linear-gradient(180deg,#132234,#0d1624);color:var(--ink);font:inherit;font-size:.92rem;line-height:1.3;text-align:left;cursor:pointer;transition:border-color .15s}
.sgsel-b:hover{border-color:var(--teal)}
.sgsel-b:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.sgsel-b[aria-expanded="true"]{border-color:var(--teal);box-shadow:0 0 0 3px rgba(55,224,236,.15)}
.sgsel-b[disabled]{opacity:.5;cursor:not-allowed}
.sgsel-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgsel-f{color:var(--teal);font-size:.8em}
.sgsel-lista{position:fixed;z-index:9800;overflow:auto;display:flex;flex-direction:column;gap:2px;padding:6px;max-width:min(92vw,560px);
  border-radius:12px;border:1px solid #2c4a6a;background:#0d1826;box-shadow:0 18px 50px rgba(0,0,0,.6);animation:sgselSale .12s ease-out}
@keyframes sgselSale{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.sgsel-o{display:block;width:100%;text-align:left;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:.92rem;line-height:1.3;cursor:pointer;white-space:nowrap}
.sgsel-o:hover,.sgsel-o:focus-visible{background:rgba(55,224,236,.14);outline:none}
.sgsel-o.on{background:rgba(55,224,236,.22);color:#eafcff;font-weight:700}
.sgsel-o.on::before{content:"✓ ";color:var(--teal)}
.sgsel-o[disabled]{opacity:.45;cursor:default}
.sgsel-g{padding:8px 12px 3px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal2)}
.sgsel-g:not(:first-child){margin-top:4px;border-top:1px solid #24304a}
@media (prefers-reduced-motion:reduce){.sgsel-lista{animation:none}}

/* ══════════════════ LOS PREMIOS POR ENLACE, REHECHOS (17-sep) ══════════════════
   Una tarjeta por premio con su IMAGEN (Norberto: «pon una imagen del premio que se escoja, visualmente es feo»), su
   nombre, qué es (recompensa o huevo), si está activo, qué da, a qué grupos afecta, cómo está y si se ha guardado. Y la
   ventana visual para elegir (tarjetas con imagen; los héroes, con su miniatura). */
.pe-card .pe-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 20px;flex-wrap:wrap}
.pe-cab h3{margin:0 0 4px}
.pe-cab p{margin:0;max-width:80ch}
.pe-filtro{margin:8px 0 0}
.pe-lista{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.hv-f.pe-f{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;padding:12px 14px;border-radius:14px;
  border:1px solid #24304a;background:linear-gradient(180deg,#101c2c,#0c1522)}
.hv-f.pe-f.pe-recien{border-color:var(--teal);box-shadow:0 0 0 3px rgba(55,224,236,.15)}
.pe-img{position:relative;width:96px;height:96px;padding:0;border-radius:12px;overflow:hidden;border:1px solid #2c4a6a;background:#0a1320;cursor:pointer}
.pe-img:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.pe-img-i{width:100%;height:100%;object-fit:cover;object-position:top;display:grid;place-items:center}
.pe-azulejo{font-size:2.6rem;background:radial-gradient(circle at 50% 35%,#1d3d52,#0c1826)}
.pe-az-bolsa{background:radial-gradient(circle at 50% 35%,#5a4514,#1a1408)}
.pe-az-xp{background:radial-gradient(circle at 50% 35%,#145066,#081820)}
.pe-img-c{position:absolute;left:0;right:0;bottom:0;padding:3px 0;font-size:12px;font-weight:700;color:#eafcff;background:rgba(5,10,18,.78);opacity:0;transition:opacity .15s}
.pe-img:hover .pe-img-c,.pe-img:focus-visible .pe-img-c{opacity:1}
.pe-cuerpo{min-width:0;display:flex;flex-direction:column;gap:8px}
.pe-l1{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
#consola .pe-f .pe-nom,.pe-f .pe-nom{flex:1 1 240px;min-width:0;font:inherit;font-weight:700;font-size:1rem;padding:8px 11px;border-radius:9px;border:1px solid #24304a;background:#0a1018;color:var(--ink)}
.pe-nom:focus{outline:2px solid var(--teal);outline-offset:1px}
.pe-tipo{display:inline-flex;border:1px solid #2c4a6a;border-radius:10px;overflow:hidden}
.pe-tipo button{font:inherit;font-size:.85rem;font-weight:700;padding:7px 11px;border:0;background:transparent;color:var(--mut);cursor:pointer}
.pe-tipo button+button{border-left:1px solid #2c4a6a}
.pe-tipo button.on{background:rgba(245,176,67,.18);color:#ffd9a0}
.pe-tipo button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.pe-l2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:.9rem}
.pe-premio{color:#eafcff}
.pe-ambito{color:var(--teal2);font-weight:600}
.pe-l2 .h-estado{padding:0;border:0;background:none;color:var(--mut);align-self:auto}
.pe-guardado{font-size:12px;color:var(--mut)}
.pe-guardado.bien{color:#7ef0c8}
.pe-guardado.malo{color:#ffb3a8}
.pe-acc{display:flex;flex-wrap:wrap;gap:6px}
.pe-acc a.btn{text-decoration:none}
.pe-mas{display:flex;flex-direction:column;gap:10px;padding:10px 12px;border-radius:12px;background:#0a1018;border:1px solid #24304a}
.pe-mas[hidden]{display:none}
.pe-grupos{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.pe-grupos legend{float:left;width:100%;margin:0 0 2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.pe-radio,.pe-chip{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;cursor:pointer}
.pe-chips{display:flex;flex-wrap:wrap;gap:6px}
.pe-chip{padding:4px 10px;border-radius:999px;border:1px solid #2c4a6a;font-size:.85rem}
.pe-f .pe-radio input,.pe-f .pe-chip input{width:16px;height:16px;padding:0;margin:0;accent-color:var(--teal)}
.pe-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 10px}
.pe-vacio{padding:14px 16px;border-radius:12px;border:1px dashed #2c4a6a;color:var(--mut)}
.pe-vacio p{margin:0}
/* la ventana visual */
.sgp-caja.pe-ventana{max-width:900px;padding:0;text-align:left;animation:none}
.pe-v-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid #24304a}
.pe-v-cab h3{margin:0;font-size:1.05rem}
.pe-v-x{background:transparent;border:0;color:#fff;font-size:1.3rem;cursor:pointer;padding:4px 8px;border-radius:8px}
.pe-v-x:focus-visible{outline:2px solid var(--teal)}
.pe-v-cuerpo{padding:14px 18px 18px;max-height:min(76vh,760px);overflow:auto}
.pe-ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.pe-ops.dos{grid-template-columns:1fr 1fr}
.pe-ops.heroes{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.pe-op{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:8px;border-radius:12px;border:1px solid #24304a;background:#0d1826;
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,transform .15s}
.pe-op:hover,.pe-op:focus-visible{border-color:var(--teal);transform:translateY(-2px);outline:none}
.pe-op.on{border-color:var(--amber);box-shadow:0 0 0 2px rgba(245,176,67,.25)}
.pe-op[hidden]{display:none}
.pe-op-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;display:grid;place-items:center;font-size:3rem}
.pe-heroe .pe-op-img{aspect-ratio:1;object-position:top}
.pe-op b{font-size:.92rem;line-height:1.25}
.pe-op em{font-style:normal;font-size:12px;line-height:1.4;color:var(--mut)}
.pe-op-ico{font-size:2.6rem;line-height:1}
.pe-ops.dos .pe-op{padding:16px;gap:8px}
.pe-ops.dos .pe-op b{font-size:1.05rem}
.pe-ops.dos .pe-op em{font-size:.88rem}
.pe-filtros,.pe-rapidas{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.pe-filtros button,.pe-rapidas button{font:inherit;font-size:.85rem;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid #2c4a6a;background:transparent;color:var(--mut);cursor:pointer}
.pe-filtros button.on,.pe-rapidas button.on{background:rgba(55,224,236,.18);color:#eafcff;border-color:var(--teal)}
.pe-cant{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:start}
.pe-cant .pe-op-img.grande{aspect-ratio:1}
.pe-cant .h-campo{display:flex;flex-direction:column;gap:5px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.pe-cant input{font:inherit;font-size:.95rem;padding:8px 10px;border-radius:9px;border:1px solid #2c4a6a;background:#0a1018;color:var(--ink);text-transform:none;letter-spacing:0;max-width:160px}
.pe-cant-b{margin:4px 0 0}
@media(max-width:640px){.hv-f.pe-f{grid-template-columns:64px minmax(0,1fr)}.pe-img{width:64px;height:64px}.pe-ops.dos{grid-template-columns:1fr}.pe-cant{grid-template-columns:1fr}}
/* la portada y las pestañas: lo que es para varios grupos */
.gp-comun{display:flex;justify-content:space-between;align-items:center;gap:10px 20px;flex-wrap:wrap;margin:16px 0;padding:14px 18px;border-radius:16px;
  border:1px solid rgba(55,224,236,.35);background:linear-gradient(90deg,rgba(55,224,236,.08),transparent 70%)}
.gp-comun h3{margin:0 0 2px}
.gp-comun p{margin:0}
.gp-comun-b{display:flex;flex-wrap:wrap;gap:8px}
.gp-comun-b a.btn{text-decoration:none}
.pest-sep.pest-sep-g{width:auto;background:none;align-self:center;font-size:1rem;margin:0 2px}

/* 🌐 17-sep · sorteos y ofertas para varios grupos */
.sg-grupos{margin:6px 0 4px;grid-column:1/-1}
.sg-grupos .pe-radio input,.sg-grupos .pe-chip input,.sr-ambito .pe-chip input{width:16px;height:16px;padding:0;margin:0;accent-color:var(--teal)}
.sr-ambito-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0}
.sr-ambito .pe-chip.hecho{opacity:.7}
.sr-estados,.of-grupos{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.sr-estados .chip,.of-grupos .chip{text-decoration:none}
.chip.of-comun{border-color:var(--teal);color:#bff4f8}
.sr-f-nota{grid-column:1/-1;margin:2px 0}

/* 17-sep · LOS RETOS EN FILAS (Norberto: «me gustaría la visualización de mis retos en filas, en vez de columnas; así también
   podríamos ver las insignias más grandes»). Una tarjeta por fila, en «Mis retos» y en la semana de «Mi nave». */
.rs-grid,.rs-grid.par{grid-template-columns:1fr}
.rs-cols{grid-template-columns:1fr 176px;gap:18px}
.rs-trofeo img{max-width:156px}
.rs-der:has(.rs-trofeo + .rs-trofeo){flex-direction:row;justify-content:center}
.rs-der:has(.rs-trofeo + .rs-trofeo) .rs-trofeo img{max-width:84px}
@media(max-width:560px){.rs-cols{grid-template-columns:1fr 104px;gap:10px}.rs-trofeo img{max-width:96px}}

/* 17-sep · EL MENÚ DE LA NAVE, CON BOTONES SÓLIDOS E ICONOS PROPIOS (Norberto: «botones más sólidos con iconos dedicados,
   generados con Magnific siguiendo la estética de la narrativa»). Cada pestaña es un botón de panel con su icono; la
   activa, con el borde turquesa encendido. Sin subrayado. */
.nave-barra-u{height:62px}
.nb-tabs{gap:6px;align-items:center}
.nb-t{height:44px;padding:0 13px 0 7px;gap:8px;border-radius:11px;border:1px solid #24344c;color:#cfe0ec;font-weight:600;
  background:linear-gradient(180deg,#15263a,#0e1828);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.nb-t::after{display:none}
.nb-t .i{width:30px;height:30px;object-fit:contain;display:block;flex:0 0 auto}
.nb-t:hover{color:#fff;border-color:#2f5a70;background:linear-gradient(180deg,#183049,#10203a)}
.nb-t:hover .i{transform:translateY(-1px) scale(1.08);filter:drop-shadow(0 0 6px rgba(55,224,236,.55))}
.nb-t.on{color:#fff;border-color:var(--teal);background:linear-gradient(180deg,#113846,#0c2432);
  box-shadow:inset 0 0 0 1px rgba(55,224,236,.18),0 0 12px rgba(55,224,236,.18)}
.nb-t.on .i{filter:drop-shadow(0 0 7px rgba(55,224,236,.6))}
.nb-mas{width:44px;height:44px;padding:5px;border-radius:11px;border-color:#24344c;background:linear-gradient(180deg,#15263a,#0e1828)}
.nb-mas .i{width:32px;height:32px;object-fit:contain;display:block}
.nb-menu{top:58px}
@media(max-width:760px){
  .nave-barra-u{height:58px}
  .nb-tabs{gap:4px}
  .nb-t{height:42px;width:42px;padding:0;justify-content:center}
  .nb-t .i{width:30px;height:30px}
  .nb-mas{width:40px;height:40px;padding:4px}
}
/* en un móvil de 375 px caben las seis pestañas y el «···» si cada botón mide 30 px (la cuenta de arriba, 12-sep) */
@media(max-width:420px){
  .nb-tabs{gap:2px}
  .nb-t{height:34px;width:30px;border-radius:8px}
  .nb-t .i{width:24px;height:24px}
  .nb-mas{width:32px;height:32px;padding:3px;border-radius:8px}
  .nb-mas .i{width:24px;height:24px}
}
.ses-copiar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0}

/* 17-sep · LA TRANSMISIÓN DE LA SEMANA (sustituye al «crawl» de Star Wars). Norberto: «no tiene efecto Star Wars 3D; usa
   el logo de STARGATE en vez de simular Star Wars». El portal de fondo, el logo que se enciende en el centro y sube, y el
   mensaje en un panel que se lee sin perseguirlo. Con «reducir movimiento», todo quieto desde el principio. */
.dia.foro-crawl.fc-v2{perspective:none;background:#02060d}
.foro-crawl.fc-v2 .fc-fondo{position:absolute;inset:-4%;background:url(../img/nave/portal_stargate.jpg) center/cover no-repeat;opacity:.5;animation:fc-acerca 45s ease-out both}
@keyframes fc-acerca{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.foro-crawl.fc-v2 .fc-cielo{opacity:.45}
.foro-crawl.fc-v2 .fc-logo{top:50%;display:flex;flex-direction:column;align-items:center;gap:.35em;color:#eafcff;-webkit-text-stroke:0;text-shadow:none;
  font-size:inherit;opacity:0;transform:translateY(-50%);transform-origin:50% 0;z-index:2}
.foro-crawl.fc-v2 .fc-marca{font-family:'Unbounded',sans-serif;font-weight:800;letter-spacing:.08em;line-height:1;font-size:clamp(40px,8vw,140px);
  color:#eafcff;text-shadow:0 0 30px rgba(55,224,236,.7),0 0 3px #37e0ec}
.foro-crawl.fc-v2 .fc-lema{font-size:clamp(15px,1.7vw,26px);letter-spacing:.22em;text-transform:uppercase;color:#f5b043;font-weight:700}
.foro-crawl.fc-v2.f1 .fc-logo{animation:fc-enciende 1.8s ease-out both}
@keyframes fc-enciende{0%{opacity:0;filter:blur(14px);transform:translateY(-50%) scale(.9)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translateY(-50%) scale(1)}}
.foro-crawl.fc-v2.f2 .fc-logo{animation:fc-arriba 1s cubic-bezier(.3,.8,.3,1) both}
@keyframes fc-arriba{from{opacity:1;top:50%;transform:translateY(-50%) scale(1)}to{opacity:1;top:11%;transform:translateY(0) scale(.4)}}
.foro-crawl.fc-v2 .fc-marco{inset:auto;left:50%;top:31%;bottom:7%;width:min(1100px,86%);scrollbar-width:thin;scrollbar-color:rgba(55,224,236,.45) transparent;transform:translateX(-50%);-webkit-mask-image:none;mask-image:none;
  pointer-events:auto;opacity:0;overflow:auto;background:rgba(6,14,24,.74);border:1px solid rgba(55,224,236,.35);border-radius:18px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:3.2% 3.2%;z-index:1}
.foro-crawl.fc-v2.f3 .fc-marco{animation:fc-panel .9s ease-out both}
@keyframes fc-panel{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
.foro-crawl.fc-v2 .fc-texto{position:static;transform:none;visibility:visible;animation:none;color:#e6f2fa;font-weight:500;
  font-size:clamp(18px,2.1vw,34px);line-height:1.45;text-align:left;hyphens:manual}
.foro-crawl.fc-v2 .fc-texto .fc-tit{color:#f5b043;font-size:1.2em;letter-spacing:.05em;margin:0 0 .6em;text-align:left}
.foro-crawl.fc-v2 .fc-texto .fc-firma{color:#9fd9e6;text-align:right}
.foro-crawl.fc-v2.quieto .fc-logo{display:flex;opacity:1;top:11%;transform:scale(.4)}
.foro-crawl.fc-v2.quieto .fc-marco{opacity:1}
.foro-crawl.fc-v2 .fc-son{font-size:14px}
@media (prefers-reduced-motion:reduce){.foro-crawl.fc-v2 .fc-fondo{animation:none}}
/* la entrada de cada diapositiva (.dia.entra > *) pisaba las fases de la transmisión: aquí mandan las suyas */
.dia.foro-crawl.fc-v2.entra > *{animation:none}
.dia.foro-crawl.fc-v2.entra > .fc-fondo{animation:fc-acerca 45s ease-out both}
.dia.foro-crawl.fc-v2.f1 > .fc-logo{animation:fc-enciende 1.8s ease-out both}
.dia.foro-crawl.fc-v2.f2 > .fc-logo{animation:fc-arriba 1s cubic-bezier(.3,.8,.3,1) both}
.dia.foro-crawl.fc-v2.f3 > .fc-marco{animation:fc-panel .9s ease-out both}
@media (prefers-reduced-motion:reduce){.dia.foro-crawl.fc-v2.entra > .fc-fondo{animation:none}}

/* 17-sep · en el aula, lo que aún no se ha abierto: en sombra y con la semana en que se desbloquea */
.au-pr.cerrado,.au-pr.cerrado:disabled{opacity:.42;filter:grayscale(.85);cursor:not-allowed;transform:none;border-style:dashed}
.au-pr .au-sem{display:block;margin-top:3px;font-size:.75rem;font-weight:700;letter-spacing:.04em;color:#f5b043;filter:none}

/* 17-sep · EN VIVO en la Nave: el aviso de arriba (cualquier pestaña) y su pestaña */
.envivo-banda{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;margin:0 0 14px;
  border:1px solid rgba(255,107,107,.45);background:linear-gradient(90deg,rgba(255,107,107,.12),rgba(16,26,40,.9) 55%)}
.envivo-banda .ev-ico{width:34px;height:34px;object-fit:contain;flex:0 0 auto}
.envivo-banda .ev-t{font-family:'Unbounded',sans-serif;font-weight:700;font-size:.9rem;color:#ff9f9f;letter-spacing:.04em;text-transform:uppercase;position:relative;padding-left:14px}
.envivo-banda .ev-t::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#ff5d5d;box-shadow:0 0 0 0 rgba(255,93,93,.7);animation:ev-late 1.6s infinite}
@keyframes ev-late{0%{box-shadow:0 0 0 0 rgba(255,93,93,.7)}70%{box-shadow:0 0 0 9px rgba(255,93,93,0)}100%{box-shadow:0 0 0 0 rgba(255,93,93,0)}}
.envivo-banda .ev-items{display:flex;flex-wrap:wrap;gap:8px}
.ev-it{font:inherit;font-size:.88rem;color:#e8f3fa;background:rgba(0,0,0,.28);border:1px solid #3a2a38;border-radius:999px;padding:6px 12px;cursor:pointer}
.ev-it:hover,.ev-it:focus-visible{border-color:#ff9f9f;background:rgba(255,107,107,.12)}
.ev-pregunta h3{font-size:1.2rem;margin:4px 0 10px}
.ev-pregunta textarea{width:100%;font:inherit;font-size:.95rem;color:#e8f3fa;background:#0b1119;border:1px solid #24304a;border-radius:10px;padding:10px 12px;resize:vertical}
.ev-pregunta textarea:focus{outline:2px solid var(--teal);outline-offset:1px}
.ev-acc{display:flex;align-items:center;gap:10px;margin:10px 0 0}
.ev-mia{color:#bfe9ef}
.ev-marco{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid #24304a;background:#02060d;margin:10px 0}
.ev-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (prefers-reduced-motion:reduce){.envivo-banda .ev-t::before{animation:none}}

/* 17-sep · aula · la pregunta en directo: el muro de respuestas con su cara y su alias */
.au-pq-texto{font-size:1.35rem;line-height:1.3;margin:4px 0 8px}
.au-pq-inp{width:100%;resize:vertical;margin:6px 0 10px}
.au-pq-muro{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:10px 0 14px}
.au-pq-r{position:relative;display:flex;gap:10px;align-items:flex-start;padding:10px 34px 10px 10px;border-radius:12px;border:1px solid #24304a;background:#0b1119;animation:au-pq-entra .35s ease-out both}
@keyframes au-pq-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.au-pq-cara{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid var(--teal);display:grid;place-items:center;font-weight:800;background:#132234}
.au-pq-cara img{width:100%;height:100%;object-fit:cover}
.au-pq-r b{font-size:.9rem;color:#9feaf2}
.au-pq-r p{margin:2px 0 0;font-size:.98rem;line-height:1.4;color:#e8eefc;word-break:break-word}
.au-pq-quitar{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:6px;border:1px solid #3a2a2a;background:transparent;color:#d9a3a3;cursor:pointer;font-size:.8rem;line-height:1}
.au-pq-quitar:hover{background:rgba(255,107,107,.15)}
.au-pq-viva:fullscreen{background:#070b12;padding:4vh 4vw;overflow:auto}
.au-pq-viva:fullscreen .au-pq-texto{font-size:clamp(28px,3.4vw,54px)}
.au-pq-viva:fullscreen .au-pq-muro{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.au-pq-viva:fullscreen .au-pq-r p{font-size:clamp(18px,1.6vw,26px)}
.au-vt-modo{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.au-vt-dias{width:4.2em;display:inline-block;padding:3px 6px;margin:0 4px}

/* 17-sep · la sesión en directo: el botón del docente y lo del recluta que la sigue */
.ses-directo{font:inherit;font-size:.8rem;font-weight:700;padding:5px 11px;border-radius:999px;border:1px solid #3a4a60;background:rgba(0,0,0,.35);color:#cfe0ec;cursor:pointer}
.ses-directo.on{border-color:#ff7d7d;color:#ffd0d0;background:rgba(255,93,93,.14)}
.ses-directo.on::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff5d5d;margin-right:6px;vertical-align:1px}
.ses-al{position:absolute;right:14px;bottom:62px;z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:min(420px,70%)}
.ses-al-sigo,.ses-al-volver{font:inherit;font-size:.8rem;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid rgba(55,224,236,.4);background:rgba(4,12,20,.8);color:#bff5f9}
.ses-al-volver{cursor:pointer;border-color:#f5b043;color:#ffe3a1}
.ses-al-pq{background:rgba(6,14,24,.94);border:1px solid rgba(255,125,125,.5);border-radius:14px;padding:10px 12px;color:#e8f3fa;width:100%}
/* 18-sep · lo que lanza el docente desde su aula, encima de la diapositiva del recluta: el tiempo y la votación */
.ses-al-crono{background:rgba(6,14,24,.94);border:1px solid rgba(242,181,68,.55);border-radius:14px;padding:8px 14px;color:#fff;
  display:flex;align-items:center;gap:12px}
.ses-al-crono b{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.ses-al-crono span{font:800 clamp(1.6rem,3.2vw,2.6rem)/1 var(--display,inherit);font-variant-numeric:tabular-nums}
.ses-al-crono.ultimos{border-color:#ff7d7d;animation:sesAvisa .5s ease infinite}
.ses-al-vt{background:rgba(6,14,24,.94);border:1px solid rgba(62,214,200,.5);border-radius:14px;padding:10px 12px;color:#e8f3fa;width:100%}
.ses-al-vt b{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal2)}
.ses-al-vt p{margin:4px 0 8px;font-weight:700}
/* 18-sep · las herramientas de clase, dentro de la presentación: un botón y un panel lateral.
   🔴 20-sep · el botón flotaba abajo a la izquierda y TAPABA la barra de pasos («un botón sencillo, que no
   tape otros botones»). Ahora va en la fila de mandos de arriba (`.ses-ctl`), donde no se come nada. */
.ses-aula-b{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  border:1px solid rgba(62,214,200,.45);background:rgba(0,0,0,.35);color:#cfe0ec;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.ses-aula-b img{opacity:.9}
.ses-aula-b:hover,.ses-aula-b.on{border-color:var(--teal);background:rgba(14,40,48,.95);color:#e8f3fa}
@media (max-width:640px){ .ses-aula-b span{display:none} .ses-aula-b{padding:5px 8px} }
.ses-aula{position:absolute;top:0;right:0;bottom:0;z-index:8;width:min(460px,100%);display:flex;flex-direction:column;
  background:#0b1119;border-left:1px solid var(--line);box-shadow:-18px 0 40px rgba(0,0,0,.45)}
.ses-aula-cab{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.ses-aula iframe{flex:1;width:100%;border:0;background:#0b1119}
.ses-aula[hidden]{display:none}   /* 🔴 19-sep · sin esto, el display:flex de arriba le ganaba a hidden y «Cerrar» no cerraba */
/* 19-sep · el aula en el panel de la presentación: compacta y sin lo que ya da el contexto */
body.au-panel .wrap{padding:10px 12px}
body.au-panel .au-barra{margin:0 0 10px;padding:0 0 10px;gap:8px}
body.au-panel .au-quien>b,body.au-panel .au-grupo,body.au-panel .au-quien>.small,body.au-panel .bz-acceso{display:none}
body.au-panel .au-quien:not(:has(.au-mini-reloj)){display:none}
body.au-panel .au-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));width:100%;margin-left:0;gap:5px}
/* 🔴 20-sep · con cinco herramientas y el nombre escondido, el panel era una fila de iconos a adivinar.
   Ahora cada una lleva su nombre debajo, pequeño: cabe, y en clase no se adivina nada. */
body.au-panel .au-t{flex-direction:column;justify-content:center;gap:3px;padding:6px 2px}
body.au-panel .au-t b{display:block;font-size:.75rem;font-weight:700;line-height:1.05}
body.au-panel .au-t .i img{width:22px;height:22px}
.ses-al-pq b{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#ff9f9f}
.ses-al-pq p{margin:4px 0 8px;font-size:1rem}
.ses-al-pq textarea{width:100%;font:inherit;font-size:.9rem;color:#e8f3fa;background:#0b1119;border:1px solid #24304a;border-radius:8px;padding:7px 9px;margin-bottom:6px}
.ses-al-mia{color:#bfe9ef;font-size:.9rem}
.ses-al-msg{display:block;font-size:.8rem;color:#ffc9c9}
.vt-ops-al{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px 0}
.vt-ops-al .btn{font-size:clamp(1rem,1.6vw,1.4rem)}

/* ═══════════ 18-sep · EL PANEL DEL DOCENTE Y EL GRUPO DE UN VISTAZO ═══════════
   Norberto: «un landing parecido al del estudiante: su avatar, sus datos, algunas estadísticas; y dentro de cada grupo,
   insights y botones para tenerlo todo a mano». Sin aire: una franja, no una portada. */
.doc-panel{display:grid;grid-template-columns:auto 1fr auto auto;gap:18px;align-items:center;margin:0 0 16px;padding:16px 18px;
  border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,rgba(14,40,48,.9),rgba(11,17,25,.95))}
.doc-ava{position:relative;width:92px;height:92px;border-radius:50%;padding:0;border:2px solid rgba(242,181,68,.6);overflow:hidden;cursor:pointer;background:#0b1119}
.doc-ava img{width:100%;height:100%;object-fit:cover;display:block}
.doc-ava span{position:absolute;left:0;right:0;bottom:0;padding:3px 0;font-size:.75rem;font-weight:800;background:rgba(6,14,24,.8);color:#e8f3fa;opacity:0;transition:.15s}
.doc-ava:hover span,.doc-ava:focus-visible span{opacity:1}
.doc-txt h2{margin:2px 0 0;line-height:1.1}
.doc-txt p{margin:2px 0 0}
.doc-cifras{display:flex;gap:10px}
.doc-cifras div,.c-res-cifras div{min-width:112px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(6,14,24,.55)}
.doc-cifras b,.c-res-cifras b{display:block;font:800 1.7rem/1 var(--display,inherit)}
.doc-cifras span,.c-res-cifras span{display:block;margin-top:4px;font-size:.8rem;color:var(--muted)}
.doc-b{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.doc-avas{margin:-6px 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#0b1119}
/* 19-sep · ⚙ Ajustes del panel del docente: su comandante y su sesión en directo para todos sus grupos */
.doc-ajustes{margin:-6px 0 16px}
.doc-aj-grid{display:grid;grid-template-columns:minmax(220px,1fr) 3fr;gap:14px;align-items:start}
.doc-aj-grid .card{margin:0}
.aviso-suave{padding:8px 11px;border-radius:9px;border:1px solid rgba(242,181,68,.4);background:rgba(242,181,68,.08);color:#f3dfb0}
@media(max-width:900px){.doc-aj-grid{grid-template-columns:1fr}}
/* 18-sep · el reparto de comandantes (26): 13 por fila, 5 en móvil; la última fila, centrada */
.doc-avas-g{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.doc-avas-g .doc-av-op{flex:0 0 calc((100% - 120px) / 13)}
.doc-av-op{padding:0;border:2px solid transparent;border-radius:14px;overflow:hidden;cursor:pointer;background:none}
.doc-av-op img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.doc-av-op:hover{border-color:rgba(62,214,200,.6)}
.doc-av-op.on{border-color:var(--amber)}
.c-hacer{margin:0 0 12px}
.c-resumen{margin:0 0 12px}
.c-res-cifras{display:flex;flex-wrap:wrap;gap:10px}
.c-res-cifras .ojo{border-color:rgba(242,181,68,.55)}
.c-res-cifras .ojo b{color:var(--amber)}
.c-res-top{margin:10px 0 0;font-size:.92rem}
.c-res-top span{color:var(--muted);margin-right:6px}
.c-res-top em{font-style:normal;color:var(--teal2);font-size:.85rem}
@media(max-width:900px){
  .doc-panel{grid-template-columns:auto 1fr}
  .doc-cifras,.doc-b{grid-column:1/-1;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}
  .doc-avas-g .doc-av-op{flex-basis:calc((100% - 40px) / 5)}
}
/* 18-sep · la puerta, sin emojis: el comandante y la nave */
.camino span img{width:34px;height:34px;object-fit:cover;border-radius:50%;display:block}
.camino.recluta span img{border-radius:0;object-fit:contain}
/* 18-sep · «Tu sesión en directo»: qué secciones salen en la presentación de cada docente */
.m-secciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin:10px 0 4px}
.m-sec{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:rgba(6,14,24,.45)}
.m-sec input{margin-top:3px;accent-color:var(--teal)}
.m-sec b{display:block;font-size:.95rem}
.m-sec em{display:block;font-style:normal;font-size:.82rem;color:var(--muted);margin-top:2px}
.m-sec:has(input:not(:checked)){opacity:.55}
.m-sec-msg{min-height:1.2em;margin:4px 0 0;color:var(--teal2)}
/* 18-sep · los retratos del equipo en la galería: con su nombre al pie, y una raya antes de los genéricos */


/* ================================================================== 19-sep · LA PORTADA DEL GRUPO (consola) */
.pt{display:flex;flex-direction:column;gap:14px}
.pt .card{margin:0}
.pt-hero{display:flex;gap:16px;align-items:center}
.pt-ava{width:84px;height:84px;flex:none;border-radius:50%;object-fit:cover;border:2px solid var(--teal,#3ed6c8);box-shadow:0 0 18px rgba(62,214,200,.28)}
.pt-hero h2{margin:2px 0 4px;font-size:clamp(1.3rem,2.4vw,1.8rem);text-wrap:balance}
.pt-hero p{margin:0}
.pt-dos{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.pt h3{margin:0 0 6px}
.pt-vids{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.pt-vids li{display:grid;grid-template-columns:128px 1fr;gap:12px;align-items:center}
.pt-vids img{width:128px;height:72px;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block}
.pt-vids a:hover img{border-color:var(--teal,#3ed6c8)}
.pt-vids b{display:block;font-size:.95rem;line-height:1.3}
.pt-vids span{display:block;font-size:.82rem;color:var(--mut)}
.pt-retos{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:7px}
.pt-reto{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(90px,150px) auto;gap:10px;align-items:center;
  padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(6,14,24,.45)}
.pt-id{font:700 .8rem/1 ui-monospace,'IBM Plex Mono',monospace;color:var(--teal,#3ed6c8);text-align:center;padding:5px 0;border-radius:6px;background:rgba(62,214,200,.1)}
.pt-tit{font-size:.9rem;line-height:1.3;min-width:0}
.pt-tit em{display:block;font-style:normal;font-size:.76rem;color:var(--mut)}
.pt-barra{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.pt-barra i{display:block;height:100%;border-radius:inherit;background:var(--teal,#3ed6c8)}
.pt-reto.bajo .pt-barra i{background:var(--amber,#f2b544)}
.pt-reto.bajo{border-color:rgba(242,181,68,.35)}
.pt-n{font-size:.82rem;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.pt-n b{color:#e8f3fa;font-size:.95rem}
.pt-luego{margin-top:10px}
.pt-foro .foro-msg,.ht-foro .foro-msg{font-size:.9rem;line-height:1.55;color:#c7d6ee;padding:10px 12px;border-left:2px solid var(--teal,#3ed6c8);background:#0f1a2b;border-radius:0 9px 9px 0}
.pt-foro .foro-msg.recortado,.ht-foro .foro-msg.recortado{max-height:160px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.pt-foro .foro-msg.recortado.abierto,.ht-foro .foro-msg.recortado.abierto{max-height:none;-webkit-mask-image:none;mask-image:none}
.pt-foro .leer-entero,.ht-foro .leer-entero{margin:8px 0 0}
/* 🔴 la caja de editar, cerrada de verdad: display:flex le ganaba a [hidden] (el mismo fallo que el panel del aula) */
.ht-foro-caja[hidden]{display:none}
.pt textarea{width:100%;font:inherit;font-size:.95rem;color:#e8f3fa;background:#0b1119;border:1px solid var(--line);border-radius:10px;padding:10px 12px;resize:vertical}
.pt textarea:focus{outline:2px solid var(--teal,#3ed6c8);outline-offset:1px}
.pt-h-notas{margin-top:18px!important}
@media(min-width:1150px){.pt-ant .pt-retos{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:900px){.pt-dos{grid-template-columns:1fr}}
@media(max-width:640px){.pt-reto{grid-template-columns:44px 1fr}.pt-barra,.pt-n{grid-column:1/-1}.pt-hero{align-items:flex-start}.pt-ava{width:64px;height:64px}}

/* ================================================================== 19-sep · ICONOS PROPIOS (sin emojis) */
.ico{display:inline-block;width:1.3em;height:1.3em;object-fit:contain;vertical-align:-.3em;flex:none}
.ico.grande{width:44px;height:44px;vertical-align:middle}
h3 .ico{margin-right:4px}
.btn .ico{margin-right:2px}
/* la rueda de «Configurar la sesión», al lado de «Proyectar la clase» */
.gp-cfg{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:10px;cursor:pointer;
  border:1px solid rgba(62,214,200,.45);background:rgba(6,14,24,.7);transition:.15s}
.gp-cfg .ico{width:26px;height:26px;vertical-align:0}
.gp-cfg:hover,.gp-cfg:focus-visible{border-color:var(--teal,#3ed6c8);background:rgba(62,214,200,.12);outline:none}
.cfg-capa{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(2,6,12,.72);backdrop-filter:blur(3px)}
.cfg-caja{width:min(920px,100%);max-height:calc(100vh - 32px);overflow:auto;border:1px solid rgba(62,214,200,.4);border-radius:18px;
  background:#0b1119;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:16px 18px}
.cfg-cab{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.cfg-cab div{flex:1;min-width:0}
.cfg-cab b{display:block;font-size:1.15rem}
.cfg-cab span{display:block;font-size:.85rem;color:var(--mut)}
.cfg-caja .card{margin:0;border:0;padding:0;background:none;box-shadow:none}
.cfg-caja .card h3{display:none}
.cfg-pie{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.pt-fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pt-msg-pie{justify-content:space-between}
/* la rueda va dentro de la celda de «Proyectar la clase», a la izquierda del ⧉ (y el texto le deja sitio) */
.gp-celda .gp-cfg{position:absolute;right:42px;top:50%;transform:translateY(-50%);width:32px;height:32px}
.gp-celda .gp-cfg .ico{width:24px;height:24px}
.gp-celda:has(.gp-cfg) .gp-b{padding-right:82px}
/* 19-sep · la captura de cada sección, en las casillas de «Configurar la sesión» */
.m-secciones:has(.m-sec-img){grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.m-sec:has(.m-sec-img){flex-direction:column;gap:8px;position:relative}
.m-sec:has(.m-sec-img) input{position:absolute;top:14px;left:14px;z-index:1;width:20px;height:20px}
.m-sec-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#060d17}
.m-sec-img.sin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;text-align:center}
.m-sec-img.sin .ico{width:34px;height:34px}
.m-sec-img.sin small{font-size:.76rem;color:var(--mut);line-height:1.3}
.m-sec:has(input:not(:checked)) .m-sec-img{opacity:.35;filter:grayscale(.8)}
.m-sec:has(input:checked){border-color:rgba(62,214,200,.45)}
/* ================================================================== 19-sep · NEBULA en la portada del grupo */
.pt-neb{display:flex;gap:14px;align-items:center;padding:12px 16px;border-color:rgba(62,214,200,.4);
  background:linear-gradient(100deg,rgba(62,214,200,.10),rgba(62,214,200,.02) 60%)}
.pt-neb-cara{flex:none;width:66px;height:66px;border-radius:50%;overflow:hidden;border:2px solid var(--teal,#3ed6c8);
  box-shadow:0 0 18px rgba(62,214,200,.35);background:#06121c}
.pt-neb-cara img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.pt-neb-txt{flex:1;min-width:0}
.pt-neb-txt>b{font-size:.78rem;letter-spacing:.16em;color:var(--teal,#3ed6c8)}
.pt-neb-txt p{margin:3px 0 0}
#pt-neb-p{font-size:1.02rem;line-height:1.5;color:#e8f3fa;min-height:3em}
#pt-neb-p.escribe::after{content:"▍";color:var(--teal,#3ed6c8);animation:ptCursor .9s steps(1) infinite}
@keyframes ptCursor{50%{opacity:0}}
.pt-neb-pie{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px!important}
.pt-neb-pie:empty{display:none}
.c-res-ojo span{color:var(--amber,#f2b544)}
.c-res-ojo .btn{margin-left:6px}
.pt-seg{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.pt-seg button{font:inherit;font-size:.85rem;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(6,14,24,.6);color:#c7d6ee;cursor:pointer}
.pt-seg button.on{border-color:var(--teal,#3ed6c8);background:rgba(62,214,200,.14);color:#fff;font-weight:700}
.pt-seg button:focus-visible{outline:2px solid var(--teal,#3ed6c8);outline-offset:1px}
@media(max-width:640px){.pt-neb{align-items:flex-start}.pt-neb-cara{width:52px;height:52px}}
/* 19-sep · las pestañas del grupo, con iconos propios (antes, emojis en el content) */
.pest[data-tab="portada"]::before{content:"";background-image:url(../img/iconos/p/nave.png)}
.pest[data-tab]::before{display:inline-block;width:1.25em;height:1.25em;margin-right:7px;vertical-align:-.25em;background-size:contain;background-repeat:no-repeat;background-position:center}

/* ================================================================== 19-sep · MIS GRUPOS, CERO AIRE
   Norberto: «revisa todo y mejora el landing del docente, cero aire». Cabecera en una franja (avatar, nombre y cifras en
   línea debajo, botones a la derecha); cada grupo en UNA línea desde 1400 px y en dos por debajo (quién · cifras · código ·
   entrar / lo de clase a lo ancho); lo común y los Geniallys, una fila cada uno; la explicación larga, plegada. */
#consola-app .doc-panel{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ava txt b" "ava cif b";
  column-gap:14px;row-gap:4px;padding:10px 14px;margin:0 0 10px}
#consola-app .doc-ava{grid-area:ava;width:62px;height:62px}
#consola-app .doc-txt{grid-area:txt;display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
#consola-app .doc-txt .eyebrow{font-size:.75rem}
#consola-app .doc-txt h2{margin:0;font-size:clamp(1.1rem,1.7vw,1.4rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#consola-app .doc-txt p{margin:0;font-size:.78rem}
#consola-app .doc-cifras{grid-area:cif;gap:6px;flex-wrap:wrap}
#consola-app .doc-cifras div{min-width:0;padding:3px 9px;display:flex;align-items:baseline;gap:5px;border-radius:999px}
#consola-app .doc-cifras b{font-size:.98rem}
#consola-app .doc-cifras span{margin:0;font-size:.78rem;white-space:nowrap}
#consola-app .doc-b{grid-area:b;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
#consola-app .gp-grid.uno{gap:8px}
#consola-app .gp{padding:10px 12px}
#consola-app .gp header{gap:10px}
#consola-app .gp-emb{width:44px;height:44px;border-radius:11px}
#consola-app .gp h3{font-size:1.02rem;margin:1px 0}
#consola-app .gp-est{font-size:.75rem}
#consola-app .gp-cifras{grid-template-columns:auto auto;gap:6px}
#consola-app .gp-cifras div{padding:6px 10px}
#consola-app .gp-cifras b{font-size:1.15rem}
#consola-app .gp-cifras span{font-size:.76rem}
#consola-app .gp-b{padding:9px 11px}
#consola-app .gp-pie .btn.epico.gp-abrir{font-size:.95rem;padding:11px 18px;white-space:nowrap;min-height:46px}   /* el botón llamativo, como pidió (y pulsable) */
#consola-app .gp-invita{padding:6px 10px;gap:8px}
#consola-app .gp-invita b{font-size:1rem}
@media(min-width:900px){
  #consola-app .gp-grid.uno .gp{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"cab cifras invita pie" "hacer hacer hacer hacer";
    column-gap:12px;row-gap:8px;align-items:center}
  #consola-app .gp-grid.uno .gp:has(.gp-cola){grid-template-areas:"cola cola cola cola" "cab cifras invita pie" "hacer hacer hacer hacer"}
  #consola-app .gp-grid.uno .gp-hacer{grid-template-columns:1.4fr 1fr 1fr;gap:6px}
  #consola-app .gp-grid.uno .gp-celda.principal{grid-column:auto}
  #consola-app .gp-grid.uno .gp-invita{align-self:center;flex-wrap:nowrap}
  #consola-app .gp-grid.uno .gp-invita>div{flex:none}
  #consola-app .gp-grid.uno .gp-invita .btn{flex:none}
  #consola-app .gp-grid.uno .gp-invita b{font-size:1rem;letter-spacing:.14em}
  #consola-app .gp-grid.uno .gp-pie{align-self:center}
  #consola-app .gp-grid.uno .gp-dentro{display:none}
}
@media(min-width:1400px){
  #consola-app .gp-grid.uno .gp{grid-template-columns:minmax(200px,1fr) auto minmax(380px,2fr) auto auto;grid-template-areas:"cab cifras hacer invita pie"}
  #consola-app .gp-grid.uno .gp:has(.gp-cola){grid-template-areas:"cola cola cola cola cola" "cab cifras hacer invita pie"}
}
#consola-app .gp-herr{margin:10px 0;display:flex;flex-direction:column;gap:8px}
#consola-app .gp-herr>section{margin:0}
#consola-app .gp-comun,#consola-app .gp-gen{padding:10px 14px;gap:8px 14px;align-items:center;flex-wrap:nowrap}
#consola-app .gp-comun h3,#consola-app .gp-gen-txt h3{font-size:.98rem;margin:0}
#consola-app .gp-comun p{font-size:.8rem;margin:2px 0 0}
#consola-app .gp-comun-t,#consola-app .gp-gen-txt{flex:0 0 225px}
#consola-app .gp-comun h3,#consola-app .gp-gen-txt h3{white-space:nowrap}
#consola-app .gp-comun-b,#consola-app .gp-gen-b{flex:1;justify-content:flex-start;gap:6px}
#consola-app .gp-gen-b .btn.min,#consola-app .gp-comun-b .btn{padding:7px 11px;font-size:.86rem}
.gp-ayuda summary{cursor:pointer;font-size:.8rem;color:var(--teal,#3ed6c8);margin-top:2px}
.gp-ayuda p{font-size:.8rem;margin:6px 0 0}
@media(max-width:760px){#consola-app .gp-comun,#consola-app .gp-gen{flex-wrap:wrap}#consola-app .gp-comun-t,#consola-app .gp-gen-txt{flex:1 1 100%}
  #consola-app .doc-panel{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ava txt" "ava cif" "b b"}
  #consola-app .doc-b{justify-content:flex-start}}
/* 19-sep · la portada del grupo, también sin aire */
.pt{gap:10px}
.pt .card{padding:12px 16px}
.pt-hero{gap:14px}
.pt-ava{width:64px;height:64px}
.pt-hero h2{font-size:clamp(1.2rem,2.1vw,1.6rem);margin:0 0 2px}
.pt-dos{gap:10px}
.pt-neb{padding:10px 14px}
.pt-neb-cara{width:56px;height:56px}
#pt-neb-p{min-height:2.6em;font-size:1rem}
.pt .c-resumen{margin:0}
.pt-vids{gap:8px;margin:6px 0}
.pt-vids li{grid-template-columns:112px 1fr}
.pt-vids img{width:112px;height:63px}
.pt-retos{gap:6px;margin:6px 0}
.pt-reto{padding:6px 10px}
/* 19-sep · la fila de cada grupo, pensada para empezar la clase: 1 · 2 · 3 y «Hoy toca» */
.gp-b .gp-n{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:.78rem;font-weight:800;
  background:rgba(62,214,200,.16);color:var(--teal,#3ed6c8);border:1px solid rgba(62,214,200,.45)}
.gp-b.principal .gp-n{background:var(--teal,#3ed6c8);color:#05222a}
.gp-b em{font-style:normal;font-size:.76rem;color:var(--mut);font-weight:600;margin-left:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gp-hoy{margin:0;font-size:.84rem;color:#c7d6ee;line-height:1.5}
.gp-hoy>b{color:var(--amber,#f2b544);margin-right:4px}
.gp-hoy span{white-space:nowrap}
@media(min-width:900px){
  #consola-app .gp-grid.uno .gp{grid-template-areas:"cab cifras invita pie" "hacer hacer hacer hacer" "hoy hoy hoy hoy"}
  #consola-app .gp-grid.uno .gp:has(.gp-cola){grid-template-areas:"cola cola cola cola" "cab cifras invita pie" "hacer hacer hacer hacer" "hoy hoy hoy hoy"}
  #consola-app .gp-grid.uno .gp-hoy{grid-area:hoy}
}
@media(min-width:1400px){
  #consola-app .gp-grid.uno .gp{grid-template-areas:"cab cifras hacer invita pie" "hoy hoy hoy hoy hoy"}
  #consola-app .gp-grid.uno .gp:has(.gp-cola){grid-template-areas:"cola cola cola cola cola" "cab cifras hacer invita pie" "hoy hoy hoy hoy hoy"}
}
@media(max-width:640px){.gp-b em{display:none}.gp-hoy span{white-space:normal}}
/* 19-sep · en el MÓVIL, cero aire (Norberto lo mira desde el teléfono) */
@media(max-width:760px){
  .nav .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 12px;gap:4px}
  .nav .wrap::-webkit-scrollbar{display:none}
  .nav .wrap>*{flex:none;white-space:nowrap}
  .nav .brand{margin-right:6px}
  #consola-app .doc-panel{grid-template-areas:"ava txt" "cif cif" "b b";row-gap:8px;padding:10px 12px}
  #consola-app .doc-ava{width:52px;height:52px}
  #consola-app .doc-cifras{flex-wrap:wrap}
  #consola-app .doc-b .btn{padding:7px 10px;font-size:.84rem}
  #consola-app .gp-dentro{display:none}
  #consola-app .gp-invita{padding:8px 10px}
  #consola-app .c-cab{padding:10px 12px;gap:8px}
  #consola-app .c-cab .btn{padding:7px 10px;font-size:.84rem}
  #consola-app .c-cab-b{display:flex;flex-wrap:wrap;gap:6px}
}
/* ================================================================== 19-sep · PILOTO AUTOMÁTICO / MANDO MANUAL */
body.modo-piloto [data-av]{display:none!important}
.modo-sel{display:inline-flex;border:1px solid rgba(62,214,200,.45);border-radius:999px;padding:3px;gap:3px;background:rgba(6,14,24,.7)}
.modo-sel button{font:inherit;font-size:.84rem;font-weight:700;padding:6px 12px;border-radius:999px;border:0;background:none;color:#c7d6ee;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.modo-sel button .ico{width:1.2em;height:1.2em}
.modo-sel button.on{background:var(--teal,#3ed6c8);color:#05222a}
.modo-sel button:focus-visible{outline:2px solid var(--teal,#3ed6c8);outline-offset:2px}
.au-elegido{margin:10px 0 0;padding:10px 14px;border-radius:12px;border:1px solid rgba(62,214,200,.45);background:rgba(62,214,200,.1);font-size:1.1rem;text-align:center}
.au-elegido b{font-size:1.4rem;color:#fff}
@media(max-width:760px){.modo-sel{width:100%}.modo-sel button{flex:1;justify-content:center;padding:7px 8px}}
/* ================================================================== 19-sep · «HOY TOCA», visual (Mis grupos y la portada) */
.gp-hoy-d{grid-area:hoy;margin:0}
.gp-hoy-d>summary{cursor:pointer;list-style:none}
.gp-hoy-d>summary::-webkit-details-marker{display:none}
.gp-hoy-d>summary::after{content:" ▾";color:var(--teal,#3ed6c8)}
.gp-hoy-d[open]>summary{display:none}
.ht{display:flex;flex-direction:column;gap:18px}   /* 20-sep · que respire: cada bloque de «Hoy toca», separado */
.gp-hoy-d .ht{margin-top:4px;padding:12px;border:1px solid rgba(242,181,68,.35);border-radius:14px;background:rgba(242,181,68,.04)}
.ht-cab{display:flex;gap:12px;align-items:center}
.ht-planeta{width:112px;height:112px;flex:none;object-fit:contain;filter:drop-shadow(0 0 22px rgba(62,214,200,.4))}
.ht-cab h3{margin:1px 0;font-size:1.15rem}
.ht-cab p{margin:0}
.ht-cal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ht-cal li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid rgba(242,181,68,.4);background:rgba(242,181,68,.08);font-size:.84rem;color:#f3e3bd}
.ht-sub{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal,#3ed6c8);margin:2px 0 10px}
.ht-vids .pt-vids{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}
.ht-vids .pt-vids li{grid-template-columns:112px minmax(0,220px)}
.ht-retos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ht-reto{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;border:1px solid rgba(62,214,200,.35);background:linear-gradient(180deg,rgba(62,214,200,.07),rgba(6,14,24,.5))}
.ht-reto.rel{border-color:rgba(242,181,68,.5);background:linear-gradient(180deg,rgba(242,181,68,.08),rgba(6,14,24,.5))}
.ht-reto-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ht-tipo{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.ht-reto-cuerpo{display:flex;gap:10px;align-items:flex-start}
.ht-ins{width:58px;height:58px;flex:none;object-fit:contain}
.ht-reto-cuerpo b{display:block;font-size:1rem;line-height:1.3}
.ht-reto-cuerpo p{margin:4px 0 0;font-size:.88rem;color:#c7d6ee;line-height:1.45}
.ht-reto-pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}
.ht-reto-pie .p{font-size:.8rem;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06)}
.ht-reto-pie .p.xp{color:var(--teal,#3ed6c8)}
.ht-reto-pie .p.cr{color:var(--amber,#f2b544)}
.ht-ej{margin-left:auto;font-size:.84rem;font-weight:700;color:var(--teal,#3ed6c8);text-decoration:none}
.ht-ej:hover{text-decoration:underline}
.pt-hoy{padding:14px 16px}
@media(max-width:640px){.ht-planeta{width:72px;height:72px}.ht-retos{grid-template-columns:1fr}.ht-vids .pt-vids li{grid-template-columns:96px 1fr}.ht-vids .pt-vids img{width:96px;height:54px}}
/* (el bloque es un <section>: sin el relleno ni la raya de las secciones de la web) */
section.ht{padding:0;margin:0;border:0;background:none}
.gp-hoy-d section.ht{margin-top:4px;padding:12px;border:1px solid rgba(242,181,68,.35);background:rgba(242,181,68,.04)}
.ht-vids .pt-vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.ht-vids .pt-vids li{grid-template-columns:112px minmax(0,1fr)}
/* ================================================================== 19-sep · MIS GRUPOS SIN CORTES NI AIRE (2.ª vuelta)
   Norberto, con dos capturas: «está súper compacto, se corta» y «tenemos MUCHO AIRE». La cabecera dejaba el nombre en
   «Norbert…» y las cifras en tres pisos (los botones se comían la fila). Las filas de grupo se salían por la derecha, con
   el código de clase cortado, y «Llamada a filas» quedaba bajo su ⧉.
   - La cabecera es una tira que se parte sola.
   - Cada fila se ordena por SU ancho (container queries), no por el de la ventana.
   - El código de clase se va dentro del grupo. */
#consola-app .doc-panel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px}
#consola-app .doc-ava{width:54px;height:54px;flex:none}
#consola-app .doc-txt{display:block;flex:0 1 auto;min-width:0}
#consola-app .doc-txt .eyebrow{margin:0}
#consola-app .doc-txt h2{white-space:nowrap;overflow:visible;max-width:none;font-size:clamp(1.1rem,1.6vw,1.35rem)}
#consola-app .doc-txt p:empty{display:none}
#consola-app .doc-cifras{display:flex;flex-wrap:wrap;gap:6px;flex:0 1 auto}
#consola-app .doc-b{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
@media(max-width:760px){#consola-app .doc-b{margin-left:0;justify-content:flex-start;flex:1 1 100%}}

#consola-app .gp-grid.uno{container-type:inline-size;grid-template-columns:minmax(0,1fr)}
#consola-app .gp-grid.uno .gp{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "cifras" "hacer" "hoy" "pie";
  gap:8px;padding:10px 12px;align-items:center}
#consola-app .gp-grid.uno .gp:has(.gp-cola){grid-template-areas:"cola" "cab" "cifras" "hacer" "hoy" "pie"}
#consola-app .gp-grid.uno .gp>header{grid-area:cab;min-width:0}
#consola-app .gp-grid.uno .gp-cifras{grid-area:cifras;margin:0}
#consola-app .gp-grid.uno .gp-hacer{grid-area:hacer;margin:0}
#consola-app .gp-grid.uno .gp-pie{grid-area:pie;margin:0}
#consola-app .gp-grid.uno .gp-cola{grid-area:cola;margin:0}
#consola-app .gp-grid.uno .gp-hoy-d{grid-area:hoy;min-width:0}
#consola-app .gp-grid.uno .gp-dentro{display:none}
#consola-app .gp h3{font-size:1.1rem;text-wrap:balance}
/* las dos cifras, en línea: «21 alistados · 8 de 15 semanas» (en cajas altas partían la etiqueta en dos) */
#consola-app .gp-cifras{display:flex;flex-wrap:wrap;gap:6px}
#consola-app .gp-cifras div{display:flex;align-items:baseline;gap:5px;padding:5px 10px;white-space:nowrap}
#consola-app .gp-cifras b{display:inline;font-size:1.1rem}
#consola-app .gp-cifras span{font-size:.8rem}
/* 1 · 2 · 3: el texto no se mete bajo la rueda ni el ⧉ (el relleno de «#consola-app .gp-b» pisaba el de la celda) */
#consola-app .gp-celda .gp-b{padding:9px 44px 9px 11px;min-height:48px}
#consola-app .gp-celda:has(.gp-cfg) .gp-b{padding-right:84px}
body.modo-piloto #consola-app .gp-celda:has(.gp-cfg) .gp-b{padding-right:44px}
#consola-app .gp-b b{flex:none;white-space:nowrap}
#consola-app .gp-b em{min-width:0}
/* «Hoy toca»: se parte en renglones, nunca se sale */
#consola-app .gp-hoy span,.gp-hoy span{white-space:normal}
#consola-app .gp-hoy{line-height:1.45}
@container (min-width:620px){
  #consola-app .gp-grid.uno .gp{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"cab cifras pie" "hacer hacer hacer" "hoy hoy hoy";column-gap:12px}
  #consola-app .gp-grid.uno .gp:has(.gp-cola){grid-template-areas:"cola cola cola" "cab cifras pie" "hacer hacer hacer" "hoy hoy hoy"}
  #consola-app .gp-grid.uno .gp-hacer{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  #consola-app .gp-grid.uno .gp-celda.principal{grid-column:auto}
  #consola-app .gp-grid.uno .gp-pie{align-self:center}
}
@container (max-width:900px){
  #consola-app .gp-grid.uno .gp-b em{display:none}
  #consola-app .gp-grid.uno .gp-b b{white-space:normal;flex:0 1 auto}
}
@container (max-width:619px){
  #consola-app .gp-grid.uno .gp-pie .btn.epico.gp-abrir{width:100%}
}
/* «⋯»: archivar, reabrir o borrar el grupo (del referente) */
.gp-mas{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid #2a4656;background:#0b1119;color:#c7d6ee;
  font:800 1.2rem/1 'DM Sans',system-ui,sans-serif;cursor:pointer;display:grid;place-items:center;padding:0}
.gp-mas:hover,.gp-mas:focus-visible{border-color:var(--teal,#3ed6c8);color:#fff;background:rgba(62,214,200,.12);outline:none}
.gs-caja{width:min(640px,100%)}
.gs-op{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 12px;align-items:center;padding:12px;margin:0 0 8px;
  border:1px solid rgba(62,214,200,.35);border-radius:14px;background:rgba(62,214,200,.05)}
.gs-op b{font-size:1.02rem}
.gs-op p{margin:3px 0 0;font-size:.88rem;color:#c7d6ee;line-height:1.45}
.gs-op label{display:block;margin:8px 0 0;font-size:.86rem}
.gs-op input{display:block;width:100%;margin-top:4px}
.gs-op>.btn{align-self:end;white-space:nowrap}
.gs-op.peligro{border-color:rgba(255,122,107,.5);background:rgba(255,122,107,.06)}
.gs-nota{margin:0 0 8px;font-size:.86rem;color:var(--mut)}
.gs-msg{margin:2px 0 0;font-size:.86rem;min-height:1.2em}
.gs-msg:empty{display:none}
@media(max-width:560px){.gs-op{grid-template-columns:auto minmax(0,1fr)}.gs-op>.btn{grid-column:1/-1;justify-content:center}}
/* el código de clase, dentro del grupo: una tira pequeña en la cabecera de la portada */
.pt-hero{flex-wrap:wrap}
.pt-cod{margin-left:auto;display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:6px 10px;border:1px dashed rgba(242,181,68,.45);border-radius:12px}
.pt-cod>span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber,#f2b544);white-space:nowrap}
.pt-cod .gp-cod{font-size:1.05rem;letter-spacing:.16em}
@media(max-width:640px){.pt-cod{margin-left:0;flex:1 1 100%}}
/* ================================================================== 19-sep · LAS FICHAS DE RETO, SIN AIRE
   Norberto, con la captura de «Mis retos»: «no hago más que repetir que debemos reducir el aire». La insignia de 180 px
   marcaba la altura de la ficha y los botones iban al fondo (≈360 px por reto). Elegido entre cuatro dibujadas: en
   «Mi nave», rejilla de tres (la ficha del «Hoy toca» del docente); en «Mis retos», filas plegadas. La altura la marca
   el texto: la insignia va pequeña junto al título y, al abrir, en grande al lado de los pasos. */
.rs-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));align-items:start}
.rs-grid.par{grid-template-columns:repeat(2,minmax(0,1fr))}
.rs-grid .reto-sem[open]{grid-column:1/-1}
.reto-sem.ficha>summary,.reto-sem.ficha:not([open])>summary{height:auto;display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.reto-sem.ficha .rs-cab,.reto-sem.fila .rs-cab{margin:0;flex-wrap:wrap;gap:6px 8px}
.rs-cuerpo{display:flex;gap:12px;align-items:flex-start}
.rs-cuerpo-t{min-width:0}
.rs-minis{display:flex;gap:4px;flex:none}
.rs-mini{width:64px;height:64px;object-fit:contain;display:block}
.rs-minis:has(.rs-mini + .rs-mini) .rs-mini{width:44px;height:44px}
.reto-sem.ficha .rs-tit{margin:0 0 3px}
.reto-sem.ficha .rs-gancho{margin:0 0 3px}
.rs-que{display:inline-block;font-size:.82rem;color:var(--mut)}
.rs-que.per b{color:#c79be6}.rs-que.esp b{color:var(--amber)}.rs-que.hito b{color:#4fd18b}.rs-que.ins b{color:var(--teal)}
.reto-sem.ficha .rs-premio,.reto-sem.ficha:not([open]) .rs-premio{margin:0}
.reto-sem.ficha .rs-abrir{margin:0}
/* «Mis retos»: una línea por reto */
.rs-grid.rs-filas{grid-template-columns:minmax(0,1fr);gap:8px}
.reto-sem.fila>summary.rs-fila,.reto-sem.fila:not([open])>summary.rs-fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px 14px;padding:9px 14px;height:auto}
.reto-sem.fila .rs-mini{width:48px;height:48px}
.reto-sem.fila .rs-minis:has(.rs-mini + .rs-mini) .rs-mini{width:36px;height:36px}
.rs-fila-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.reto-sem.fila .rs-tit{margin:0;font-size:1rem}
.reto-sem.fila .rs-premio,.reto-sem.fila:not([open]) .rs-premio{margin:0;flex-wrap:nowrap}
.rs-flecha{color:var(--mut);font-size:1.1rem;line-height:1;transition:transform .15s}
.reto-sem.fila[open] .rs-flecha{transform:rotate(180deg)}
.reto-sem.fila[open]>summary{border-bottom:1px solid var(--line)}
@media(max-width:640px){
  .reto-sem.fila>summary.rs-fila,.reto-sem.fila:not([open])>summary.rs-fila{grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px}
  .reto-sem.fila .rs-minis{grid-row:span 2;align-self:start}
  .reto-sem.fila .rs-premio{grid-column:2}
  .reto-sem.fila .rs-flecha{grid-column:3;grid-row:1}
}
.reto-sem.por-lanzar.fila{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;padding:9px 14px;margin:0}
.reto-sem.por-lanzar.fila .rs-cab,.reto-sem.por-lanzar.fila .rs-tit{margin:0}
.reto-sem.por-lanzar.fila p{margin:0;flex-basis:100%}
/* abierta: los pasos y, a su lado, la insignia en grande */
.rs-det-cols{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:16px;align-items:start}
.rs-det-cols .rs-der{align-self:start}
.rs-det-cols .rs-trofeo img{max-width:130px}
.rs-det-cols .rs-der:has(.rs-trofeo + .rs-trofeo) .rs-trofeo img{max-width:72px}
@media(max-width:640px){.rs-det-cols{grid-template-columns:minmax(0,1fr)}.rs-det-cols .rs-der{display:none}}
@media(max-width:640px){.reto-sem.fila .rs-que{display:none}.reto-sem.fila .rs-mini{width:40px;height:40px}.reto-sem.fila .rs-tit{font-size:.95rem}}
/* 19-sep · la regla del aire en «Mi botín» y el «Mercado Estelar» (el medidor, pruebas/medir_aire.js, encontró cajas
   estiradas por su vecina: hasta 170 px en blanco). Cada caja mide lo que su contenido; el botón, pegado a lo suyo. */
.ins-temas,.ab-cubiertas{align-items:start}
.ins-temas .ins-tema .badge-col{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}
.grid.nave-rec{align-items:start}
.nave-rec .rec-card .rec-cuerpo{flex:none}
.nave-rec .rec-card .rec-pie{margin-top:0}
/* ================================================================== 19-sep · LA NAVE DEL COMANDANTE
   Norberto: «la página inicial del docente debería ser visualmente similar a la nave del estudiante». La misma ficha
   (nave-perfil, monedas), el mismo menú de botones con iconos (el de la Nave del recluta) y, en lugar de insignias, sus
   grupos y su gente. Decidido con el borrador dibujado del lienzo «Nave del Comandante · borrador». */
/* 🔴 20-sep · TU FICHA, A TODO EL ANCHO, y con el desplegable de grupos dentro: lo tuyo arriba, lo del grupo debajo
   de su banner. El fondo difuminado quita la sensación de hueco vacío sin meter una sola caja más. */
.cn-ficha.ancha{margin:0 0 12px;position:relative;overflow:hidden;
  background:radial-gradient(760px 320px at 88% -30%,rgba(55,224,236,.16),transparent 62%),
             linear-gradient(180deg,rgba(17,33,52,.96),rgba(10,17,28,.96))}
.cn-ficha.ancha::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background:url(../img/nave/iconos/nave.png) right -40px center/260px no-repeat;filter:blur(1px)}
.cn-ficha-c{display:flex;align-items:center;gap:20px;flex-wrap:wrap;position:relative;z-index:1}
.cn-ficha .av-lupa{width:140px;flex:none;position:relative;border:0;background:none;padding:0;cursor:pointer}
.cn-ficha img.av{width:140px;height:140px;border-radius:20px;object-fit:cover;display:block;border:1px solid rgba(55,224,236,.4);
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
.av-cambiar{position:absolute;right:6px;bottom:6px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(8,14,24,.88);border:1px solid rgba(55,224,236,.5)}
.av-cambiar img{width:16px;height:16px}
.cn-ficha-t{min-width:0;flex:1 1 320px;display:flex;flex-direction:column;gap:6px}
.cn-ficha-t h3{margin:0;font-size:clamp(1.4rem,2.6vw,2rem)}
.cn-ficha-t p{margin:0}
.cn-ficha-t .monedas{margin:4px 0 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cn-ficha-t .monedas .m.emb img{width:34px;height:34px;border-radius:9px;object-fit:cover;display:block}
.cn-ficha-t .monedas .m.emb{padding:3px}
.cn-ficha-b{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;flex:1 1 260px}
.cn-sel{display:flex;flex-direction:column;gap:3px}
.cn-sel-t{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.cn-sel select{max-width:300px;padding:8px 10px;border-radius:11px;border:1px solid #2c4a6a;background:#0b1119;color:#e8eefc;font:inherit;font-size:.9rem}
@media(max-width:640px){
  .cn-ficha .av-lupa,.cn-ficha img.av{width:104px;height:104px}
  .cn-ficha-b{justify-content:flex-start}
  .cn-sel select{max-width:100%}
}
/* 🔴 20-sep · EL BANNER DEL GRUPO: abre TODO lo suyo, y lleva el único paso que hace falta (empezar la clase) */
.gr-banner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 14px;padding:20px 24px;position:relative;overflow:hidden;min-height:132px;
  background:radial-gradient(620px 260px at 12% -40%,rgba(255,209,102,.14),transparent 60%),linear-gradient(180deg,#132236,#0c1626);
  border-color:rgba(255,209,102,.35)}
/* el planeta del tema, de portada: descansa la vista y dice de un golpe dónde estáis */
.gr-plan{position:absolute;right:-30px;top:50%;translate:0 -50%;width:340px;height:340px;object-fit:contain;opacity:.45;
  pointer-events:none;filter:blur(.4px);mask-image:radial-gradient(closest-side,#000 55%,transparent);-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent)}
@media(max-width:900px){.gr-plan{width:220px;height:220px;opacity:.18}}
.gr-emb{width:72px;height:72px;border-radius:16px;object-fit:cover;flex:none;border:1px solid #2a4656}
.gr-t{min-width:0;flex:1 1 320px}
.gr-t h2{margin:1px 0;font-size:clamp(1.3rem,2.6vw,1.9rem);text-wrap:balance;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gr-t p{margin:0}
.gr-cambiar{width:30px;height:30px;border-radius:9px;border:1px solid #2c4a6a;background:#0b1119;color:var(--teal);font-size:1rem;cursor:pointer}
.gr-acc{display:flex;align-items:center;gap:6px;margin-left:auto}
.gr-acc .gp-b.principal{min-height:66px;padding:10px 14px;gap:10px;border-radius:16px;box-shadow:0 0 18px rgba(55,224,236,.18)}
@media(max-width:760px){.gr-acc{margin-left:0;width:100%;flex-wrap:wrap}.gr-acc .gp-b.principal{flex:1 1 100%}}
/* el menú de secciones, con los botones de la Nave del recluta */
.cn-secs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:7px;margin:0 0 10px;border:1px solid var(--line);border-radius:16px;background:rgba(8,14,24,.8)}
.pest.cn-t{height:46px;padding:0 13px 0 7px;gap:8px;border-radius:11px;border:1px solid #24344c;color:#cfe0ec;font-weight:600;font-size:.9rem;
  background:linear-gradient(180deg,#15263a,#0e1828);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transform:none}
.pest.cn-t::before,.pest.cn-s::before{display:none!important;content:none!important}
.pest.cn-t .i{width:30px;height:30px;object-fit:contain;display:block;flex:none}
.pest.cn-t{text-decoration:none}                 /* (20-sep · «Contacto» es un enlace: sin subrayado, como las demás) */
a.pest.cn-t-fin{margin-left:auto}                /* y va al final de la fila */
.pest.cn-t b{font-weight:600}
.pest.cn-t:hover{color:#fff;border-color:#2f5a70;background:linear-gradient(180deg,#183049,#10203a);box-shadow:none}
.pest.cn-t.activa{color:#fff;border-color:var(--teal);background:linear-gradient(180deg,#113846,#0c2432);box-shadow:inset 0 0 0 1px rgba(55,224,236,.18),0 0 12px rgba(55,224,236,.18)}
.pest.cn-t.activa .i{filter:drop-shadow(0 0 7px rgba(55,224,236,.6))}
.pest.cn-t.pest-aviso{border-color:var(--amber)}
.cn-sub{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 10px}
.pest.cn-s{padding:6px 12px;font-size:.86rem;border-radius:999px}
@media(max-width:760px){
  .cn-secs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cn-secs::-webkit-scrollbar{display:none}
  .pest.cn-t{flex:none}
  .pest.cn-t b{display:none}
  .pest.cn-t{width:46px;padding:0;justify-content:center}
  .cn-grupos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cn-g{flex:none}
}
/* el Puente: la cabecera del grupo y los tres pasos de la clase */
.pt-cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pt-emb{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none;border:1px solid #2a4656}
.pt-cab-t{min-width:0;flex:1 1 300px}
.pt-cab-t h2{margin:1px 0;font-size:clamp(1.25rem,2.2vw,1.6rem);text-wrap:balance}
.pt-cab-t p{margin:0}
.pt-cab .pt-cod{margin-left:auto}
.pt-acc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.pt-acc .gp-celda .gp-b{min-height:72px;padding:10px 44px 10px 12px;gap:10px;border-radius:16px}
.pt-acc .gp-celda:has(.gp-cfg) .gp-b{padding-right:84px}
body.modo-piloto .pt-acc .gp-celda:has(.gp-cfg) .gp-b{padding-right:44px}
.pt-acc .gp-celda.principal{grid-column:auto}
.pt-acc .gp-b.principal{box-shadow:0 0 18px rgba(55,224,236,.18)}
.pt-acc-i{width:46px;height:46px;object-fit:contain;flex:none}
.pt-acc-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.pt-acc-t b{font-family:'Unbounded',sans-serif;font-size:1rem}
.pt-acc-t em{font-style:normal;font-size:.82rem;color:var(--mut);font-weight:600}
@media(max-width:760px){.pt-acc{grid-template-columns:minmax(0,1fr)}}
/* 🔴 20-sep · EL PUENTE, SIN AIRE Y SIMÉTRICO. Norberto: «revisa los espacios y el aire… haz que las tarjetas sean
   simétricas. Prueba a usar una imagen de fondo para evitar la sensación de aire vacío». El fondo va en el contenedor,
   difuminado y fijo, para que ninguna caja tenga que estirarse para llenar la pantalla. */
/* 🔴 20-sep · EL PLANETA DE LA SEMANA, DE ATMÓSFERA. Fijo detrás de todo (no se mueve al bajar), grande y difuminado:
   la Nave deja de ser una pared de cajas y se nota en qué planeta estáis. Cambia solo al cambiar de tema. */
/* el universo de la Nave del recluta (el MISMO fichero: un dato, un sitio) y, encima, el planeta del tema */
body.con-planeta{background:linear-gradient(180deg,rgba(8,12,20,.82),rgba(8,12,20,.94)),url(../img/nave/fondo_universo.jpg) center/cover fixed,var(--bg)}
body.con-planeta::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:var(--planeta) no-repeat right -90px top 40px/min(440px,52vw) auto;
  opacity:.5;filter:drop-shadow(0 0 60px rgba(62,214,200,.45)) saturate(1.1)}
body.con-planeta::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(760px 520px at 86% 12%,rgba(55,224,236,.14),transparent 62%),
             radial-gradient(900px 560px at 4% 86%,rgba(255,209,102,.07),transparent 60%)}
/* las cajas dejan pasar un poco el planeta: se nota dónde estáis sin que cueste leer */
body.con-planeta #consola-app .card{background:rgba(11,18,30,.78);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
body.con-planeta #consola-app .cn-secs{background:rgba(8,14,24,.7);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
@media(max-width:700px){body.con-planeta::before{opacity:.28;background-size:min(280px,60vw) auto;background-position:right -40px top 10px}}
@media (prefers-reduced-motion:no-preference){body.con-planeta::before{animation:planFlota 26s ease-in-out infinite alternate}}
@keyframes planFlota{from{transform:translateY(0)}to{transform:translateY(-16px)}}
.pt{display:flex;flex-direction:column;gap:18px;position:relative}
/* 🔴 20-sep · «mucha información compacta, difícil de leer, agobia: haz que respire». No son huecos vacíos: es aire
   DENTRO de cada caja, letra más grande y lo que no se usa a diario, plegado. */
.pt>.card,.pt>details.card{padding:22px 24px}
.pt h3{font-size:1.05rem}
.pt .small{font-size:.92rem;line-height:1.55}
@media(max-width:700px){.pt>.card,.pt>details.card{padding:16px 16px}}
.pt>.card{margin:0}
.pt-uno>.card{margin:0}
/* las cifras del grupo, con su aro: cuánto es esa cifra sobre el total, de un vistazo */
.c-res-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;align-items:stretch}
.c-res-cifras>div{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px}
.c-res-cifras>div>span{font-size:.9rem;color:var(--mut);line-height:1.35;display:flex;flex-direction:column}
.c-res-cifras>div>span b{color:#e8f3fa;font-size:1rem;font-weight:700}
.c-aro{--p:0;position:relative;width:70px;height:70px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:conic-gradient(var(--aro,var(--teal)) calc(var(--p)*1%),rgba(255,255,255,.07) 0)}
.c-aro i{position:absolute;inset:5px;border-radius:50%;background:#0c1421}
.c-aro b{position:relative;font-family:'Unbounded',sans-serif;font-size:1.3rem;color:#fff;font-variant-numeric:tabular-nums}
.c-aro.bien{--aro:#3ed6c8}.c-aro.todo{--aro:#4da3ff}.c-aro.retos{--aro:#ffd166}.c-aro.aviso{--aro:#ff9f6b}
@media (prefers-reduced-motion:no-preference){ .c-aro{animation:aroEntra .6s ease both} }
@keyframes aroEntra{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
/* lo que no se usa cada día: plegado, y se abre de una línea */
.pt-plega{padding:0!important}
.pt-plega>summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer;padding:16px 24px;list-style:none;border-radius:16px}
.pt-plega>summary::-webkit-details-marker{display:none}
.pt-plega>summary::after{content:"▾";margin-left:auto;color:var(--teal);transition:transform .2s}
.pt-plega[open]>summary::after{transform:rotate(180deg)}
.pt-plega>summary:hover{background:rgba(55,224,236,.05)}
.pt-plega-t{display:flex;align-items:center;gap:8px;font-family:'Unbounded',sans-serif;font-size:1.05rem;color:#fff}
.pt-plega>*:not(summary){margin-left:24px;margin-right:24px}
.pt-plega>*:last-child{margin-bottom:18px}
@media(max-width:700px){.pt-plega>summary{padding:14px 16px}.pt-plega>*:not(summary){margin-left:16px;margin-right:16px}}
/* el panel del grupo, embebido */
.pt-panel-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pt-panel-cab h3{margin:0;margin-right:auto}
.pt-panel-marco{margin-top:8px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#070b12}
.pt-panel-marco iframe{display:block;width:100%;height:min(56vh,520px);border:0}
/* el mensaje del foro, dentro de «Hoy toca» */
.ht-foro{margin:12px 0 0;padding:10px 12px;border-radius:14px;border:1px solid rgba(55,224,236,.25);background:rgba(55,224,236,.05)}
.ht-foro-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ht-foro-cab .ht-sub{margin:0;margin-right:auto}
.ht-foro-b{display:flex;gap:6px;flex-wrap:wrap}
.ht-mio{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#04222a;background:var(--teal);border-radius:999px;padding:2px 7px;font-weight:800}
.ht-foro .foro-msg{margin-top:6px}
.ht-foro-caja{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.ht-foro-caja textarea{width:100%;font:inherit;font-size:.92rem;line-height:1.45;color:#e8f3fa;background:#0b1119;border:1px solid #24304a;border-radius:10px;padding:8px 10px}
.foro-todos{display:flex;flex-direction:column;gap:6px;max-height:64vh;overflow:auto}
.foro-una{border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:rgba(255,255,255,.02)}
.foro-una summary{cursor:pointer;font-size:.92rem}
/* NEBULA, como el globo del onboarding */
.neb-flota{position:fixed;left:18px;bottom:18px;z-index:60;width:min(420px,calc(100vw - 36px));display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;border-radius:18px;border:1px solid rgba(55,224,236,.45);background:rgba(10,18,30,.97);
  box-shadow:0 20px 50px rgba(0,0,0,.55);animation:nebEntra .45s ease both}
@keyframes nebEntra{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.neb-flota{animation:none}}
.neb-flota-cara{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top;flex:none;border:1px solid rgba(55,224,236,.45)}
.neb-flota-txt{min-width:0;flex:1}
.neb-flota-txt b{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal2,#8fe6ef)}
.neb-flota-txt p{margin:2px 0 0;font-size:.92rem;line-height:1.45;color:#e8f3fa}
.neb-flota .pt-neb-pie{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 0}
.neb-flota-x{position:absolute;top:6px;right:8px;width:26px;height:26px;border:0;background:none;color:var(--mut);cursor:pointer;font-size:.95rem}
.neb-flota-x:hover{color:#fff}
@media(max-width:560px){.neb-flota{right:10px;left:10px;bottom:10px;width:auto}}
.neb-flota{max-width:min(420px,calc(100vw - 36px))}
/* «Reclutas»: el código de clase, por si falta alguien */
.cn-gente-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cn-gente-cab h3{margin:0;margin-right:auto}
.cn-falta{font-size:.85rem;color:var(--mut);font-weight:700}
.cn-vacio .cn-pasados{display:flex;gap:6px;flex-wrap:wrap}
/* ================================================================== 19-sep · GESTIONAR GRUPOS (solo referentes) */
.gs-cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 10px}
.gs-cab-t{flex:1 1 320px;min-width:0}
.gs-cab-t h2{margin:0}
.gs-cab-t p{margin:2px 0 0}
.gs-filtros{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.gs-filtros .chip{cursor:pointer;font:700 .86rem 'DM Sans',system-ui;padding:6px 12px;border-radius:999px;border:1px solid #2a4656;background:none;color:#c7d6ee}
.gs-filtros .chip.on{background:var(--teal);color:#04222a;border-color:var(--teal)}
.gs-tabla{display:flex;flex-direction:column;gap:6px}
.gs-fila{display:grid;grid-template-columns:minmax(0,1.5fr) 160px 110px minmax(0,1.4fr) auto;gap:12px;align-items:center;padding:8px 12px;
  border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:.9rem}
.gs-fila.on{border-color:var(--teal);background:rgba(55,224,236,.06)}
.gs-g{display:flex;align-items:center;gap:10px;min-width:0}
.gs-g img,.gs-g .cn-g-sin{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none}
.gs-g b{display:block;font-size:.95rem}
.gs-g em{font-style:normal;font-size:.8rem;color:var(--mut)}
.gs-est{font-weight:700}
.gs-est.en-marcha{color:var(--teal)}.gs-est.por-empezar{color:var(--amber)}.gs-est.terminado,.gs-est.archivado{color:var(--mut)}
.gs-n em{font-style:normal;color:var(--mut);font-size:.8rem}
.gs-eq{color:#c7d6ee;font-size:.85rem;min-width:0}
.gs-b{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.gs-panel{border:1px solid var(--teal);border-radius:16px;padding:10px 12px;background:#0b1624;margin:-2px 0 6px}
.gs-panel .gs-tabs{margin:0 0 10px}
.gs-panel #c-cuerpo>.card:first-child{margin-top:0}
.gs-op h3{margin:0 0 4px}
@media(max-width:900px){.gs-fila{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.gs-est,.gs-n,.gs-eq{grid-column:1}.gs-b{grid-column:2;grid-row:1 / span 4;align-self:start}}
.cn-ficha .cn-ficha-b{margin-top:12px}
.cn-der .c-res-cifras{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
@media(max-width:640px){.cn-ficha .cn-ficha-b .modo-sel{width:100%}}
.cn-der .c-res-cifras>div{flex:1 1 92px;min-width:0}
/* 19-sep · la regla del aire en «Gestionar grupos»: cada persona del equipo mide lo suyo y sus botones van pegados */
.eq-lista{align-items:start}
.eq-acc,.eq-p .eq-pasar{margin-top:0}
/* 19-sep · la sesión de las semanas 1 y 2: «Únete a la tripulación», con el código en grande (se proyecta) */
.dia.unete .un-cod{font:800 clamp(2.4rem,7vw,4.6rem)/1.05 ui-monospace,'IBM Plex Mono',monospace;letter-spacing:.22em;color:#fff;
  padding:10px 22px;margin:8px 0 12px;border:2px dashed rgba(245,176,67,.6);border-radius:18px;background:rgba(245,176,67,.06);display:inline-block}
.dia.unete .un-pie{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0}
.dia.unete .un-cod{align-self:flex-start;width:fit-content}
.cn-sub .cn-comun{margin-left:auto;text-decoration:none}
.esc-datos{align-items:start}   /* 19-sep · cada dato de un escuadrón mide lo suyo (el del Comandante, con su correo, estiraba a los demás) */