/* =====================================================================
   Aula Interactiva — tema escolar (claro, colorido y animado).
   Se carga DESPUÉS de app.css, games.css y extra.css y redefine tokens
   y componentes. Títulos en Fredoka, texto en Nunito.
   ===================================================================== */

:root {
  --bg: #FFF8EE;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F2FF;
  --surface-3: #ECE6FF;
  --line: #E6DFF7;
  --text: #2B2350;
  --muted: #6F6892;
  --accent: #6C47FF;
  --accent-dark: #4E2FD9;
  --accent-ink: #FFFFFF;
  --ok: #16A34A;
  --warn: #E58A00;
  --danger: #E5374F;
  --c-coral: #FF6B6B; --c-amber: #FFB02E; --c-teal: #14B8A6; --c-blue: #3A86FF;
  --c-violet: #8B5CF6; --c-pink: #FF5DA2; --c-green: #22C55E; --c-sky: #38BDF8;
  --rainbow: linear-gradient(90deg, #FF6B6B, #FFB02E, #22C55E, #38BDF8, #6C47FF, #FF5DA2);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 14px 34px rgba(60, 40, 140, .13);
  --shadow-sm: 0 4px 14px rgba(60, 40, 140, .08);
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --doodles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='.13'%3E%3Cpath d='M30 22 l5 10 11 2 -8 8 2 11 -10 -5 -10 5 2 -11 -8 -8 11 -2z' stroke='%23FFB02E'/%3E%3Ccircle cx='170' cy='40' r='11' stroke='%2338BDF8'/%3E%3Cpath d='M120 120 l16 -26 16 26z' stroke='%23FF6B6B'/%3E%3Cpath d='M40 150 q12 -14 24 0 t24 0' stroke='%2322C55E'/%3E%3Cpath d='M180 160 v20 M170 170 h20' stroke='%23FF5DA2'/%3E%3Crect x='92' y='26' width='20' height='20' rx='4' transform='rotate(18 102 36)' stroke='%236C47FF'/%3E%3Cpath d='M150 205 l26 -26 6 6 -26 26 -9 3z' stroke='%23FFB02E'/%3E%3Ccircle cx='60' cy='92' r='4' stroke='%236C47FF'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}

body {
  background-color: var(--bg);
  background-image: var(--doodles);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
}
h1, h2, h3, h4, .stage-title, .np-title, .score-num, .tile b, .podium-name, .rk-pin b, .share-pin b, .lv-pin-big {
  font-family: var(--font-display);
  letter-spacing: 0;
}
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
a { color: var(--accent); font-weight: 700; }
::selection { background: #FFE07A; }
:focus-visible { outline: 3px solid var(--c-amber); outline-offset: 2px; }
.muted { color: var(--muted); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.accent { color: var(--accent); }

/* ---------- animaciones base ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes bounce-in { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 8deg)); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes shine { to { background-position: 200% 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
.intro > *, .results > *, .act-card, .type-card, .empty, .login, .landing-card, .page-head { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.intro > :nth-child(2), .results > :nth-child(2) { animation-delay: .08s; }
.intro > :nth-child(3), .results > :nth-child(3) { animation-delay: .16s; }
.act-grid > :nth-child(2) { animation-delay: .05s; } .act-grid > :nth-child(3) { animation-delay: .1s; }
.act-grid > :nth-child(4) { animation-delay: .15s; } .act-grid > :nth-child(5) { animation-delay: .2s; }
.act-grid > :nth-child(n+6) { animation-delay: .25s; }

/* ---------- botones con relieve ---------- */
.btn {
  border: 2px solid var(--line); background: #fff; color: var(--text);
  border-radius: 14px; font: 800 .95rem var(--font); padding: .6rem 1.1rem;
  box-shadow: 0 3px 0 var(--line); transition: transform .08s, box-shadow .08s, background .15s, filter .15s;
}
.btn:hover { background: var(--surface-2); filter: none; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent-dark); box-shadow: 0 4px 0 var(--accent-dark); }
.btn-primary:hover { background: #7A58FF; }
.btn-primary:active { box-shadow: 0 1px 0 var(--accent-dark); }
.btn-warn { background: var(--c-amber); color: #3B2500; border-color: #D98C00; box-shadow: 0 4px 0 #D98C00; }
.btn-danger { background: #fff; color: var(--danger); border-color: #F7B8C2; box-shadow: 0 3px 0 #F7B8C2; }
.btn-danger:hover { background: #FFF0F2; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-ghost:active { box-shadow: none; }
.btn-lg { padding: .85rem 1.6rem; font-size: 1.08rem; border-radius: 16px; }
.btn-sm { padding: .36rem .75rem; font-size: .84rem; border-radius: 11px; box-shadow: 0 2px 0 var(--line); }
.btn-primary.btn-sm { box-shadow: 0 3px 0 var(--accent-dark); }
.icon-btn { color: var(--muted); }
.icon-btn:hover { background: var(--surface-3); color: var(--accent); }

/* ---------- formularios ---------- */
.input { background: #fff; border: 2px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-weight: 600; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(108, 71, 255, .15); }
.input::placeholder { color: #A9A3C4; }
.label { font-weight: 800; color: var(--text); }
.switch input { accent-color: var(--accent); }
.swatch { border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); }
kbd { background: #fff; color: var(--text); }

/* ---------- tarjetas y piezas ---------- */
.card, .stage-card, .tile, .modal, .np-light {
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.pill { background: var(--surface-3); color: var(--text); font-weight: 800; }
.pill-ok { background: #DCFCE7; color: #15803D; }
.pill-warn { background: #FFF1D6; color: #B45309; }
.pill-danger { background: #FFE1E6; color: var(--danger); }
.bar { background: var(--surface-3); height: 10px; }
.bar > i { background: linear-gradient(90deg, var(--c-violet), var(--c-pink)); }
.note { background: #FFF7DD; border-left: 5px solid var(--c-amber); border-radius: 12px; color: #4A3B12; }
.spinner { border-color: var(--surface-3); border-top-color: var(--accent); }
.big-emoji { animation: bounce-in .6s both; }

/* ---------- toasts y modales ---------- */
.toast { background: #fff; color: var(--text); border: 2px solid var(--line); border-left-width: 6px; box-shadow: var(--shadow); font-weight: 700; }
.toast-ok { border-color: #BBF7D0; border-left-color: var(--ok); }
.toast-warn { border-color: #FDE3A7; border-left-color: var(--c-amber); }
.toast-error { border-color: #FBC4CD; border-left-color: var(--danger); }
.modal-back { background: rgba(43, 35, 80, .45); backdrop-filter: blur(4px); }
.modal { animation: bounce-in .3s both; }
.modal-head h3 { font-size: 1.3rem; }

/* ---------- barra superior (jugar) ---------- */
.topbar {
  background: rgba(255, 255, 255, .9); border-bottom: 4px solid transparent;
  border-image: var(--rainbow) 1; box-shadow: 0 6px 20px rgba(60, 40, 140, .06);
}
.brand { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text); }
.brand img { border-radius: 10px; transition: transform .3s; }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
.steps li { background: var(--surface-2); color: var(--muted); border: 2px solid var(--line); font-weight: 800; }
.steps li.now { background: var(--accent); color: #fff; border-color: var(--accent-dark); animation: bounce-in .4s both; }
.steps li.done { background: #DCFCE7; color: #15803D; border-color: #BBF7D0; }
.step-n { background: rgba(255, 255, 255, .55); color: inherit; }
.steps li:not(.now):not(.done) .step-n { background: #fff; }

/* ---------- portada (estudiante) ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; border: 0; box-shadow: var(--shadow);
  background: linear-gradient(135deg, var(--theme), color-mix(in srgb, var(--theme) 55%, #FF5DA2));
}
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .14); pointer-events: none; }
.hero::before { width: 280px; height: 280px; right: -70px; top: -90px; }
.hero::after { width: 160px; height: 160px; right: 140px; bottom: -80px; background: rgba(255, 255, 255, .1); }
.hero > * { position: relative; }
.hero h1 { color: #fff; font-weight: 700; text-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.hero-cover { border-radius: 18px; border: 5px solid #fff; transform: rotate(-3deg); box-shadow: 0 16px 34px rgba(0, 0, 0, .25); transition: transform .3s; }
.hero-cover:hover { transform: rotate(0) scale(1.03); }
.hero-cover-empty { background: rgba(255, 255, 255, .25); }
.eyebrow { color: rgba(255, 255, 255, .92); }
.creator { background: rgba(255, 255, 255, .22); color: #fff; }
.howto li { background: #fff; border: 2px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.howto li:nth-child(4n+1) { border-color: #FFD6D6; } .howto li:nth-child(4n+2) { border-color: #FFE7B8; }
.howto li:nth-child(4n+3) { border-color: #C9F2E9; } .howto li:nth-child(4n+4) { border-color: #D6E6FF; }
.howto li span { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); flex-shrink: 0; }
.join-form .label { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }

/* ---------- reproductor estilo Spotify (se mantiene oscuro) ---------- */
.np {
  --text: #FFFFFF; --muted: #BDB6DE; --surface-2: #362D66; --surface-3: #463C7E; --line: #463C7E;
  background: linear-gradient(160deg, #2B2350, #1F1940); color: #fff; border: 0; border-radius: var(--radius); box-shadow: var(--shadow);
}
.sl-mini .np { background: rgba(31, 25, 64, .96); }
.np-range { background: linear-gradient(to right, var(--c-amber) var(--p, 0%), #463C7E var(--p, 0%)); }
.np-play { background: linear-gradient(135deg, var(--c-amber), var(--c-pink)); color: #fff; box-shadow: 0 6px 18px rgba(255, 93, 162, .4); }
.np-playing .np-play { animation: pulse-play 1.6s ease-in-out infinite; }
@keyframes pulse-play { 50% { box-shadow: 0 0 0 10px rgba(255, 176, 46, .18), 0 6px 18px rgba(255, 93, 162, .4); } }
.np-stage { border-radius: 16px; }
.seg { background: var(--surface-2); border: 2px solid var(--line); }
.seg-btn { font-weight: 800; color: var(--muted); }
.seg-btn.on { background: var(--accent); color: #fff; }
.np .seg-btn.on { background: #6C47FF; }

/* ---------- etapas ---------- */
.stage-card { padding: 24px; }
.single .stage-card, .sl-main > .stage-card { border-top: 6px solid var(--theme); }
.stage-title { color: var(--text); font-size: clamp(1.4rem, 3vw, 1.9rem); }
.ly {
  border-radius: 20px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12);
  background-image: radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .18) 0 60px, transparent 61px), radial-gradient(circle at 4% 96%, rgba(255, 255, 255, .12) 0 40px, transparent 41px);
}
.bank { background: rgba(255, 255, 255, .97); border: 2px solid var(--line); box-shadow: 0 -12px 30px rgba(60, 40, 140, .12); }
.chip {
  --cc: var(--c-violet);
  background: #fff; color: var(--text); border: 2px solid color-mix(in srgb, var(--cc) 45%, #fff);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cc) 45%, #fff); font-weight: 800; transition: transform .1s, box-shadow .1s, opacity .2s;
}
.chip:hover { background: color-mix(in srgb, var(--cc) 10%, #fff); transform: translateY(-2px); }
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--cc) 45%, #fff); }
.chip:nth-child(6n+1) { --cc: var(--c-coral); } .chip:nth-child(6n+2) { --cc: var(--c-amber); } .chip:nth-child(6n+3) { --cc: var(--c-teal); }
.chip:nth-child(6n+4) { --cc: var(--c-blue); } .chip:nth-child(6n+5) { --cc: var(--c-violet); } .chip:nth-child(6n+6) { --cc: var(--c-pink); }
.chip.used { opacity: .35; transform: none; }
.chip.sel { background: var(--accent); color: #fff; border-color: var(--accent-dark); }
.chip-ok { color: var(--ok); border-color: #86EFAC; box-shadow: none; }
.chip-bad { color: var(--danger); border-color: #FDA4AF; box-shadow: none; }
.pz-board { background: var(--text); }
.pz-stats b { color: var(--accent); }
.ord-item { background: #fff; border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.ord-item::before { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-family: var(--font-display); }
.ord-item.dragging { background: #FFF7DD; }
.emoji-btn { background: #fff; box-shadow: 0 3px 0 var(--line); }
.emoji-btn.on { background: #F1ECFF; animation: wiggle .4s; }

/* ---------- resultados ---------- */
.results-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme) 22%, #fff) 0%, #fff 70%);
}
.results-hero h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--text); }
.results-hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--rainbow); }
.results-owl { width: 110px; margin: -6px auto 0; display: block; animation: bounce-in .7s both; }
.ring { background: conic-gradient(var(--c-amber) 0, var(--c-pink) calc(var(--pct) * .5%), var(--accent) calc(var(--pct) * 1%), var(--surface-3) 0); animation: bounce-in .7s both; }
.ring-in { background: #fff; box-shadow: inset 0 0 0 4px var(--surface-2); }
.score-num { color: var(--text); font-weight: 700; }
.rank-list li { background: #fff; border: 2px solid var(--line); border-radius: 14px; }
.rank-list li:nth-child(1) { background: #FFF6D6; border-color: #FFE08A; }
.rank-list li:nth-child(2) { background: #F1F3F8; border-color: #DCE1EC; }
.rank-list li:nth-child(3) { background: #FFEEDD; border-color: #F9D2AE; }
.rank-list li.me { outline: 3px solid var(--accent); }
.rank-score { color: var(--accent); font-family: var(--font-display); font-size: 1.1rem; }
.rv-ok { background: #fff; color: #15803D; }
.stage-row .bar > i { background: linear-gradient(90deg, var(--c-teal), var(--c-green)); }

/* ---------- ranking proyectable ---------- */
.ranking-page { background: linear-gradient(180deg, #EDE7FF 0%, var(--bg) 55%); background-image: var(--doodles), linear-gradient(180deg, #EDE7FF 0%, var(--bg) 55%); }
.rk-head h1 { color: var(--text); }
.rk-head .eyebrow, .rk-head .creator { color: var(--accent); }
.rk-head .creator { background: #fff; border: 2px solid var(--line); }
.rk-join { background: #fff; border: 2px solid var(--line); box-shadow: var(--shadow); }
.podium-name { color: var(--text); }
.podium-score { color: var(--accent); }
.podium-col { animation: rise .6s both; }
.podium-col.p2 { animation-delay: .1s; } .podium-col.p3 { animation-delay: .2s; }
.p1 .podium-bar { background: linear-gradient(180deg, #FFD54A, #FFB02E); border: 0; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .08); }
.p2 .podium-bar { background: linear-gradient(180deg, #C9D3E3, #9AA8C0); border: 0; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .08); }
.p3 .podium-bar { background: linear-gradient(180deg, #FFB37A, #F08A4B); border: 0; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .08); }
.podium-bar { border-radius: 18px 18px 0 0; }
.podium-medal { animation: float 3s ease-in-out infinite; }

/* ---------- panel docente ---------- */
.admin-top { background: rgba(255, 255, 255, .92); border-bottom: 4px solid transparent; border-image: var(--rainbow) 1; box-shadow: 0 6px 20px rgba(60, 40, 140, .06); }
.admin-nav a { color: var(--muted); font-weight: 800; border: 2px solid transparent; }
.admin-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.admin-nav a.on { background: var(--accent); color: #fff; border-color: var(--accent-dark); box-shadow: 0 3px 0 var(--accent-dark); }
.page-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.act-card {
  --tc: var(--accent);
  background: #fff; border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s;
}
.act-card:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--tc) 45%, var(--line)); }
.act-cover {
  position: relative; background-color: var(--tc);
  background-image: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .25) 0 34px, transparent 35px),
    radial-gradient(circle at 10% 90%, rgba(255, 255, 255, .18) 0 26px, transparent 27px),
    linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 55%, #FF5DA2));
}
.act-cover span { font-size: 3.4rem; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .15)); transition: transform .3s; }
.act-card:hover .act-cover span { transform: scale(1.15) rotate(-8deg); }
.act-type { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 800; color: var(--tc); text-transform: uppercase; letter-spacing: .04em; }
.act-body h3 { font-size: 1.2rem; }
.empty { background: rgba(255, 255, 255, .7); border: 3px dashed var(--line); }
.empty-owl { width: 140px; margin: 0 auto 6px; display: block; }
.type-card {
  --tc: var(--accent);
  background: #fff; border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); transition: transform .15s, border-color .15s, background .15s;
}
.type-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tc) 50%, var(--line)); }
.type-card.on { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 9%, #fff); box-shadow: 0 4px 0 var(--tc); }
.type-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 14%, #fff); font-size: 1.9rem; }
.share { border-color: #D9CCFF; background: linear-gradient(135deg, #fff, #F7F3FF); }
.share-pin b { color: var(--accent); font-weight: 700; }
code.link { background: #fff; border: 2px solid var(--line); }
.ed-section { border-left: 6px solid var(--line); }
.ed-section:nth-of-type(6n+1) { border-left-color: #FFB4B4; } .ed-section:nth-of-type(6n+2) { border-left-color: #FFD58A; }
.ed-section:nth-of-type(6n+3) { border-left-color: #93E5D7; } .ed-section:nth-of-type(6n+4) { border-left-color: #A9C8FF; }
.ed-section:nth-of-type(6n+5) { border-left-color: #C9B5FF; } .ed-section:nth-of-type(6n+6) { border-left-color: #FFB3D4; }
.ed-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); flex-shrink: 0; }
.save-bar { background: rgba(255, 255, 255, .96); border: 2px solid var(--line); box-shadow: 0 -10px 30px rgba(60, 40, 140, .1); }
.upl { background: #FCFBFF; border: 2px dashed var(--line); }
.upl-empty { background: var(--surface-2); }
.lst-row { background: #FCFBFF; border: 2px solid var(--line); }
.lst-n { background: var(--accent); color: #fff; font-family: var(--font-display); }
.tile { position: relative; overflow: hidden; }
.tile::after { content: ''; position: absolute; right: -18px; top: -18px; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); }
.tiles > .tile:nth-child(6n+1)::after { background: #FFE1E1; } .tiles > .tile:nth-child(6n+2)::after { background: #FFEFCC; }
.tiles > .tile:nth-child(6n+3)::after { background: #D5F5EE; } .tiles > .tile:nth-child(6n+4)::after { background: #DDEBFF; }
.tiles > .tile:nth-child(6n+5)::after { background: #EAE2FF; } .tiles > .tile:nth-child(6n+6)::after { background: #FFE0EF; }
.tile > * { position: relative; z-index: 1; }
.tile b { color: var(--text); font-weight: 700; }
.table th { color: var(--muted); border-bottom: 2px solid var(--line); }
.table td { border-bottom: 1px solid var(--line); }
.table tbody tr:hover td { background: #FBF9FF; }
.login { position: relative; }
.login-owl { width: 120px; margin: -70px auto 0; display: block; filter: drop-shadow(0 10px 14px rgba(60, 40, 140, .2)); }

/* ---------- juegos: ajustes al tema claro ---------- */
.ws-grid { background: #fff; border: 3px solid var(--line); box-shadow: var(--shadow-sm); }
.ws-cell { background: var(--surface-2); color: var(--text); font-family: var(--font-display); font-weight: 600; }
.ws-cell.sel { background: var(--c-amber); color: #fff; }
.ws-words li { background: #fff; border: 2px solid var(--line); }
.cw-cell { box-shadow: 0 0 0 2px var(--text); border-radius: 4px; }
.cw-cell.hl { background: #FFF1B8; }
.cw-clues li { background: #fff; border: 2px solid var(--line); }
.cw-clues li.on { background: #F1ECFF; outline-color: var(--accent); }
.qz-opt { box-shadow: 0 5px 0 rgba(0, 0, 0, .22); border-radius: 16px; font-family: var(--font); }
.qz-opt:hover:not(:disabled) { transform: translateY(-3px) scale(1.01); }
.qz-feedback.ok { background: #DCFCE7; color: #14532D; }
.qz-feedback.bad { background: #FFE4E8; color: #7F1D2D; }
.mem-back { border: 3px solid var(--line); }
.mem-front { box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15); background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25) 0 12px, transparent 13px), linear-gradient(135deg, var(--theme), color-mix(in srgb, var(--theme) 55%, #FF5DA2)); }
.mt-item { background: #fff; border-width: 2px; box-shadow: 0 3px 0 var(--line); font-weight: 700; }
.mt-item.sel { border-color: var(--accent); background: #F1ECFF; }
.cl-pool { background: rgba(255, 255, 255, .7); }
.cl-group { background: color-mix(in srgb, var(--gc) 8%, #fff); border-width: 3px; }
.cl-group h4 { color: var(--gc); filter: none; font-family: var(--font-display); font-size: 1.15rem; }
.an-slot { background: #fff; border: 2px solid var(--line); border-bottom-width: 5px; font-family: var(--font-display); }
.an-tile { border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); font-family: var(--font-display); color: var(--accent); }
.an-dot { background: #fff; }
.hm-key { background: #fff; border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.hm-key:hover:not(:disabled) { background: var(--surface-2); }
.hm-key.miss { box-shadow: none; opacity: .5; }
.hm-letter { font-family: var(--font-display); }
.li-board { background: var(--surface-2); border: 3px solid var(--line); }
.li-list li { background: #fff; border: 2px solid var(--line); }
.bg-cell { border-width: 2px; box-shadow: 0 3px 0 var(--line); font-family: var(--font); }
.bg-clue { box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12); }
.tf-card { border: 3px solid var(--line); }
.fb-face { background: #fff; box-shadow: 0 3px 0 var(--line); }
.fb-face.on { background: #F1ECFF; border-color: var(--accent); animation: wiggle .4s; }
.fb-comment { background: #FCFBFF; border: 2px solid var(--line); }
.win-banner { background: #DCFCE7; color: #15803D; border: 2px solid #BBF7D0; animation: bounce-in .5s both; }
.wh-svg { filter: drop-shadow(0 12px 22px rgba(60, 40, 140, .25)); }
.wh-pointer { color: var(--danger); text-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.cloze .ly { background-color: var(--theme); }

/* ---------- modo en vivo (proyector, vibrante) ---------- */
.live-page {
  --bg: #2A1B6E; --surface: #3A2A8F; --surface-2: #4A39A6; --surface-3: #5A49BA; --line: #6B5BD0; --text: #FFFFFF; --muted: #D2CBFF;
  color: #fff;
  background-color: #2A1B6E;
  background-image: var(--doodles), radial-gradient(1100px 600px at 50% -20%, #6C47FF, transparent 70%);
}
.live-page .card, .live-page .lv-join, .live-page .lv-players-box { background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
.live-page .btn { background: #fff; color: var(--accent); border-color: #fff; box-shadow: 0 4px 0 #B9A8FF; }
.live-page .btn-primary { background: var(--c-amber); color: #3B2500; border-color: #D98C00; box-shadow: 0 5px 0 #D98C00; }
.live-page .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.live-page .pill { background: rgba(255, 255, 255, .15); color: #fff; }
.live-page .rank-list li { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.live-page .rank-list li:nth-child(1) { background: rgba(255, 213, 74, .25); }
.live-page .rank-score, .live-page .podium-score, .live-page .lv-pin b, .live-page .lv-pin-big { color: var(--c-amber); }
.live-page .podium-name, .live-page h1, .live-page h2, .live-page h3 { color: #fff; }
.live-page .note { background: rgba(255, 255, 255, .12); color: #fff; border-left-color: var(--c-amber); }
.live-page .lv-players .chip { background: #fff; color: #2B2350; font-size: 1.2rem; animation: bounce-in .4s both; }
.lv-q { text-shadow: 0 4px 0 rgba(0, 0, 0, .2); }
.lv-opt { box-shadow: 0 6px 0 rgba(0, 0, 0, .25); border-radius: 18px; }
.lv-timer { background: var(--c-amber); color: #3B2500; box-shadow: 0 4px 0 #D98C00; }
.lv-student .stage-card { border-top-color: var(--accent); }

/* ---------- portada de inicio (landing) ---------- */
.landing { overflow-x: hidden; }
.landing-wrap { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; position: relative; }
.landing-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; position: relative; z-index: 2; }
.landing-main { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 10px 22px 30px; position: relative; z-index: 2; }
.landing-copy h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; margin: .2em 0 .3em; }
.landing-copy h1 .hl { background: var(--rainbow); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
.landing-copy .lead { font-size: 1.2rem; color: var(--muted); max-width: 520px; }
.landing-badge { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: .3rem .8rem; font-weight: 800; font-size: .85rem; box-shadow: 0 3px 0 var(--line); }
.landing-card { background: #fff; border: 3px solid var(--line); border-radius: 28px; padding: 26px; box-shadow: var(--shadow); position: relative; text-align: center; }
.landing-card .landing-owl { width: 150px; margin: -95px auto 6px; display: block; filter: drop-shadow(0 12px 16px rgba(60, 40, 140, .22)); }
.landing-card h2 { font-size: 1.6rem; margin-bottom: .2em; }
.input-pin { font-family: var(--font-display); font-weight: 600; font-size: 2.4rem; letter-spacing: .32em; border-width: 3px; border-radius: 18px; background: #FCFBFF; }
.pin-error { color: var(--danger); animation: wiggle .4s; }
.landing-feats { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 18px; }
.landing-feats span { background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: .35rem .7rem; font-weight: 800; font-size: .9rem; }
.marquee { overflow: hidden; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); background: rgba(255, 255, 255, .7); position: relative; z-index: 2; }
.marquee-track { display: flex; gap: 14px; width: max-content; padding: 12px 0; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: .45rem .9rem; font-weight: 800; white-space: nowrap; box-shadow: 0 3px 0 var(--line); }
.marquee-item:nth-child(6n+1) { border-color: #FFC9C9; } .marquee-item:nth-child(6n+2) { border-color: #FFE0A3; }
.marquee-item:nth-child(6n+3) { border-color: #A8EBDD; } .marquee-item:nth-child(6n+4) { border-color: #BCD6FF; }
.marquee-item:nth-child(6n+5) { border-color: #D7C8FF; } .marquee-item:nth-child(6n+6) { border-color: #FFC6E0; }
.floaty { position: absolute; z-index: 1; font-size: 2.4rem; animation: float 6s ease-in-out infinite; pointer-events: none; user-select: none; opacity: .9; }
.teacher-link { position: static; color: var(--muted); font-weight: 800; }
@media (max-width: 860px) {
  .landing-main { grid-template-columns: 1fr; gap: 70px; padding-top: 0; }
  .landing-copy { text-align: center; }
  .landing-copy .lead { margin-left: auto; margin-right: auto; }
  .landing-feats { justify-content: center; }
  .floaty { font-size: 1.7rem; opacity: .6; }
}

/* ---------- impresión: sin fondos ---------- */
@media print { body { background: #fff; } .topbar, .admin-top, .save-bar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .floaty, .podium-medal, .landing-copy h1 .hl { animation: none !important; }
}

/* Fondos de página: reemplazan los degradados oscuros del tema anterior */
body.landing { background-color: var(--bg); background-image: var(--doodles), radial-gradient(900px 500px at 85% 10%, #EDE5FF, transparent 70%), radial-gradient(700px 500px at 5% 95%, #FFE9D6, transparent 70%); }
body.ranking-page { background-color: var(--bg); background-image: var(--doodles), radial-gradient(1100px 520px at 50% -10%, #E7DEFF, transparent 70%); }
.live-page .toast, .live-page .modal, .live-page .input { color: #2B2350; }
.live-page .modal { --text: #2B2350; --muted: #6F6892; --surface: #fff; --line: #E6DFF7; }