:root {
  --azul: #0e0e78;
  --azul2: #1d2290;
  --oro: #f5b700;
  --ok: #2fb35a;
  --ok-soft: #e3f7ea;
  --bad: #e5484d;
  --bad-soft: #fde8e8;
  --ink: #1c2433;
  --soft: #5b6475;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Montserrat", system-ui, sans-serif; color: var(--ink); background: #f3f5fa; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; }
.muted { color: var(--soft); }

/* ---------- Tarjetas de entrada ---------- */
.entrar {
  min-height: 100dvh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% -10%, #4a4fd1, var(--azul) 60%);
}
.card { display: flex; flex-direction: column; gap: 12px; width: min(400px, 100%); padding: 26px; border-radius: 22px; background: #fff; box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .6); }
.card.wide { width: 100%; max-width: 1100px; margin: 0 auto 16px; box-shadow: 0 1px 0 #e3e7ef, 0 8px 24px -18px rgba(0, 0, 0, .3); }
.kicker { margin: 0; font: 700 .75rem "Montserrat", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #b38500; }
.card h1 { font: 800 1.9rem/1.1 "Baloo 2", sans-serif; }
.card h2 { font: 800 1.15rem "Baloo 2", sans-serif; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .85rem; color: #3a4252; }
input, select { padding: 12px 14px; border: 2px solid #e3e7ef; border-radius: 12px; font: 600 1rem "Montserrat", sans-serif; color: var(--ink); background: #fff; }
input:focus, select:focus { outline: none; border-color: #4c6ef5; }
.pin { font: 800 1.8rem "Baloo 2", monospace; letter-spacing: .2em; text-align: center; }
.btn { padding: 13px 20px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #ffb703, #fb8500); color: #1c1300; font: 800 1.1rem "Baloo 2", sans-serif; cursor: pointer; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.btn:disabled { opacity: .6; }
.msg { min-height: 1.2em; margin: 0; color: var(--bad); font-weight: 700; font-size: .9rem; }
.msg:empty { min-height: 0; }
.help { margin: 0; font-size: .8rem; color: var(--soft); text-align: center; }
.row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.row label { flex: 1 1 240px; }

/* ---------- Estudiante jugando ---------- */
body.alumno .jugar { display: flex; flex-direction: column; height: 100dvh; background: var(--azul); }
.barra { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; color: #fff; font-size: .85rem; background: rgba(0, 0, 0, .25); }
.conexion { color: #7ee2a0; font-weight: 700; white-space: nowrap; }
.conexion.off { color: #ffb4a8; }
.marco { flex: 1; display: grid; place-items: center; min-height: 0; padding: 8px; }
.marco iframe { width: min(100%, calc((100dvh - 60px) * 1300 / 730)); aspect-ratio: 1300 / 730; border: 0; border-radius: 12px; background: var(--azul); }

/* ---------- Docente ---------- */
body.docente .salas, body.docente .consola { min-height: 100dvh; padding: 18px clamp(12px, 3vw, 32px) 40px; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; max-width: 1400px; margin: 0 auto 16px; }
.top h1 { font: 800 1.7rem "Baloo 2", sans-serif; }
.top a { color: #3d5bd9; font-weight: 700; text-decoration: none; font-size: .85rem; }
.sub { margin: 0; color: var(--soft); font-weight: 600; }
.pinbox { display: flex; flex-direction: column; align-items: center; padding: 10px 22px; border-radius: 18px; background: var(--azul); color: #fff; }
.pinbox span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.pinbox b { font: 800 2.6rem/1 "Baloo 2", sans-serif; letter-spacing: .12em; color: var(--oro); }
.pinbox small { font-size: .7rem; opacity: .75; }
.salas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.sala { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: #f5f6fb; color: inherit; text-decoration: none; font-size: .85rem; border: 2px solid transparent; }
.sala:hover { border-color: #4c6ef5; }
.pin-chip { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--azul); color: var(--oro); font-weight: 800; }
.resumen { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1400px; margin: 0 auto 14px; }
.resumen span { padding: 8px 14px; border-radius: 999px; background: #fff; font-size: .85rem; box-shadow: 0 1px 0 #e3e7ef; }
.resumen b { font-size: 1.05rem; }
.r-gano b { color: var(--ok); } .r-perdio b { color: var(--bad); } .r-off b { color: #9aa2b1; } .r-jugando b { color: #3d5bd9; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; max-width: 1400px; margin: 0 auto; }
.vacio { grid-column: 1 / -1; padding: 40px; border-radius: 18px; background: #fff; text-align: center; color: var(--soft); }
.jug { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; background: #fff; border-top: 5px solid #c9cfdb; box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .4); cursor: pointer; transition: transform .15s; }
.jug:hover, .jug:focus-visible { transform: translateY(-2px); outline: none; box-shadow: 0 0 0 3px #4c6ef5; }
.jug header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.jug header b { font: 800 1.15rem "Baloo 2", sans-serif; }
.badge { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: #eef0f5; color: var(--soft); white-space: nowrap; }
.st-jugando { border-top-color: #4c6ef5; } .st-jugando .badge { background: #e7ecff; color: #3d5bd9; }
.st-bien { border-top-color: var(--ok); } .st-bien .badge { background: var(--ok-soft); color: #1d7a3d; }
.st-mal, .st-perdio { border-top-color: var(--bad); } .st-mal .badge, .st-perdio .badge { background: var(--bad-soft); color: #b42323; }
.st-gano { border-top-color: var(--oro); } .st-gano .badge { background: #fff3cc; color: #8a6400; }
.st-off { opacity: .55; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .78rem; color: var(--soft); }
.cm { margin-right: 4px; padding: 1px 7px; border-radius: 6px; background: #eef0f5; font-style: normal; font-weight: 700; }
.q { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--azul2); color: #fff; font-weight: 600; font-size: .92rem; line-height: 1.35; }
.q small { display: block; margin-bottom: 3px; font-size: .68rem; color: var(--oro); letter-spacing: .06em; text-transform: uppercase; }
.q.muted { background: #f5f6fb; color: var(--soft); }
.ops { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ops li { position: relative; display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 26px 6px 8px; border-radius: 10px; border: 2px solid #e3e7ef; font-size: .8rem; line-height: 1.2; }
.ops .l { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #eef0f5; font-weight: 800; font-size: .72rem; color: #b38500; }
.ops li.ok { border-color: var(--ok); background: var(--ok-soft); }
.ops .ck { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); color: var(--ok); font-weight: 900; }
.ops li.sel { box-shadow: 0 0 0 3px #ffb703; }
.ops li.sel.mal { border-color: var(--bad); background: var(--bad-soft); box-shadow: 0 0 0 3px rgba(229, 72, 77, .35); }
.ops li.oculta { opacity: .35; text-decoration: line-through; }
.jug footer { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; color: var(--soft); }
.nota { max-width: 1400px; margin: 18px auto 0; font-size: .78rem; color: var(--soft); }

/* Detalle */
.detalle { width: min(900px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .5); }
.detalle::backdrop { background: rgba(10, 16, 40, .55); }
.detalle[open] { display: flex; flex-direction: column; }
.det-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--azul); color: #fff; }
.det-head h2 { font: 800 1.4rem "Baloo 2", sans-serif; }
.x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; font-size: 1rem; cursor: pointer; }
.det-body { padding: 16px 20px 22px; overflow: auto; }
.det-body h3 { margin: 16px 0 8px; font: 800 1.05rem "Baloo 2", sans-serif; }
.det-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.det-cards div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: #f5f6fb; }
.det-cards span { font-size: .72rem; color: var(--soft); }
.det-cards b { font: 800 1.35rem "Baloo 2", sans-serif; }
.det-cards small { font-size: .7rem; color: var(--soft); }
.det-body table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.det-body th, .det-body td { padding: 8px; border-bottom: 1px solid #eceef3; text-align: left; vertical-align: top; }
.det-body th { font-size: .7rem; text-transform: uppercase; color: var(--soft); }
.det-body td small { display: block; color: var(--soft); }
.det-body tr.ok td:nth-child(3) { color: #1d7a3d; }
.det-body tr.mal td:nth-child(3) { color: #b42323; }
@media (max-width: 640px) { .det-cards { grid-template-columns: 1fr 1fr; } .ops { grid-template-columns: 1fr; } }

/* Ranking y competencias en la consola */
.consola-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; max-width: 1400px; margin: 0 auto; align-items: start; }
.consola-cuerpo .grid { margin: 0; }
.ranking { position: sticky; top: 14px; padding: 14px; border-radius: 18px; background: var(--azul); color: #fff; }
.ranking h2 { margin: 0 0 8px; font: 800 1.2rem "Baloo 2", sans-serif; color: var(--oro); }
.ranking ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ranking li { display: grid; grid-template-columns: 28px 1fr auto; gap: 2px 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.ranking .pos { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .15); font-weight: 800; }
.ranking li:nth-child(1) .pos { background: #ffd23f; color: #1c1300; }
.ranking li:nth-child(2) .pos { background: #d7dde8; color: #1c2433; }
.ranking li:nth-child(3) .pos { background: #e0a46a; color: #1c1300; }
.ranking .pts { font-weight: 800; color: var(--oro); }
.ranking small { grid-column: 2 / -1; font-size: .7rem; opacity: .8; }
.ranking .muted { color: #cfd4ff; }
.cbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cbar span { padding: 3px 6px; border-radius: 8px; background: color-mix(in srgb, var(--cc) 12%, #fff); border-left: 3px solid var(--cc); font-size: .7rem; }
.cbar b { display: block; font-size: .64rem; color: color-mix(in srgb, var(--cc) 75%, #1c2433); }
.dcomp { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--cc) 10%, #fff); border-left: 4px solid var(--cc); }
.dcomp span { font: 700 .85rem "Montserrat", sans-serif; color: var(--soft); }
@media (max-width: 1000px) { .consola-cuerpo { grid-template-columns: 1fr; } .ranking { position: static; } }