:root{--bg:#f3f6f9;--card:#fff;--ink:#14263a;--mut:#62788d;--line:#e1e8ef;--pri:#1f6f8b;--pri2:#155a72;--ok:#1d7a46;--bad:#b3261e;--warn:#fff4d6;--r:12px}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.45}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 16px;background:#0f2a3d;color:#fff}
.brand{font-weight:700}
.top nav{display:flex;flex-wrap:wrap;gap:4px}
.top nav a{color:#cfe6f5;text-decoration:none;padding:6px 10px;border-radius:8px;font-size:14px}
.top nav a.on,.top nav a:hover{background:#1d4560;color:#fff}
main{max-width:1100px;margin:16px auto;padding:0 12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.card.narrow{max-width:440px;margin:8vh auto}
.card.sticky{position:sticky;top:0;z-index:5;padding:10px 16px}
h1{font-size:22px;margin:0 0 10px}h2{font-size:18px;margin:0 0 10px}h3{font-size:16px;margin:0 0 8px}
.muted{color:var(--mut)}.small{font-size:13px}
.ok{color:var(--ok)}.bad{color:var(--bad)}
label{display:block;margin:8px 0}
input,select,textarea{font:inherit;padding:9px 10px;border:1px solid #c9d6e2;border-radius:8px;background:#fff;color:var(--ink);max-width:100%}
label>input:not([type=checkbox]):not([type=radio]),label>textarea,label>select,textarea{display:block;width:100%;margin-top:4px}
.row label>input,.row label>select{display:inline-block;width:auto}
textarea.mono{font-family:ui-monospace,Menlo,monospace;font-size:13px}
.btn{display:inline-block;padding:9px 14px;border-radius:8px;border:1px solid var(--pri);background:var(--pri);color:#fff;font:inherit;font-size:15px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--pri2)}
.btn.ghost{background:#fff;color:var(--pri)}
.btn.danger{background:var(--bad);border-color:var(--bad)}
.btn.sm{padding:5px 9px;font-size:13px}
.btn.block{display:block;width:100%;margin-top:10px}
.btn:disabled{opacity:.5}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
form.inline{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;margin:0}
.flash{background:#e7f3ff;border:1px solid #b9dcff;padding:10px 12px;border-radius:8px;margin-bottom:12px}
.flash.err{background:#fdeceb;border-color:#f3b8b4}
.stats{display:flex;flex-wrap:wrap;gap:10px}
.stats div{background:#f3f8fb;border-radius:10px;padding:10px 14px;min-width:110px}
.stats b{display:block;font-size:24px}.stats span{font-size:13px;color:var(--mut)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}
th{font-size:12px;text-transform:uppercase;color:var(--mut);letter-spacing:.02em}
td.actions{white-space:nowrap}
tr.warn td{background:var(--warn)}
code{background:#eef3f7;padding:1px 5px;border-radius:5px}
.tag{background:#fff0c2;color:#7a5600;font-size:11px;padding:2px 6px;border-radius:6px;font-weight:700}
.live{background:#e9f8ef;border:1px solid #bfe6cd;padding:10px;border-radius:8px;margin-bottom:10px}
.grp{border-top:1px solid var(--line);padding:12px 0}
.answer{background:#f7fafc;border:1px solid var(--line);border-radius:8px;padding:10px;white-space:normal}
.box{border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:12px;background:#fbfdfe}
.etapa.actual{border-color:var(--pri);box-shadow:0 0 0 2px #d6ebf3}
.opt{display:flex;gap:8px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:8px;margin:6px 0;background:#fff;cursor:pointer}
.opt input{margin-top:4px}
.code-input{font-family:ui-monospace,Menlo,monospace;font-size:28px;letter-spacing:6px;text-align:center;text-transform:uppercase;width:100%}
.code-input.sm{font-size:22px}
.caso-html table{margin:8px 0}.caso-html td,.caso-html th{font-size:14px}
.pauta{background:#fff8e6;border:1px solid #f1dfa8;border-radius:8px;padding:10px;margin-top:8px}
ol .ok{font-weight:700}
.check{list-style:none;padding:0}.check li{margin:6px 0}
[data-countdown].hot,.hot{color:var(--bad);font-weight:700}
.err-msg{color:var(--bad)}
.wrap{flex-wrap:wrap}

/* Proyector: todo en "em" para que el autoajuste escale el conjunto */
body.proyector{background:#08151f;color:#eaf4fb;height:100vh;margin:0;overflow:hidden;display:flex;flex-direction:column}
.pj-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 18px;color:#8fb3cc;font-size:16px;flex:0 0 auto}
.pj-top button{background:none;border:1px solid #2b4b63;color:#8fb3cc;border-radius:8px;padding:4px 10px;cursor:pointer;font:inherit}
#clase{flex:1 1 auto;width:100%;border:0;background:#fff}
#stage{flex:1 1 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px 20px;min-height:0}
#stage[hidden]{display:none}
#stage .fit{width:100%;max-width:100%;text-align:center;line-height:1.25}
.pj-sub{font-size:1em;color:#8fb3cc;margin:.2em 0}
.pj-code{font-size:1.6em;margin:.2em 0}.pj-code b{font-family:ui-monospace,Menlo,monospace;letter-spacing:.25em;color:#ffd166;font-size:1.6em}
.pj-timer{font-family:ui-monospace,Menlo,monospace;font-size:1.3em;margin-left:.6em}
.pj-caso .pj-timer{display:block;font-size:2.4em;margin:.1em 0}
.pj-timer.hot{color:#ff6b6b}
.pj-q{font-size:1.25em;margin:.5em 0}.pj-q.small{font-size:.9em;color:#b9d2e3}
.pj-ops{list-style:none;padding:0;margin:.4em 0;display:grid;grid-template-columns:1fr 1fr;gap:.4em;text-align:left;font-size:1em}
.pj-ops li{background:#11283a;border-radius:.4em;padding:.4em .7em}.pj-ops b{color:#ffd166;margin-right:.4em}
.pj-name{font-size:3em;font-weight:800;margin:.2em 0}
.pj-name.url{font-size:1.5em;word-break:break-all}
.pj-ok{font-size:2em;font-weight:800;color:#5ee08f;margin:.1em 0 .3em}
.pj-big{font-size:1.6em;font-weight:800;margin:.4em 0 .1em}
.pj-foot{font-size:.9em;color:#8fb3cc}
.pj-bars{text-align:left;font-size:.95em;margin:.3em 0}
.bar{position:relative;background:#11283a;border-radius:.4em;margin:.3em 0;padding:.45em 6em .45em .7em;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;background:#24506e;z-index:0}
.bar.ok i{background:#1f7a4a}
.bar span{position:relative;z-index:1}.bar b{color:#ffd166;margin-right:.3em}
.bar em{position:absolute;right:.7em;top:50%;transform:translateY(-50%);font-style:normal;font-weight:700;z-index:1}
.bar small{font-weight:400;color:#b9d2e3}
fieldset.qq{border:0;padding:0;margin:0 0 14px}
@media (max-width:640px){h1{font-size:20px}}
.caso-html th{text-transform:none;font-size:14px;color:var(--ink);letter-spacing:0}
.proyector .bar.ok{color:#eaf4fb}.proyector .bar.ok em{color:#eaf4fb}

.altrow{display:flex;gap:8px;align-items:center;margin:6px 0}
.altrow>input{flex:1}
.ck{display:inline-flex;margin:0;cursor:pointer}
.ck input{position:absolute;opacity:0}
.ck span{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:2px solid #c9d6e2;border-radius:8px;color:transparent;font-weight:700;font-size:20px}
.ck input:checked+span{background:var(--ok);border-color:var(--ok);color:#fff}
.ck input:focus-visible+span{outline:2px solid var(--pri)}