/* ═══════════════════════════════════════════════════════════════════════════
   RoboRAVE International — Sistema de diseño «Pista oficial»
   ───────────────────────────────────────────────────────────────────────────
   Cada reto ocurre sobre una superficie marcada con cinta: el anillo del dojo,
   la línea negra de Line Following, los muros del laberinto, las líneas de la
   cancha. La interfaz usa ese vocabulario: estructura con líneas nítidas en vez
   de sombras, pictogramas de arena por reto y numerales de marcador.

   Dos ambientes, un sistema (atributo data-theme en <html>):
     · arena — oscuro: público, proyector, ceremonia, inicio.
     · mesa  — claro: consola del juez y panel del Director (acta oficial,
               legible bajo la luz de un gimnasio). Se puede cambiar.

   Orden: 1 fuentes · 2 tokens · 3 base · 4 iconos · 5 controles · 6 superficies
   · 7 encabezado y navegación · 8 inicio · 9 público · 10 llaves · 11 proyector
   y ceremonia · 12 juez · 13 Director · 14 avisos · 15 utilidades.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fuentes (OFL; ver assets/fonts/CREDITS.txt) ─────────────────────────
   RR Display = Hubot Sans (ancho 75–125, peso 500–900): títulos y numerales.
   RR Text    = Mona Sans (peso 400–800): interfaz y lectura.
   Cada archivo se descarga solo si la página usa caracteres de su rango. */
@font-face { font-family:"RR Display"; font-style:normal; font-display:swap; font-weight:500 900; font-stretch:75% 125%;
  src:url(../assets/fonts/hubot-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"RR Display"; font-style:normal; font-display:swap; font-weight:500 900; font-stretch:75% 125%;
  src:url(../assets/fonts/hubot-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"RR Text"; font-style:normal; font-display:swap; font-weight:400 800;
  src:url(../assets/fonts/mona-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"RR Text"; font-style:normal; font-display:swap; font-weight:400 800;
  src:url(../assets/fonts/mona-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* RR Num = cifras de Mona Sans (ancho 75–125): los marcadores y relojes usan
   ceros sin barra («0 – 1», no «Ø – 1»); las letras siguen en RR Display. */
@font-face { font-family:"RR Num"; font-style:normal; font-display:swap; font-weight:500 900; font-stretch:75% 125%;
  src:url(../assets/fonts/num.woff2) format("woff2");
  unicode-range:U+0023,U+0025,U+0028-0029,U+002B-003A,U+00B7,U+00D7,U+2013,U+2212; }
/* "RR Flags" (banderas Twemoji) lo declara index.html SOLO en sistemas sin
   banderas nativas (Windows): en el proyector de sede ya no salen "JP", "MX". */

/* ── 2. Tokens ──────────────────────────────────────────────────────────── */
:root {
  --font-text: "RR Flags", "RR Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo",
               "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Cifras en tablas y contadores: las de RR Num (cero SIN barra) y el resto del
     texto como siempre. Con la fuente de texto sola, las cifras tabulares salían
     con el cero cruzado («1Ø/1Ø»). */
  --font-num: "RR Flags", "RR Num", "RR Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo",
               "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Códigos (de juez, de partido): Hubot con su cero cruzado distingue 0 de O */
  --font-code: "RR Display", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-display: "RR Flags", "RR Num", "RR Display", "RR Text", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP",
               system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica (razón ≈1.2) */
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px;
  --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 38px; --fs-4xl: 48px;

  /* Radios con jerarquía: control 6 · panel 10 · escena 14 · ficha redonda */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --gutter: clamp(14px, 3vw, 28px);
  --shell: 1180px;

  /* Medallas (iguales en ambos ambientes) */
  --gold: #E2B23A; --silver: #BFC5CC; --bronze: #C47A44;
  --gold-rgb: 226,178,58; --silver-rgb: 191,197,204; --bronze-rgb: 196,122,68;
  /* Cinta de peligro: SOLO para «requiere atención» */
  --hazard: #F2C230;

  /* Movimiento (motion.css usa las mismas curvas) */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 380ms;
}

/* ARENA — oscuro, grafito cálido del logotipo (no azul marino) */
:root, [data-theme="arena"] {
  color-scheme: dark;
  --bg: #121113;        --bg-rgb: 18,17,19;
  --panel: #1B1A1D;     --panel2: #232125;    --raise: #2B292E;
  --line: #2F2D32;      --line2: #45424A;
  --txt: #F4F2EE;       --mut: #A9A4AA;       --dim: #948F96;
  --fg: var(--txt);
  --ink-rgb: 255,255,255;
  --tape: #F4F2EE;
  --red: #F2545D;       --red-rgb: 242,84,93;   --red-strong: #C8323C; --red-hover: #B42A33; --red-dk: #9E2129;
  --live: #FF4D57;      --live-fill: #D62F39;
  --blue: #5B9BFF;      --blue-rgb: 91,155,255; --blue-strong: #2A66D9;
  --cyan: var(--blue);  --cyan-rgb: var(--blue-rgb);
  --green: #3DD68C;     --green-rgb: 61,214,140; --green-strong: #187A4D;
  --amber: #F2C230;     --amber-rgb: 242,194,48; --amber-ink: #1B1500;
  --corner-a: var(--red); --corner-b: var(--blue);
  --violet: #A78BFA;    --violet-rgb: 167,139,250;
  /* Tinta de acento (-tx): el color para TEXTO e iconos de acento. Los tonos de
     arriba son para bordes, rellenos y cifras grandes; como texto pequeño sobre
     una ficha o un aviso teñido no alcanzaban el contraste 4.5:1 (WCAG AA). */
  --red-tx: #FF858C;    --blue-tx: #7FB2FF;   --green-tx: var(--green);
  --amber-tx: var(--amber); --violet-tx: #BEA9FC;
  --focus: #FFD54A;
  --focus-ink: #17161A;
  --tip-bg: #F4F2EE;    --tip-txt: #17161A;   --tip-dim: #55515A;   --tip-line: rgba(23,22,26,.16);
  --logo-robo: #F4F2EE; --logo-rave: #F2545D;
  --overlay: rgba(6,5,7,.72);
  --shadow-pop: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}

/* MESA OFICIAL — claro, papel frío (no crema) */
[data-theme="mesa"] {
  color-scheme: light;
  --bg: #F1F2F4;        --bg-rgb: 241,242,244;
  --panel: #FFFFFF;     --panel2: #F6F7F8;    --raise: #ECEEF1;
  --line: #E0E2E6;      --line2: #C5C9D0;
  --txt: #17161A;       --mut: #4F545C;       --dim: #60656E;
  --ink-rgb: 23,22,26;
  --tape: #17161A;
  --red: #C1343D;       --red-rgb: 193,52,61;   --red-strong: #C1343D; --red-hover: #A82A32; --red-dk: #8E222A;
  --live: #B5222B;      --live-fill: #D62F39;
  --blue: #2563EB;      --blue-rgb: 37,99,235;  --blue-strong: #2563EB;
  --green: #13804B;     --green-rgb: 19,128,75; --green-strong: #187A4D;
  --amber: #8A5C00;     --amber-rgb: 176,122,0; --amber-ink: #1B1500;
  --violet: #6D28D9;    --violet-rgb: 109,40,217;
  --red-tx: #9E2129;    --blue-tx: #1A44BF;   --green-tx: #0B5C34;
  --amber-tx: #6F4A00;  --violet-tx: #5B21B6;
  --focus: #2563EB;
  --focus-ink: #FFFFFF;
  --tip-bg: #1B1A1D;    --tip-txt: #F4F2EE;   --tip-dim: #B9B4BA;   --tip-line: rgba(255,255,255,.18);
  --logo-robo: #373536; --logo-rave: #C1343D;
  --overlay: rgba(23,22,26,.45);
  --shadow-pop: 0 18px 50px rgba(23,22,26,.18), 0 0 0 1px rgba(23,22,26,.08);
}

/* ── 3. Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg) }
html, body { min-height: 100% }
body {
  background: var(--bg); color: var(--txt);
  font-family: var(--font-text); font-size: var(--fs-base); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer }
input, select, textarea { font: inherit; color: var(--txt) }
a { color: var(--blue-tx) }
img, svg { max-width: 100% }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700 }
h1, h2 { font-family: var(--font-display); font-stretch: 108%; letter-spacing: -.005em }
hr { border: none; border-top: 1px solid var(--line) }
::selection { background: rgba(var(--red-rgb), .35) }
:focus { outline: none }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs) }
.tnum { font-family: var(--font-num); font-variant-numeric: tabular-nums }
.num { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0 }
.hidden { display: none !important }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.flag { font-family: var(--font-text); font-style: normal; line-height: 1 }
.fg { font-family: var(--font-text); font-style: normal; font-weight: 400 }
/* En claro, un filo fino separa del fondo las banderas con blanco (Japón, Corea…) */
[data-theme="mesa"] .fg, [data-theme="mesa"] .flag { text-shadow: 0 0 1px rgba(23, 22, 26, .55) }
[data-theme="mesa"] .flag .fg { text-shadow: none }
#app { min-height: 100vh; min-height: 100dvh }

/* ── 4. Iconos y pictogramas (sprite de js/icons.js) ───────────────────── */
.ic, .picto {
  width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.picto { --picto-accent: var(--red) }
.picto-lg { width: 44px; height: 44px; stroke-width: 1.7 }
.picto-xl { width: 96px; height: 96px; stroke-width: 1.4 }
.rr-logo { display: block; height: 32px; width: auto; flex: none }

/* ── 5. Controles ───────────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: 14px; font-weight: 650; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast), color var(--dur-fast), transform 90ms;
  touch-action: manipulation;
}
.btn .ic { width: 18px; height: 18px }
.btn:active:not([disabled]) { transform: translateY(1px) }
.btn-red { background: var(--red-strong); color: #fff }
.btn-red:hover:not([disabled]) { background: var(--red-hover) }
.btn-cyan, .btn-blue { background: var(--blue-strong); color: #fff }
.btn-cyan:hover:not([disabled]), .btn-blue:hover:not([disabled]) { filter: brightness(1.08) }
.btn-amber { background: var(--hazard); color: var(--amber-ink) }
.btn-amber:hover:not([disabled]) { filter: brightness(1.06) }
.btn-green { background: var(--green-strong); color: #fff }
.btn-green:hover:not([disabled]) { filter: brightness(1.1) }
.btn-ghost { background: transparent; border-color: var(--line2); color: var(--txt) }
.btn-ghost:hover:not([disabled]) { background: rgba(var(--ink-rgb), .06); border-color: rgba(var(--ink-rgb), .3) }
.btn-quiet { background: transparent; color: var(--mut); padding-inline: 10px }
.btn-quiet:hover:not([disabled]) { color: var(--txt); background: rgba(var(--ink-rgb), .06) }
.btn-block { display: flex; width: 100%; min-height: 50px; font-size: 15.5px }
.btn-sm { min-height: 32px; padding: 6px 11px; font-size: 13px }
.btn-lg { min-height: 56px; padding: 14px 24px; font-size: 17px }
.btn[disabled] { opacity: .45; cursor: not-allowed }
.btn { max-width: 100% }
/* En el teléfono un botón con texto largo se parte en dos renglones en vez de desbordar la pantalla. */
@media (max-width: 600px) { .btn { white-space: normal; text-align: center } }
.btn.is-busy { cursor: progress }

.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm);
  color: var(--mut); border: 1px solid transparent; flex: none;
}
.icon-btn:hover { color: var(--txt); background: rgba(var(--ink-rgb), .07) }
.icon-btn .ic { width: 20px; height: 20px }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px }
.field label { font-size: 13px; font-weight: 600; color: var(--mut) }
.field input, .field select, .field textarea, .input {
  width: 100%; min-height: 44px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 15px; color: var(--txt);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
[data-theme="arena"] .field input, [data-theme="arena"] .field select, [data-theme="arena"] .field textarea, [data-theme="arena"] .input { background: var(--bg) }
input:focus, select:focus, textarea:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(var(--blue-rgb), .25); outline: none }
input::placeholder, textarea::placeholder { color: var(--dim); opacity: 1 }
select { cursor: pointer }
input[type="date"], input[type="time"], input[type="datetime-local"] { cursor: pointer }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }

/* Interruptor grande (juez) */
.toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 48px;
  padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line2);
  background: var(--panel); margin-bottom: 8px; font-weight: 600;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.toggle:hover { border-color: rgba(var(--ink-rgb), .35) }
.toggle.on { border-color: var(--green); background: rgba(var(--green-rgb), .1) }
.tg { width: 40px; height: 24px; border-radius: 99px; background: var(--line2); position: relative; flex: none; transition: background-color var(--dur-fast) }
.toggle.on .tg { background: var(--green-strong) }
.tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--dur-fast) var(--ease-standard); box-shadow: 0 1px 2px rgba(0,0,0,.3) }
.toggle.on .tg::after { transform: translateX(16px) }

.stepper {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px 8px 14px; border-radius: var(--r-md); border: 1px solid var(--line2); background: var(--panel); margin-bottom: 8px;
}
.stepper .ctr { display: flex; align-items: center; gap: 6px }
.stepper .ctr > button {
  width: 44px; height: 44px; border-radius: var(--r-sm); background: rgba(var(--ink-rgb), .07);
  font-weight: 800; font-size: 20px; line-height: 1; border: 1px solid var(--line2); touch-action: manipulation;
}
.stepper .ctr > button:hover { background: rgba(var(--ink-rgb), .12) }
.stepper .ctr > button:active { transform: scale(.95) }
.stepper .v { min-width: 34px; text-align: center; font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums }

/* Conmutador del Director */
.tog { position: relative; width: 44px; height: 26px; flex: none }
.tog input { opacity: 0; width: 0; height: 0; position: absolute }
.tog .tog-s { position: absolute; cursor: pointer; inset: 0; background: var(--line2); border-radius: 26px; transition: background-color var(--dur-fast) }
.tog .tog-s::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform var(--dur-fast) var(--ease-standard); box-shadow: 0 1px 2px rgba(0,0,0,.3) }
.tog input:checked + .tog-s { background: var(--green-strong) }
.tog input:checked + .tog-s::before { transform: translateX(18px) }
.tog input:focus-visible + .tog-s { outline: 3px solid var(--focus); outline-offset: 2px }

/* ── 6. Superficies ─────────────────────────────────────────────────────── */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg) }
.soft { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md) }
[data-theme="arena"] .soft { background: var(--panel) }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px }
.sec-h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-bottom: 10px }
.sec-h .ic { color: var(--dim) }

/* Fichas */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 650; line-height: 1.4; background: rgba(var(--ink-rgb), .07); color: var(--mut); white-space: nowrap;
}
.chip .ic { width: 13px; height: 13px }
.chip-cyan, .chip-blue { background: rgba(var(--blue-rgb), .14); color: var(--blue-tx) }
.chip-red { background: rgba(var(--red-rgb), .14); color: var(--red-tx) }
.chip-green { background: rgba(var(--green-rgb), .14); color: var(--green-tx) }
.chip-amber { background: rgba(var(--amber-rgb), .16); color: var(--amber-tx) }
.chip-gold { background: rgba(var(--gold-rgb), .16); color: var(--gold) }
.chip-violet { background: rgba(var(--violet-rgb), .14); color: var(--violet-tx) }
[data-theme="mesa"] .chip-gold { color: #7A5A00 }

/* EN VIVO: el único rojo que late */
.live-pill {
  display: inline-flex; align-items: center; gap: 6px; background: var(--live-fill); color: #fff;
  font-size: 12px; font-weight: 750; padding: 3px 9px 3px 8px; border-radius: var(--r-xs); line-height: 1.3; white-space: nowrap;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; animation: rrLivePulse 1.6s ease-in-out infinite }
.live-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--live); font-weight: 750; font-size: 13px }
.live-mark .live-dot { background: var(--live) }
@keyframes rrLivePulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.status-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 2px 9px; border-radius: var(--r-xs); border: 1px solid; line-height: 1.4; white-space: nowrap;
}
.status-pill.published { color: var(--green-tx); border-color: rgba(var(--green-rgb), .5); background: rgba(var(--green-rgb), .1) }
.status-pill.finished { color: var(--mut); border-color: var(--line2); background: rgba(var(--ink-rgb), .04) }
.status-pill.draft { color: var(--dim); border-color: var(--line2); border-style: dashed }

/* Cinta de peligro: avisos que requieren acción */
.hazard-strip { height: 6px; background: repeating-linear-gradient(-45deg, var(--hazard) 0 9px, #17161A 9px 18px); border-radius: 2px }
.notice {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line2); background: var(--panel); font-size: 14px;
}
.notice > .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--dim) }
.notice.warn { border-color: rgba(var(--amber-rgb), .55); background: rgba(var(--amber-rgb), .09) }
.notice.warn > .ic { color: var(--amber-tx) }
.notice.err { border-color: rgba(var(--red-rgb), .5); background: rgba(var(--red-rgb), .08) }
.notice.err > .ic { color: var(--red-tx) }
.notice.ok { border-color: rgba(var(--green-rgb), .5); background: rgba(var(--green-rgb), .08) }
.notice.ok > .ic { color: var(--green-tx) }
.notice b { font-weight: 700 }
.banner-info { background: rgba(var(--amber-rgb), .12); color: var(--amber-tx); font-size: 13px; padding: 7px 16px; text-align: center; border-bottom: 1px solid rgba(var(--amber-rgb), .35) }

/* Estado vacío: pictograma del reto, sin animación continua */
.empty-state { padding: 48px 16px; text-align: center; color: var(--mut); max-width: 460px; margin: 0 auto }
.empty-state .picto, .empty-state > .ic { width: 64px; height: 64px; stroke-width: 1.3; color: var(--dim); margin-bottom: 14px; --picto-accent: var(--dim) }
.empty-state h3 { font-size: 17px; font-weight: 650; color: var(--txt); margin-bottom: 6px; font-family: var(--font-text) }
.empty-state p { font-size: 14px; color: var(--mut) }

/* ── 7. Encabezado y navegación ─────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  padding: 10px var(--gutter); min-height: 60px;
  background: rgba(var(--bg-rgb), .9); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.topbar .rr-logo { height: 30px }
.topbar img.logo { height: 30px; width: auto; flex: none }
.topbar .tb-id { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; justify-content: center }
.topbar h2 {
  font-family: var(--font-display); font-stretch: 100%; font-size: 16px; font-weight: 750; letter-spacing: 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.25;
}
.topbar h2 .ev-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
@media (max-width: 760px) { .topbar h2 .ev-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } }
.topbar .sub { font-size: 12.5px; color: var(--mut); display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.topbar .sub .ic { width: 14px; height: 14px }
#sp-viewer-count { display: inline-flex; align-items: center; gap: 5px; margin-right: 6px }
#sp-viewer-count[hidden] { display: none }
.tb-tools { display: flex; align-items: center; gap: 4px; flex: none }
.tb-sep { width: 1px; height: 26px; background: var(--line); margin: 0 4px }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: var(--r-sm); color: var(--mut); font-size: 13px; font-weight: 700 }
.lang-btn:hover { color: var(--txt); background: rgba(var(--ink-rgb), .07) }
.lang-btn .ic { width: 18px; height: 18px }

/* Menú desplegable (idioma) */
.rr-menu {
  position: fixed; z-index: 400; min-width: 180px; padding: 6px; border-radius: var(--r-md);
  background: var(--panel); border: 1px solid var(--line2); box-shadow: var(--shadow-pop);
}
.rr-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; text-align: left }
.rr-menu button:hover { background: rgba(var(--ink-rgb), .07) }
.rr-menu button[aria-checked="true"] { font-weight: 700 }
.rr-menu button[aria-checked="true"]::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--red) }
.rr-menu .menu-sep { height: 1px; background: var(--line); margin: 6px 4px }

/* Pestañas: subrayado de cinta */
.mode-tabs { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: 100%; -webkit-overflow-scrolling: touch }
/* Las pestañas van en su propia fila, pegadas al borde inferior del encabezado:
   la marca de la pestaña activa es la «cinta» sobre esa línea. */
.topbar .mode-tabs { order: 5; flex: 1 0 100%; margin: 2px calc(var(--gutter) * -1 + 8px) -10px; padding: 0 calc(var(--gutter) - 8px) }
.topbar .tb-tools { margin-left: auto }
.mode-tabs::-webkit-scrollbar { display: none }
.mode-tabs button {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px;
  font-size: 14px; font-weight: 600; color: var(--mut); white-space: nowrap; flex: none; border-radius: var(--r-sm);
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.mode-tabs button .ic { width: 17px; height: 17px }
.mode-tabs button:hover { color: var(--txt); background: rgba(var(--ink-rgb), .05) }
.mode-tabs button.on { color: var(--txt) }
.mode-tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--red) }
.topbar .mode-tabs button { padding: 10px 12px 12px; border-radius: var(--r-sm) var(--r-sm) 0 0 }
.mode-tabs .tab-short { display: none }

@media (max-width: 760px) {
  .topbar { padding: 8px 12px; gap: 4px 8px; min-height: 0 }
  .topbar .rr-logo { height: 24px }
  .topbar .tb-tools { order: 2; margin-left: auto }
  .topbar .tb-id { order: 3; flex-basis: 100% }
  .topbar .mode-tabs { margin: 0 -12px -8px; padding: 0 4px }
  .topbar h2 { font-size: 15px }
  .topbar .sub { font-size: 12px }
  .tb-tools .btn-quiet span, .tb-sep { display: none }
  .tb-tools .lang-btn { padding: 0 8px }
}
/* Fila de retos con pictogramas */
.rail {
  display: flex; gap: 8px; padding: 12px var(--gutter); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none }
.rail button {
  display: inline-flex; align-items: center; gap: 8px; flex: none; scroll-snap-align: start;
  padding: 7px 15px 7px 10px; border-radius: var(--r-pill); border: 1px solid var(--line2);
  color: var(--mut); font-size: 14px; font-weight: 650; white-space: nowrap; min-height: 42px;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.rail button .picto { width: 24px; height: 24px; stroke-width: 1.8; --picto-accent: currentColor }
.rail button:hover { color: var(--txt); border-color: rgba(var(--ink-rgb), .4) }
.rail button.on { background: var(--tape); border-color: var(--tape); color: var(--bg) }
.rail button.on .picto { --picto-accent: var(--red-strong) }

/* Categoría y división */
.divrow { display: flex; align-items: center; gap: 6px; padding: 10px var(--gutter) 4px; flex-wrap: wrap }
.divrow .lbl { font-size: 13px; color: var(--dim); font-weight: 600; margin-right: 4px }
.divrow .div-sep { width: 1px; height: 22px; background: var(--line2); margin: 0 8px }
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line2); color: var(--mut); font-size: 13.5px; font-weight: 650; background: transparent;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.pill:hover { color: var(--txt); border-color: rgba(var(--ink-rgb), .45) }
.pill.on { background: rgba(var(--red-rgb), .14); border-color: var(--red); color: var(--txt) }
.pill.lock { opacity: .45; cursor: not-allowed }
.pill .pill-full { display: none; font-weight: 500; color: var(--dim) }
.pill.on .pill-full { color: var(--mut) }
@media (min-width: 900px) { .pill .pill-full { display: inline } }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter) }
.adm-shell { padding-top: 22px; padding-bottom: 28px; min-height: 60vh }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 0 }
@media (min-width: 880px) { .grid2 { grid-template-columns: 2fr 1fr } }
footer { padding: 26px var(--gutter) 30px; text-align: center; font-size: 12.5px; color: var(--dim) }
footer a { color: var(--mut) }

/* Encabezado de sección dentro de una vista (reto, ámbito, unidad) */
.view-head { display: flex; align-items: center; gap: 14px; margin: 20px 0 14px }
.view-head .picto { width: 44px; height: 44px; stroke-width: 1.6; color: var(--txt) }
.view-head .vh-txt { flex: 1; min-width: 0 }
.view-head h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; font-stretch: 112%; line-height: 1.1 }
.view-head .vh-sub { font-size: 14px; color: var(--mut); margin-top: 3px }
.view-head .vh-aside { font-size: 13px; color: var(--dim); text-align: right; max-width: 46% }
@media (max-width: 560px) {
  .view-head { flex-wrap: wrap; row-gap: 6px }
  .view-head .vh-aside { flex-basis: 100%; max-width: none; text-align: left }
}
/* Japonés: títulos, pestañas y botones cortan entre palabras, no a media palabra */
html[lang="ja"] :is(h1, h2, h3, button, .chip, .pill, th, label) { word-break: keep-all; overflow-wrap: anywhere; line-break: strict }

/* ── 8. Inicio ──────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; position: relative; overflow: hidden; isolation: isolate }
.login-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px var(--gutter) }
.login-top .rr-logo { height: 34px }
.login-langs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line2); border-radius: var(--r-pill) }
.login-langs button { padding: 6px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; color: var(--mut); min-height: 32px }
.login-langs button.on { background: var(--tape); color: var(--bg) }
.login-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 440px); gap: clamp(28px, 6vw, 90px); align-items: center; padding: 10px var(--gutter) 40px; max-width: 1240px; width: 100%; margin: 0 auto }
.login-hero h1 { font-size: clamp(40px, 5.6vw, 78px); font-weight: 850; font-stretch: 118%; line-height: .98; letter-spacing: -.01em; margin-bottom: 20px }
.login-hero h1 .l2 { display: block; color: var(--mut); font-weight: 700; font-stretch: 100%; font-size: .56em; line-height: 1.1; margin-top: .25em }
.login-hero p { font-size: clamp(15px, 1.4vw, 18px); color: var(--mut); max-width: 46ch }
.login-event { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line2); background: rgba(var(--bg-rgb), .6); max-width: 100% }
.login-event .flag { font-size: 24px }
.login-event b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.login-event small { display: block; font-size: 12.5px; color: var(--mut) }
.login-pictos { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; color: var(--dim) }
.login-pictos .picto { width: 30px; height: 30px; stroke-width: 1.6; --picto-accent: var(--dim) }
.login-card { width: 100%; padding: 26px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line) }
.login-card .lc-title { font-size: 20px; font-weight: 750; font-family: var(--font-display); font-stretch: 108%; margin-bottom: 4px }
.login-card .lc-sub { font-size: 14px; color: var(--mut); margin-bottom: 20px }
.brand { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 18px }
.brand h1 { font-size: 22px; font-weight: 800 }
.brand p { font-size: 14px; color: var(--mut); margin-top: 4px }
.three-btns { display: flex; flex-direction: column; gap: 10px }
.role-btn {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 72px; width: 100%;
  border-radius: var(--r-md); border: 1px solid var(--line2); background: transparent; text-align: left;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.role-btn:hover { border-color: rgba(var(--ink-rgb), .45); background: rgba(var(--ink-rgb), .04) }
.role-btn .role-ico { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: rgba(var(--ink-rgb), .07); color: var(--txt) }
.role-btn .role-ico .ic { width: 22px; height: 22px }
.role-btn .role-go { margin-left: auto; color: var(--dim) }
.role-btn.spect { border-color: var(--red-strong); background: var(--red-strong); color: #fff; min-height: 84px }
.role-btn.spect:hover { background: var(--red-hover) }
.role-btn.spect .role-ico { background: rgba(255,255,255,.16); color: #fff }
.role-btn.spect .role-sub { color: #fff }
.role-btn.spect .role-go { color: rgba(255,255,255,.85) }
.role-title { font-weight: 700; font-size: 16px }
.role-sub { font-size: 13px; color: var(--mut); margin-top: 2px }
.login-staff-lbl { font-size: 13px; color: var(--dim); font-weight: 600; margin: 8px 0 2px }
.login-back { margin-top: 12px }
.login-err { color: var(--red-tx); font-size: 13.5px; margin: -4px 0 12px; display: none }
.code-input { letter-spacing: .22em; text-align: center; font-size: 22px !important; font-weight: 800; font-family: var(--font-display); font-stretch: 85%; text-transform: uppercase }
/* Anillo del dojo: la única osadía de la portada */
.login-ring { position: absolute; z-index: -1; pointer-events: none; color: var(--line); right: -24vmax; top: 52%; width: 72vmax; height: 72vmax; transform: translateY(-50%) }
.login-foot { padding: 26px var(--gutter) 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim);
  background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0), var(--bg) 55%) }
@media (max-width: 860px) {
  .login-main { grid-template-columns: 1fr; gap: 26px; padding-top: 0 }
  .login-hero h1 { font-size: clamp(34px, 10vw, 54px) }
  .login-pictos { display: none }
  .login-ring { right: -58vmax; width: 110vmax; height: 110vmax; top: 34% }
  .login-top { padding-top: 14px; padding-bottom: 10px }
  .login-top .rr-logo { height: 26px }
  .login-langs button { padding: 5px 9px; font-size: 12.5px }
}

/* ── 9. Público ─────────────────────────────────────────────────────────── */
.sp-fresh { display: inline-flex; align-items: center; gap: 4px; color: var(--dim) }
.sp-fresh button { color: var(--mut); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-xs) }
.sp-fresh button:hover { color: var(--txt); background: rgba(var(--ink-rgb), .08) }
.sp-fresh .ic { width: 15px; height: 15px }
.sp-fresh.stale { color: var(--amber-tx) }
.past-banner { margin: 12px var(--gutter) 0 }

/* Torre de clasificación (lista de posiciones) */
.podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 10px; align-items: end; margin: 6px 0 18px }
.pod {
  position: relative; border-radius: var(--r-md); text-align: center; padding: 16px 12px 14px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); overflow: hidden;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.pod::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px }
.pod-1 { padding-top: 22px; padding-bottom: 20px; background: linear-gradient(180deg, rgba(var(--gold-rgb), .16), var(--panel) 70%); border-color: rgba(var(--gold-rgb), .5) }
.pod-1::before { background: var(--gold) }
.pod-2::before { background: var(--silver) }
.pod-3::before { background: var(--bronze) }
.pod:hover { border-color: rgba(var(--ink-rgb), .45) }
.pod .medal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; margin: 0 auto 8px; font-family: var(--font-display); font-stretch: 85% }
.pod-1 .medal { width: 36px; height: 36px; background: var(--gold); color: #2B1E00 }
.pod-2 .medal { background: var(--silver); color: #1B1E22 }
.pod-3 .medal { background: var(--bronze); color: #1E1006 }
.pod .medal .ic { width: 18px; height: 18px }
.pod > span { display: block }
.pod .medal { display: grid }
.pod .flag { font-size: 20px; margin-bottom: 4px; line-height: 1.2 }
.pod { width: 100% }
.pod .tname { font-size: 14.5px; font-weight: 700; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pod-1 .tname { font-size: 16px }
.pod .tinst { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px }
.pod .score { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 34px; line-height: 1.05; margin-top: 8px; font-variant-numeric: tabular-nums }
.pod-1 .score { font-size: 44px; color: var(--gold) }
[data-theme="mesa"] .pod-1 .score { color: #8A6400 }
.pod .unit { font-size: 12px; color: var(--dim) }
.pod .pod-meta { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin-top: 8px }
.pod.flash, .pod.celebrate { border-color: var(--gold) }

.tower { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line) }
.tower > li { display: block }
.rank-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 11px 6px 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; position: relative;
  transition: background-color var(--dur-fast); width: 100%; text-align: left;
}
.rank-row:hover { background: rgba(var(--ink-rgb), .035) }
.rank-row .pos { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 22px; text-align: center; color: var(--mut); font-variant-numeric: tabular-nums }
.rank-row .info { min-width: 0 }
.rank-row .nm { font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px }
.rank-row .inst { font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rank-row .sc-wrap { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px }
.rank-row .sc { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums }
.rank-row .meta { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end }
.rank-row.is-fav { background: rgba(var(--gold-rgb), .07) }
.rank-row.is-fav::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--gold) }
.rank-row.flash { background: rgba(var(--blue-rgb), .1) }
.fav-star { color: var(--gold); display: inline-flex }
.fav-star .ic { width: 15px; height: 15px; fill: currentColor }
.lb-unit { font-size: 12.5px; color: var(--dim); margin: -6px 0 10px }
.tie-mark { color: var(--amber-tx); font-size: 12px; font-weight: 700 }

.lb-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start }
@media (min-width: 1100px) { .lb-layout { grid-template-columns: minmax(0, 1fr) 320px } }
.lb-aside { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 14px 12px; background: var(--panel); position: sticky; top: 84px }
.lb-aside h3 { font-size: 13.5px; font-weight: 700; color: var(--mut); margin: 4px 0 6px; display: flex; align-items: center; gap: 6px }
.lb-aside h3 + .mini-row { border-top: 1px solid var(--line) }
.lb-aside .btn { margin-top: 10px; width: 100% }
.mini-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px }
.mini-row .mr-when { grid-row: span 2; font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--mut) }
.mini-row .mr-who { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mini-row .mr-who .vs { color: var(--dim); font-weight: 500; margin: 0 4px }
.mini-row .mr-where { font-size: 12.5px; color: var(--dim) }
.mini-row.is-live .mr-when { color: var(--live) }
@media (max-width: 1099px) { .lb-aside { position: static } }

/* Partidos en la arena ahora */
/* auto-fit: con una o dos pistas en juego las tarjetas crecen y ocupan la fila (pantalla de sede, escritorio) */
.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px }
.live-grid > * { max-width: 640px }
.arena-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg);
  background: var(--panel); border: 2px solid var(--line2); padding: 16px 18px 18px;
}
.arena-card.is-live { border-color: rgba(var(--red-rgb), .75) }
.arena-card .ac-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mut); margin-bottom: 12px; flex-wrap: wrap }
.arena-card .ac-arena { margin-left: auto; font-family: var(--font-display); font-stretch: 90%; font-weight: 800; font-size: 15px; color: var(--txt); white-space: nowrap }
.arena-card .ac-arena small { font-family: var(--font-text); font-weight: 600; font-size: 12px; color: var(--dim); margin-right: 4px }
.arena-card .ac-bg { position: absolute; z-index: -1; right: -44px; bottom: -56px; width: 190px; height: 190px; color: rgba(var(--ink-rgb), .05); stroke-width: .9; --picto-accent: rgba(var(--ink-rgb), .05) }
.duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px }
.duel .side { min-width: 0 }
.duel .side.a { text-align: left }
.duel .side.b { text-align: right }
.duel .tn { font-weight: 700; font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
/* (.inst y no .cc: .cc es la ficha de país del Director y no parte línea) */
.duel .inst { font-size: 12px; color: var(--mut); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere }
.duel .side.a .corner { background: var(--corner-a) }
.duel .side.b .corner { background: var(--corner-b) }
.corner { display: block; width: 26px; height: 4px; border-radius: 2px; margin-bottom: 8px }
.duel .side.b .corner { margin-left: auto }
.duel .mid { text-align: center; min-width: 74px }
.duel .score { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap }
.duel .score .sep { color: var(--dim); font-weight: 600; margin: 0 4px }
.duel .vs { font-size: 13px; color: var(--dim); font-weight: 700 }
.run-solo { text-align: center; padding: 4px 0 2px }
.run-solo .tn { font-size: 19px; font-weight: 750 }
.run-solo .inst { font-size: 13px; color: var(--mut); overflow-wrap: anywhere }
.run-solo .run-state { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--amber-tx); font-weight: 700 }
.run-solo .run-val { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-size: 34px; margin-top: 6px }

/* SoccerBot en vivo */
.soccer-card { cursor: pointer }
.soccer-card .clock-wrap { text-align: center; margin: 2px 0 14px }
.soccer-card .half { font-size: 13px; color: var(--mut); font-weight: 600 }
.sp-soccer-clock { font-family: var(--font-display); font-stretch: 78%; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; font-size: 56px; letter-spacing: .01em }
.soccer-card.large .sp-soccer-clock { font-size: clamp(72px, 14vw, 120px) }
.phase-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; margin-top: 4px }
.ph-running { color: var(--green-tx) } .ph-paused { color: var(--amber-tx) } .ph-break { color: var(--blue-tx) } .ph-finished { color: var(--red-tx) } .ph-waiting { color: var(--dim) }
.soccer-card .duel .score { font-size: 48px }
.soccer-card.large .duel .score { font-size: clamp(56px, 10vw, 96px) }
.soccer-card.large .duel .tn { font-size: clamp(17px, 2.4vw, 24px) }
.soccer-card .tap-hint { text-align: center; font-size: 12.5px; color: var(--dim); margin-top: 10px }
.arena-back { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap }

/* Pistas de los retos individuales */
.track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px }
.track-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 14px 10px }
.track-card.is-live { border-color: rgba(var(--red-rgb), .7) }
.track-card .tc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px }
.track-card .tc-head h3 { font-size: 17px; font-weight: 800; font-family: var(--font-display); font-stretch: 95% }
.track-card .tc-prog { font-size: 12.5px; color: var(--dim); margin-bottom: 8px }
.track-card .tc-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-bottom: 10px }
.track-card .tc-bar i { display: block; height: 100%; background: var(--green) }
.run-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 6px; border-top: 1px solid var(--line); font-size: 14px }
.run-row .turn { font-size: 12px; color: var(--dim); font-family: var(--font-num); font-variant-numeric: tabular-nums }
.run-row .who { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.run-row.is-live { background: rgba(var(--red-rgb), .1); border-radius: var(--r-sm) }
.run-row.is-live .who { font-weight: 750 }
.run-row .val { font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-variant-numeric: tabular-nums }
.run-row .val.done { color: var(--green-tx) }
.run-row .state { font-size: 12px; color: var(--dim) }

/* Calendario */
.sched-list { display: flex; flex-direction: column; border-top: 1px solid var(--line) }
.sched-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 12px 4px; border-bottom: 1px solid var(--line) }
.sched-row .hm { font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums }
.sched-row .hm.idx { font-size: 15px; color: var(--dim) }
.sched-row .who { font-weight: 650; font-size: 15px; min-width: 0 }
.sched-row .who .vs { color: var(--dim); font-weight: 500; margin: 0 6px; font-size: 13px }
.sched-row .where { font-size: 13px; color: var(--mut); text-align: right; white-space: nowrap }
.sched-row .where .live-mark { display: flex; justify-content: flex-end }
.sched-row.is-live { background: rgba(var(--red-rgb), .07) }
.sched-row.is-fav .who::after { content: "★"; color: var(--gold); margin-left: 6px }

/* Búsqueda */
.search-box { position: relative; margin-bottom: 14px }
.search-box .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--dim); pointer-events: none }
.search-box input { width: 100%; min-height: 52px; padding: 12px 14px 12px 44px; font-size: 16px; border-radius: var(--r-md); border: 1px solid var(--line2); background: var(--panel) }
.hit-list { display: flex; flex-direction: column; border-top: 1px solid var(--line) }
.hit { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; width: 100% }
.hit:hover { background: rgba(var(--ink-rgb), .035) }
.hit .flag { font-size: 22px }
.hit .hit-main { flex: 1; min-width: 0 }
.hit .hit-main b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hit .hit-main small { display: block; font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hit .hit-ch { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mut); white-space: nowrap }
.hit .hit-ch .picto { width: 20px; height: 20px; --picto-accent: currentColor }
.my-team { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid rgba(var(--gold-rgb), .5); background: rgba(var(--gold-rgb), .07); margin: 14px 0 4px; cursor: pointer; width: 100%; text-align: left }
.my-team .ic { color: var(--gold); width: 20px; height: 20px; fill: currentColor }
.my-team b { font-size: 15px }
.my-team small { display: block; color: var(--mut); font-size: 12.5px }

/* Ficha del equipo y del campeón (ventana) */
.team-sheet .ts-head { text-align: center; margin-bottom: 16px }
.team-sheet .ts-head .flag { font-size: 34px; display: block; margin-bottom: 6px }
.team-sheet h2 { font-size: 24px; font-weight: 800; font-stretch: 108% }
.team-sheet .ts-inst { color: var(--mut); font-size: 14px; margin-top: 4px }
.team-sheet .ts-chips { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 10px }
.team-sheet .ts-rank { margin-top: 12px; display: inline-flex; align-items: baseline; gap: 6px; font-weight: 700 }
.team-sheet .ts-rank .num { font-size: 30px; color: var(--gold) }
.ts-sec { margin-bottom: 16px }
.ts-sec h4 { font-size: 13px; font-weight: 700; color: var(--dim); margin-bottom: 8px }
.member-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line) }
.member-list .m { padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 14px; display: flex; align-items: center; gap: 8px }
.member-list .m.coach { color: var(--mut) }
.member-list .m .ic { width: 16px; height: 16px; color: var(--dim) }
.round-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.round-chips span { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--mut); font-family: var(--font-num); font-variant-numeric: tabular-nums }
.round-chips span.best { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb), .1) }
.kv { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 2px; border-top: 1px solid var(--line); font-size: 14px }
.kv b { font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 20px }

.champion-card { position: relative; text-align: center; padding: 8px 4px 2px; overflow: hidden }
.champion-card .medal-big {
  width: 96px; height: 96px; border-radius: 50%; margin: 6px auto 14px; display: grid; place-items: center;
  font-family: var(--font-display); font-stretch: 80%; font-weight: 900; font-size: 46px;
}
.medal-big.gold { background: radial-gradient(circle at 32% 28%, #FFE9A6, var(--gold) 62%, #A97F18); color: #2B1E00 }
.medal-big.silver { background: radial-gradient(circle at 32% 28%, #FFFFFF, var(--silver) 62%, #8C939B); color: #1B1E22 }
.medal-big.bronze { background: radial-gradient(circle at 32% 28%, #F2C29C, var(--bronze) 62%, #85491F); color: #1E1006 }
.champion-card .place { display: inline-block; font-size: 14px; font-weight: 750; padding: 4px 14px; border-radius: var(--r-pill); margin-bottom: 10px }
.champion-1 .place { background: rgba(var(--gold-rgb), .18); color: var(--gold) }
.champion-2 .place { background: rgba(var(--silver-rgb), .2); color: var(--silver) }
.champion-3 .place { background: rgba(var(--bronze-rgb), .2); color: var(--bronze) }
[data-theme="mesa"] .champion-1 .place { color: #7A5A00 } [data-theme="mesa"] .champion-2 .place { color: #4A5059 } [data-theme="mesa"] .champion-3 .place { color: #7E4519 }
.champion-card h2 { font-size: 26px; font-weight: 850; font-stretch: 110%; margin-bottom: 4px }
.champion-card .meta { font-size: 14px; color: var(--mut); margin-bottom: 12px }
.champion-card .members { text-align: left; margin-top: 14px }
/* La tarjeta del podio lleva lo mismo que la ficha normal: desglose por rondas y «Seguir a este equipo». */
.champion-card .champ-rounds { text-align: left; margin-top: 16px }
.champion-card .champ-rounds .ts-sec { margin-bottom: 0 }
.champion-card .champ-fav { margin-top: 16px }
.champion-1 { box-shadow: inset 0 4px 0 var(--gold) } .champion-2 { box-shadow: inset 0 4px 0 var(--silver) } .champion-3 { box-shadow: inset 0 4px 0 var(--bronze) }

/* Reglas */
.rules-text { padding: 16px 18px; white-space: pre-wrap; font-size: 15px; line-height: 1.65; max-width: 75ch }
.rules-pdf { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; margin-top: 12px }
.rules-pdf iframe { width: 100%; height: 75vh; border: none; display: block }

/* Eventos pasados */
.past-list { text-align: left; display: flex; flex-direction: column; gap: 8px; margin-top: 10px }
.past-ev { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer }
.past-ev:hover { border-color: rgba(var(--ink-rgb), .4) }
.past-ev .flag { font-size: 26px }
.past-ev .pe-main { flex: 1; min-width: 0 }
.past-ev b { display: block; font-size: 15px }
.past-ev small { display: block; font-size: 12.5px; color: var(--mut) }

/* Navegación inferior en el teléfono (público) */
@media (max-width: 760px) {
  /* En el teléfono el encabezado no se queda fijo: al desplazarse, la
     clasificación o la consola del juez ocupan toda la pantalla. */
  body[data-screen="public"] .topbar, body[data-screen="judge"] .topbar { position: static }
  body[data-screen="public"] { padding-bottom: calc(70px + env(safe-area-inset-bottom)) }
  /* backdrop-filter convierte al encabezado en el contenedor de lo fijo: la
     barra inferior quedaría pegada a él. En el teléfono va con fondo sólido. */
  body[data-screen="public"] .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg) }
  body[data-screen="public"] #sp-topbar-tabs {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; order: 99; gap: 0; justify-content: space-around;
    /* margin: 0 — la barra hereda los márgenes negativos de las pestañas del encabezado (−12 px a los lados, −8 px
       abajo): quedaba corrida 12 px a la izquierda (la primera pestaña cortada, un hueco a la derecha) y 8 px
       por debajo del borde de la pantalla. */
    margin: 0; padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); overflow: visible;
    background: rgba(var(--bg-rgb), .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }
  body[data-screen="public"] #sp-topbar-tabs button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 7px 2px 6px; font-size: 11px; font-weight: 650 }
  body[data-screen="public"] #sp-topbar-tabs button .ic { width: 22px; height: 22px }
  body[data-screen="public"] #sp-topbar-tabs .tab-long { display: none }
  body[data-screen="public"] #sp-topbar-tabs .tab-short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis }
  body[data-screen="public"] #sp-topbar-tabs button.on::after { top: -5px; bottom: auto; left: 22%; right: 22%; border-radius: 0 0 3px 3px }
  .podium { gap: 6px }
  .pod { padding: 12px 6px 10px }
  .pod-1 { padding-top: 16px }
  .pod .score { font-size: 28px }
  .pod-1 .score { font-size: 36px }
  .pod .tname { font-size: 13px } .pod-1 .tname { font-size: 14px }
  .pod .tinst { display: none }
}

/* Marcador de carga con la forma de la vista (podio + filas) */
.skel { padding-top: 6px }
.skel-h, .skel-r, .skel-pod i { display: block; background: var(--panel); border-radius: var(--r-md); animation: rr-skel 1.1s ease-in-out infinite alternate }
.skel-h { height: 46px; width: min(320px, 70%); margin-bottom: 18px }
.skel-pod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; max-width: 780px }
.skel-pod i { height: 150px }
.skel-pod i:nth-child(2) { height: 172px; margin-top: -22px }
.skel-r { height: 60px; margin-bottom: 8px; max-width: 780px }
@keyframes rr-skel { from { opacity: .5 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .skel-h, .skel-r, .skel-pod i { animation: none } }

/* ── 10. Llaves ─────────────────────────────────────────────────────────── */
.group-h { font-size: 14px; font-weight: 700; color: var(--mut); margin: 18px 0 8px; display: flex; align-items: center; gap: 8px }
.match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px }
.bracket-match { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px }
.bracket-match.is-live { border-color: var(--live); box-shadow: 0 0 0 1px var(--live) inset }
.bracket-match.is-bye { border-style: dashed }
.bracket-team { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: var(--r-xs); font-size: 14px }
.bracket-team .bt-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bracket-team .bt-sc { margin-left: auto; padding-left: 8px; font-family: var(--font-display); font-stretch: 82%; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--mut) }
.bracket-team.winner { background: rgba(var(--green-rgb), .13); font-weight: 700 }
.bracket-team.winner .bt-sc { color: var(--green-tx) }
.bracket-team.loser { color: var(--mut) }
.bracket-team.winner::after { content: none }
.bm-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--dim); margin-top: 6px; padding: 6px 4px 0; border-top: 1px solid var(--line) }
.bm-foot .ic { width: 13px; height: 13px }
.bm-margin { font-size: 12px; color: var(--dim); text-align: center; margin-top: 4px }
.elim-h { display: flex; align-items: center; gap: 10px; margin: 26px 0 8px; padding-top: 16px; border-top: 2px solid var(--line2); font-size: 17px; font-weight: 750 }
.elim-h .ic { color: var(--gold); width: 22px; height: 22px }

.bkt-wrap { overflow-x: auto; padding: 12px 0 18px; -webkit-overflow-scrolling: touch }
.bkt-tree { display: flex; align-items: stretch; min-height: 260px; gap: 0; width: max-content; min-width: 100% }
.bkt-round { display: flex; flex-direction: column; justify-content: space-around; min-width: 190px; padding: 0 4px; position: relative; z-index: 1 }
.bkt-round-h { font-size: 12px; font-weight: 700; color: var(--dim); text-align: center; margin-bottom: 4px }
.bkt-conn { display: flex; flex-direction: column; justify-content: space-around; width: 26px; flex: none }
.bkt-conn-pair { display: flex; flex-direction: column; flex: 1; justify-content: center }
.bkt-wire-top { flex: 1; border-right: 2px solid var(--line2); border-bottom: 2px solid var(--line2); border-radius: 0 0 8px 0; min-height: 10px }
.bkt-wire-bot { flex: 1; border-right: 2px solid var(--line2); border-top: 2px solid var(--line2); border-radius: 0 8px 0 0; min-height: 10px }
.bkt-wire-out { flex: 1; display: flex; align-items: center }
.bkt-wire-out::after { content: ""; display: block; width: 100%; height: 2px; background: var(--line2) }
.bkt-conn-pair.bkt-active .bkt-wire-top, .bkt-conn-pair.bkt-active .bkt-wire-bot { border-color: var(--green) }
.bkt-conn-pair.bkt-active .bkt-wire-out::after { background: var(--green) }
.bkt-slot { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-md); overflow: hidden; margin: 6px 0 }
.bkt-slot.bkt-live { border-color: var(--live); box-shadow: 0 0 0 1px var(--live) inset }
.bkt-slot.bkt-done { border-color: rgba(var(--green-rgb), .55) }
.bkt-slot-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--dim); padding: 6px 10px 2px }
.bkt-team { display: flex; align-items: center; gap: 6px; padding: 7px 10px; font-size: 14px; font-weight: 550 }
.bkt-team + .bkt-team { border-top: 1px solid var(--line) }
.bkt-team.bkt-w { background: rgba(var(--green-rgb), .12); font-weight: 750 }
.bkt-team.bkt-l { color: var(--mut) }
.bkt-team .bkt-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px }
.bkt-sc { font-family: var(--font-display); font-stretch: 82%; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--mut); min-width: 3ch; text-align: right }
.bkt-sc-w { color: var(--green-tx) }
.bkt-badge { font-size: 11px; font-weight: 800; padding: 1px 5px; border-radius: 3px; background: var(--green-strong); color: #fff }
.bkt-foot { font-size: 12px; color: var(--dim); text-align: center; padding: 4px 6px; border-top: 1px solid var(--line) }
.bkt-slot.bkt-empty { border-style: dashed; background: transparent }
.bkt-slot.bkt-empty .bkt-team { color: var(--dim); font-style: italic }
.bkt-trophy-col { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 120px; padding: 0 8px }
.bkt-trophy { text-align: center; font-size: 15px; font-weight: 800 }
.bkt-trophy .bkt-trophy-icon { display: block; color: var(--gold); margin: 0 auto 8px; width: 44px; height: 44px; stroke-width: 1.6 }
.bkt-trophy .bkt-trophy-name { color: var(--gold); display: block; max-width: 160px }
[data-theme="mesa"] .bkt-trophy .bkt-trophy-name { color: #7A5A00 }
.bkt-third-wrap { margin-top: 14px; display: flex; justify-content: center }
.bkt-third-wrap .bkt-slot { min-width: 220px }
.bkt-third-label { text-align: center; font-size: 13px; font-weight: 700; color: var(--bronze); margin-bottom: 6px }
.bracket { display: flex; gap: 24px; padding: 12px; overflow-x: auto }
.bracket-round { display: flex; flex-direction: column; gap: 12px; min-width: 200px }
.bracket-round-label { font-size: 12px; color: var(--dim); text-align: center; font-weight: 700 }
@media (max-width: 700px) {
  .bkt-round { min-width: 150px }
  .bkt-team .bkt-name { max-width: 104px; font-size: 13px }
  .bkt-conn { width: 16px }
}

/* ── 11. Proyector y ceremonia (pantallas de sede, siempre ARENA) ───────── */
.projector { min-height: 100vh; background: var(--bg); color: var(--txt); overflow: hidden; position: relative; isolation: isolate; font-size: 18px }
.prj-header { display: flex; align-items: center; gap: 22px; padding: 22px 48px 18px; border-bottom: 2px solid var(--tape) }
.prj-header .rr-logo { height: 46px }
.prj-logo { height: 46px; width: auto }
.prj-event { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-stretch: 105%; font-size: 26px; font-weight: 800; white-space: nowrap; overflow: hidden }
.prj-event .ev-name { overflow: hidden; text-overflow: ellipsis }
.prj-event .live-pill { font-size: 15px; padding: 4px 12px; font-family: var(--font-text) }
.prj-clock { font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 30px; font-variant-numeric: tabular-nums; color: var(--mut) }
.prj-controls { display: flex; gap: 6px; transition: opacity .4s }
.projector.idle .prj-controls, .projector.idle .ceremony-nav { opacity: 0; pointer-events: none }
.projector.idle { cursor: none }
.prj-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.07); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm); padding: 8px 14px; font-size: 14px; font-weight: 650; min-height: 38px }
.prj-btn .ic { width: 17px; height: 17px }
.prj-btn:hover { background: rgba(255,255,255,.14) }
.prj-btn.active { background: var(--red-strong); border-color: var(--red-strong) }
.prj-slide { display: grid; grid-template-columns: minmax(300px, 30%) 1fr; gap: 48px; padding: 40px 48px 70px; min-height: calc(100vh - 92px); position: relative }
.prj-side { position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 10px }
.prj-side .picto-hero { width: min(26vw, 340px); height: min(26vw, 340px); stroke-width: .9; color: var(--tape); --picto-accent: var(--red); margin: 0 0 30px -6px }
.prj-side .prj-kicker { font-size: 20px; color: var(--mut); font-weight: 600; margin-bottom: 6px }
.prj-side .big-title { font-family: var(--font-display); font-stretch: 118%; font-weight: 850; font-size: clamp(44px, 4.4vw, 84px); line-height: .98; letter-spacing: -.01em; overflow-wrap: normal; min-width: 0 }
.nb { white-space: nowrap }
.prj-side .big-sub { font-size: clamp(20px, 1.7vw, 30px); color: var(--mut); margin-top: 14px; font-weight: 600 }
.prj-side .ic.side-ic { width: min(18vw, 220px); height: min(18vw, 220px); stroke-width: 1; color: var(--tape); margin-bottom: 30px }
.prj-main { min-width: 0; display: flex; flex-direction: column; justify-content: flex-start }
.prj-ranking { display: flex; flex-direction: column; border-top: 2px solid var(--line2) }
.prj-empty { font-size: 26px; color: var(--mut); margin-top: 40px }
/* --rk: con pocas filas, el proyector las agranda hasta llenar la pantalla (projector.js · fitRows) */
.lb-row { display: grid; grid-template-columns: calc(76px * var(--rk, 1)) calc(56px * var(--rk, 1)) minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: calc(14px * var(--rk, 1)) 10px calc(14px * var(--rk, 1)) 0; border-bottom: 1px solid var(--line2); position: relative }
.lb-row::before { content: ""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 6px; border-radius: 3px }
.lb-row.top1::before { background: var(--gold) } .lb-row.top2::before { background: var(--silver) } .lb-row.top3::before { background: var(--bronze) }
.lb-row.top1 { background: linear-gradient(90deg, rgba(var(--gold-rgb), .14), transparent 70%) }
.lb-pos { font-family: var(--font-display); font-stretch: 78%; font-weight: 850; font-size: calc(46px * var(--rk, 1)); line-height: 1; text-align: center; font-variant-numeric: tabular-nums }
.lb-row.top1 .lb-pos { color: var(--gold) } .lb-row.top2 .lb-pos { color: var(--silver) } .lb-row.top3 .lb-pos { color: var(--bronze) }
.lb-flag { font-size: calc(40px * var(--rk, 1)); line-height: 1; text-align: center }
.lb-name { font-size: calc(clamp(24px, 2vw, 36px) * var(--rk, 1)); font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15 }
.lb-inst { font-size: calc(clamp(15px, 1.15vw, 20px) * var(--rk, 1)); color: var(--mut); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lb-inst .best { color: var(--gold); font-weight: 700 }
/* La institución se abrevia con «…» si hace falta; la mejor ronda siempre se ve completa */
.lb-inst { display: flex; gap: .6em; align-items: baseline }
.lb-inst .inst-t { min-width: 0; overflow: hidden; text-overflow: ellipsis }
.lb-inst .best { flex: none }
.lb-score { font-family: var(--font-display); font-stretch: 78%; font-weight: 850; font-size: calc(clamp(40px, 3.4vw, 64px) * var(--rk, 1)); line-height: 1; text-align: right; font-variant-numeric: tabular-nums; min-width: 2ch }
.lb-row.top1 .lb-score { color: var(--gold) }
.lb-row .tie-mark { font-size: 15px; margin-left: 8px }
.lb-row.match-row { grid-template-columns: calc(210px * var(--rk, 1)) minmax(0, 1fr) auto auto; gap: 22px }
.lb-row .scope { font-size: calc(15px * var(--rk, 1)); color: var(--mut); line-height: 1.3 }
.lb-row .scope b { display: block; font-size: calc(19px * var(--rk, 1)); color: var(--txt) }
.lb-row .who { font-size: calc(clamp(22px, 1.8vw, 32px) * var(--rk, 1)); font-weight: 750; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lb-row .who .vs { color: var(--dim); font-weight: 600; font-size: .7em; margin: 0 10px }
.lb-row .who .res { font-family: var(--font-display); font-stretch: 80%; color: var(--gold); font-weight: 850; margin: 0 8px }
.lb-row .when { font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: calc(34px * var(--rk, 1)); font-variant-numeric: tabular-nums }
.lb-row .where { font-size: calc(17px * var(--rk, 1)); color: var(--mut); text-align: right; white-space: nowrap }
.lb-row .winner { font-size: calc(20px * var(--rk, 1)); font-weight: 750; color: var(--gold); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap }
.lb-row.live-match { background: linear-gradient(90deg, rgba(var(--red-rgb), .16), transparent 70%) }
.lb-row.live-match::before { background: var(--live) }
.live-badge { display: inline-flex; align-items: center; gap: 8px; color: #fff; background: var(--live-fill); padding: 5px 12px; border-radius: var(--r-xs); font-size: 15px; font-weight: 800; white-space: nowrap }
.prj-progress { position: fixed; left: 0; right: 0; bottom: 0; height: 5px; z-index: 30; background: var(--red); transform-origin: left; transform: scaleX(0) }
.prj-ticker { position: fixed; left: 0; right: 0; bottom: 5px; z-index: 20; display: flex; align-items: center; gap: 26px; padding: 12px 48px; background: rgba(var(--bg-rgb), .94); border-top: 1px solid var(--line2); font-size: 18px; white-space: nowrap; overflow: hidden }
/* Sin nada en la arena la cinta se oculta de verdad: «display: flex» anulaba el atributo hidden y quedaba una franja vacía. */
.prj-ticker[hidden] { display: none }
.prj-ticker .tk-lbl { display: inline-flex; align-items: center; gap: 8px; color: var(--live); font-weight: 800 }
.prj-ticker .tk-item { display: inline-flex; align-items: center; gap: 10px; color: var(--mut) }
.prj-ticker .tk-item b { color: var(--txt); font-weight: 700 }
.prj-ticker .tk-item .picto { width: 24px; height: 24px; --picto-accent: currentColor }

.ceremony-nav { display: flex; align-items: center; gap: 8px; padding: 12px 48px; flex-wrap: wrap; justify-content: center; border-bottom: 1px solid var(--line); transition: opacity .4s }
.ceremony-label { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; margin: 0 14px; font-family: var(--font-display); font-stretch: 100% }
.ceremony-label .picto { width: 30px; height: 30px; --picto-accent: var(--red) }
.ceremony-reveal { background: var(--gold) !important; color: #1B1500 !important; border-color: var(--gold) !important; font-weight: 800 }
.ceremony-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 30px 40px; min-height: calc(100vh - 160px); position: relative; text-align: center }
.ceremony-intro-icon .picto { width: min(30vh, 300px); height: min(30vh, 300px); stroke-width: .9; color: var(--tape); --picto-accent: var(--red) }
.ceremony-intro-title { font-family: var(--font-display); font-stretch: 120%; font-weight: 850; font-size: clamp(54px, 6vw, 110px); line-height: 1; margin-top: 26px }
.ceremony-intro-cat { font-size: clamp(26px, 2.6vw, 44px); color: var(--gold); font-weight: 700; margin-top: 12px }
.ceremony-intro-text { font-size: 22px; color: var(--mut); margin-top: 18px }
.ceremony-title { font-family: var(--font-display); font-stretch: 110%; font-size: clamp(26px, 2.4vw, 40px); font-weight: 800; margin-bottom: 34px; color: var(--mut) }
.ceremony-title b { color: var(--txt) }
.podium-layout { display: flex; align-items: flex-end; justify-content: center; gap: 24px; width: 100% }
.podium-col { display: flex; flex-direction: column; align-items: center; width: min(28vw, 380px) }
.podium-col.col-1st { z-index: 3 } .podium-col.col-2nd { z-index: 2 } .podium-col.col-3rd { z-index: 1 }
.podium-base { width: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-stretch: 80%; font-size: 54px; font-weight: 900; border-radius: var(--r-sm) var(--r-sm) 0 0; color: rgba(0,0,0,.55) }
.base-1 { background: var(--gold); height: 140px } .base-2 { background: var(--silver); height: 104px } .base-3 { background: var(--bronze); height: 76px }
.podium-slot { text-align: center; padding: 18px 12px 20px; min-height: 200px; width: 100% }
.podium-slot.unrevealed, .podium-slot.empty { display: flex; flex-direction: column; align-items: center; justify-content: center }
.podium-unknown { font-family: var(--font-display); font-size: 80px; font-weight: 900; color: rgba(255,255,255,.14); margin-top: 6px }
.podium-medal { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-family: var(--font-display); font-stretch: 80%; font-size: 30px; font-weight: 900; margin-bottom: 12px }
.podium-medal.m1 { background: radial-gradient(circle at 32% 28%, #FFE9A6, var(--gold) 62%, #A97F18); color: #2B1E00 }
.podium-medal.m2 { background: radial-gradient(circle at 32% 28%, #FFFFFF, var(--silver) 62%, #8C939B); color: #1B1E22 }
.podium-medal.m3 { background: radial-gradient(circle at 32% 28%, #F2C29C, var(--bronze) 62%, #85491F); color: #1E1006 }
.podium-flag { font-size: 52px; margin-bottom: 8px; line-height: 1 }
.podium-team { font-family: var(--font-display); font-stretch: 105%; font-size: clamp(26px, 2.3vw, 42px); font-weight: 850; line-height: 1.08; margin-bottom: 6px }
.podium-inst { font-size: clamp(15px, 1.05vw, 22px); color: var(--mut) }
.podium-country { font-size: clamp(14px, .95vw, 20px); color: var(--dim); font-weight: 600; margin-bottom: 10px }
.podium-score { font-family: var(--font-display); font-stretch: 80%; font-size: clamp(30px, 2.1vw, 44px); font-weight: 850; color: var(--txt); margin-bottom: 10px }
.podium-score small { font-family: var(--font-text); font-size: 15px; color: var(--mut); font-weight: 600; margin-left: 6px }
.podium-members { display: flex; flex-direction: column; gap: 2px }
/* Los nombres de los integrantes se leen desde las gradas (antes 16 px fijos) */
.podium-member { font-size: clamp(15px, 1.2vw, 25px); color: var(--txt); opacity: .86 }
.podium-coach { font-size: clamp(14px, 1vw, 21px); color: var(--dim); font-weight: 600; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; justify-content: center }
.place-1 .podium-team { color: var(--gold) }

/* ── 12. Consola del juez ───────────────────────────────────────────────── */
/* Dojo compartido: qué reto toca ahora y cuál sigue */
.dojo-shared { margin-top: 4px; padding: 12px; border-radius: var(--r-md); border: 1px solid rgba(var(--amber-rgb), .5); background: rgba(var(--amber-rgb), .07) }
.dsh-title { display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: 14px; margin-bottom: 8px }
.dsh-list { display: flex; gap: 8px; flex-wrap: wrap }
.dojo-scope { flex: 1; min-width: 140px; padding: 9px 11px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--panel) }
.dojo-scope.on { border-color: var(--hazard); background: rgba(var(--amber-rgb), .14) }
.ds-name { font-weight: 750; font-size: 14px; display: flex; align-items: center; gap: 6px }
.ds-meta { font-size: 12.5px; color: var(--mut); margin-top: 2px }
.dsh-hint { font-size: 12.5px; color: var(--mut); margin-top: 8px; line-height: 1.5 }
/* Tarjeta del partido en la mesa */
.j-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; margin-bottom: 14px }
.j-match-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--mut); margin-bottom: 12px }
.j-match-head .mh-no { font-family: var(--font-display); font-stretch: 85%; font-weight: 800; color: var(--txt) }
.j-match-head .mh-time { display: inline-flex; align-items: center; gap: 5px }
.j-match-head .mh-late { color: var(--amber-tx); font-weight: 700 }
.j-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 16px }
.j-teams.solo { grid-template-columns: 1fr; text-align: center }
.j-teams .jt { min-width: 0; font-size: 19px; font-weight: 750; line-height: 1.25 }
.j-teams .jt.a { text-align: right } .j-teams .jt.b { text-align: left }
.j-teams .jt .corner { display: block; width: 30px; height: 5px; border-radius: 3px; margin-bottom: 6px }
.j-teams .jt.a .corner { background: var(--corner-a); margin-left: auto } .j-teams .jt.b .corner { background: var(--corner-b) }
.j-teams .jvs { font-size: 13px; color: var(--dim); font-weight: 700 }
.j-section-lbl { font-size: 13px; font-weight: 650; color: var(--dim); margin-bottom: 8px }
.j-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--panel2); border: 1px solid var(--line); font-size: 14px }
.j-result b { font-family: var(--font-display); font-stretch: 90%; font-size: 18px }
.j-submit { min-height: 58px; font-size: 17px }
/* SumoBot: mejor de 3 rondas */
.sumo-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 12px }
.sb-side { text-align: center; padding: 14px 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel2); position: relative; overflow: hidden }
.sb-side::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px }
.sb-side.a::before { background: var(--corner-a) } .sb-side.b::before { background: var(--corner-b) }
.sb-name { font-size: 14px; font-weight: 650; color: var(--mut); min-height: 2.5em; display: flex; align-items: center; justify-content: center }
.sb-score { font-family: var(--font-display); font-stretch: 78%; font-weight: 850; font-size: 76px; line-height: 1; margin: 2px 0 6px; font-variant-numeric: tabular-nums }
.sb-side.a .sb-score { color: var(--corner-a) } .sb-side.b .sb-score { color: var(--corner-b) }
.sb-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px }
.sb-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line2) }
.sb-side.a .sb-dots i.on { background: var(--corner-a); border-color: var(--corner-a) }
.sb-side.b .sb-dots i.on { background: var(--corner-b); border-color: var(--corner-b) }
.sb-ctrl { display: grid; grid-template-columns: 56px 1fr; gap: 8px }
.sb-btn { min-height: 56px; border-radius: var(--r-sm); font-size: 22px; font-weight: 800; border: 1px solid var(--line2); background: var(--panel); color: var(--txt); touch-action: manipulation }
.sb-btn.plus { font-size: 16px; color: #fff; border: none }
.sb-side.a .sb-btn.plus { background: var(--red-strong) } .sb-side.b .sb-btn.plus { background: var(--blue-strong) }
.sb-btn:active:not([disabled]) { transform: scale(.97) }
.sb-btn[disabled] { opacity: .3; cursor: not-allowed }
.sb-forf { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; margin-top: 10px; cursor: pointer; min-height: 36px }
.sb-forf input { width: 20px; height: 20px; accent-color: var(--red-strong) }
.sb-vs { align-self: center; font-size: 14px; font-weight: 800; color: var(--dim) }
.sb-banner { text-align: center; margin-bottom: 12px; padding: 10px; border-radius: var(--r-md); font-size: 14px }
.sb-banner.done { background: rgba(var(--green-rgb), .1); border: 1px solid rgba(var(--green-rgb), .5); color: var(--green-tx); font-weight: 700 }
.sb-banner.round { color: var(--mut) }
.sb-banner .num { font-size: 18px; color: var(--txt) }
.sb-btn.plus { padding: 0 6px; white-space: nowrap }
@media (max-width: 520px) { .sb-score { font-size: 60px } .sb-ctrl { grid-template-columns: 46px 1fr; gap: 6px } .sb-side { padding-left: 8px; padding-right: 8px } .sb-btn.plus { font-size: 15px } .sumo-board { gap: 6px } }
/* Reloj de SoccerBot en la consola */
.j-clock { text-align: center; padding: 10px 8px 6px }
.j-clock .jc-half { font-size: 13.5px; color: var(--mut); font-weight: 650 }
.j-clock .jc-time { font-family: var(--font-display); font-stretch: 78%; font-weight: 850; font-size: clamp(64px, 12vw, 104px); line-height: 1; font-variant-numeric: tabular-nums }
.j-clock .jc-phase { margin-top: 4px; font-size: 14px; font-weight: 700 }
.j-clock .jc-over { margin-top: 8px; font-size: 14px; color: var(--green-tx); font-weight: 650; display: inline-flex; align-items: center; gap: 6px }
.j-timer-ctl { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px }
.j-timer-ctl .btn { min-height: 52px; min-width: 150px; font-size: 16px }
.goals-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center }
.gb-side { text-align: center }
.gb-side .gb-name { font-size: 14px; font-weight: 650; margin-bottom: 6px }
.gb-side.a .gb-name { color: var(--corner-a) } .gb-side.b .gb-name { color: var(--corner-b) }
.gb-row { display: flex; align-items: center; justify-content: center; gap: 10px }
.gb-num { font-family: var(--font-display); font-stretch: 78%; font-weight: 850; font-size: 56px; line-height: 1; min-width: 1.2ch; font-variant-numeric: tabular-nums }
.gb-side.a .gb-num { color: var(--corner-a) } .gb-side.b .gb-num { color: var(--corner-b) }
.gb-btn { min-width: 52px; min-height: 52px; border-radius: var(--r-sm); font-weight: 800; font-size: 15px; border: 1px solid var(--line2); background: var(--panel2); color: var(--txt); padding: 0 12px; touch-action: manipulation }
.gb-btn.goal { color: #fff; border: none; min-width: 128px; min-height: 60px; font-size: 17px; white-space: nowrap }
.gb-btn:not(.goal) { font-size: 24px }
.gb-side.a .gb-btn.goal { background: var(--red-strong) } .gb-side.b .gb-btn.goal { background: var(--blue-strong) }
.gb-btn[disabled] { opacity: .3; cursor: not-allowed }
.gb-sep { font-size: 22px; color: var(--dim) }
/* Teléfono: el marcador arriba y, debajo, «−» y un «+ Gol» ancho (el botón que más se usa) */
@media (max-width: 600px) {
  .gb-row { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px }
  .gb-row .gb-num { grid-column: 1 / -1; order: -1; justify-self: center }
  .gb-btn.goal { min-width: 0; min-height: 56px; padding: 0 6px; font-size: 16px }
  .goals-board { gap: 6px; align-items: start }
  .gb-sep { align-self: center }
}
.situ { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel2); cursor: pointer; min-height: 46px }
.situ input { width: 20px; height: 20px; accent-color: var(--red-strong); flex: none }
.situ.on { border-color: var(--hazard); background: rgba(var(--amber-rgb), .12) }
.situ.off { opacity: .45; cursor: not-allowed }
.lock-hint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--amber-tx); margin-bottom: 10px; font-weight: 600 }
.j-assign { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 16px 0 12px; flex-wrap: wrap }
.j-assign .picto { width: 40px; height: 40px; stroke-width: 1.6 }
.j-assign .ja-main { flex: 1; min-width: 200px }
.j-assign .ja-ch { font-family: var(--font-display); font-stretch: 105%; font-size: 19px; font-weight: 800 }
.j-assign .ja-sub { font-size: 14px; color: var(--mut) }
.j-assign .ja-arena { text-align: center; padding-left: 16px; border-left: 1px solid var(--line) }
.j-assign .ja-arena small { display: block; font-size: 12px; color: var(--dim); font-weight: 600 }
.j-assign .ja-arena b { font-family: var(--font-display); font-stretch: 80%; font-weight: 850; font-size: 34px; line-height: 1 }
/* Teléfono: la pista/dojo se queda a la derecha del reto (antes bajaba a otro renglón) */
@media (max-width: 520px) {
  .j-assign { gap: 10px; padding: 10px 12px }
  .j-assign .picto { width: 34px; height: 34px }
  .j-assign .ja-main { min-width: 0 }
  .j-assign .ja-arena { padding-left: 12px }
}
.score-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-top: 14px }
.score-box .sl { font-size: 13px; font-weight: 650; color: var(--dim) }
.score-box .big { font-family: var(--font-display); font-stretch: 80%; font-size: 40px; font-weight: 850; line-height: 1.1; margin: 2px 0; font-variant-numeric: tabular-nums }
.bd-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 4px 0; color: var(--mut) }
.bd-row b { color: var(--txt); font-weight: 650 }
.bd-wrap { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px }
.consensus { border-radius: var(--r-md); border: 1px solid; padding: 14px 16px; margin-bottom: 12px; background: var(--panel) }
.cs-wait { border-color: var(--line2) }
.cs-single { border-color: rgba(var(--blue-rgb), .55); background: rgba(var(--blue-rgb), .07) }
.cs-ok { border-color: rgba(var(--green-rgb), .55); background: rgba(var(--green-rgb), .08) }
.cs-bad { border-color: rgba(var(--amber-rgb), .6); background: rgba(var(--amber-rgb), .09); position: relative; overflow: hidden; padding-top: 20px }
.cs-bad::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--hazard) 0 9px, #17161A 9px 18px) }
.consensus .ch { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 650; line-height: 1.4 }
.cmp { display: grid; gap: 8px; margin-top: 12px }
.cmp .cell { background: rgba(var(--ink-rgb), .04); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 11px }
.cmp .cell.diff { border-color: rgba(var(--amber-rgb), .6) }
.cmp .who { font-size: 12px; color: var(--dim) }
.cmp .val { font-family: var(--font-display); font-stretch: 85%; font-size: 20px; font-weight: 800 }
.ticker-item { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 6px }
.ticker-item .row1 { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.ticker-item .val { font-weight: 800; color: var(--blue-tx) }
.ticker-item .meta { font-size: 12px; color: var(--mut); margin-top: 2px }
.entre-num::-webkit-outer-spin-button, .entre-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.entre-num { -moz-appearance: textfield; appearance: textfield }
.entre-num:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(var(--blue-rgb), .22) }

/* MiddleBot — tapetes con semáforo R/G/B */
.mb-field { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px }
@media (max-width: 560px) { .mb-field { grid-template-columns: 1fr } }
.mb-mat { border-radius: var(--r-md); padding: 10px 8px; background: var(--panel); border: 2px solid var(--line) }
.mb-mat.on { box-shadow: 0 0 0 1px var(--mat) inset }
/* El borde y el foco llevan el color real del tapete; el rótulo, la tinta del ambiente (legible sobre claro y oscuro) */
.mb-mat.R { --mat: #E5484D; border-color: var(--mat); color: var(--red-tx) }
.mb-mat.G { --mat: #2FA65A; border-color: var(--mat); color: var(--green-tx) }
.mb-mat.B { --mat: #3B7BF0; border-color: var(--mat); color: var(--blue-tx) }
.mb-mat-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; margin-bottom: 8px; justify-content: center }
.mb-led { width: 14px; height: 14px; border-radius: 50%; background: var(--mat, currentColor); flex: none }
.mb-mat-pts { text-align: center; font-family: var(--font-display); font-stretch: 85%; font-size: 20px; font-weight: 850; color: var(--txt); margin-top: 6px; font-variant-numeric: tabular-nums }
.mb-mat-pts small { font-family: var(--font-text); font-size: 12px; font-weight: 600; color: var(--dim) }
.mb-count { display: flex; align-items: center; justify-content: center; gap: 10px }
.mb-btn { width: 48px; height: 48px; min-width: 48px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--panel2); color: var(--txt); font-size: 24px; font-weight: 700; line-height: 1; touch-action: manipulation }
.mb-btn:active:not(:disabled) { transform: scale(.94); background: var(--raise) }
.mb-btn:disabled { opacity: .3; cursor: not-allowed }
.mb-btn.sm { width: 40px; height: 40px; min-width: 40px; font-size: 19px }
.mb-num { font-family: var(--font-display); font-stretch: 80%; font-size: 32px; font-weight: 850; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; line-height: 1 }
.mb-num.sm { font-size: 24px; min-width: 32px }
.mb-stack-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; margin-top: 5px; background: var(--panel2); border-radius: var(--r-sm) }
.mb-stack-viz { display: flex; flex-direction: column-reverse; gap: 1px; min-width: 16px }
.mb-cube { width: 15px; height: 6px; border-radius: 2px; background: currentColor; opacity: .85 }
.mb-stack-val { flex: 1; text-align: right; font-size: 12px; font-weight: 700; color: var(--blue-tx); font-family: var(--font-num); font-variant-numeric: tabular-nums }
.mb-add { width: 100%; margin-top: 6px; padding: 8px; border-radius: var(--r-sm); border: 1px dashed var(--line2); background: transparent; color: var(--mut); font-size: 13px; font-weight: 700; touch-action: manipulation }
.mb-add:active:not(:disabled) { background: var(--raise) }
.mb-add:disabled { opacity: .3; cursor: not-allowed }
.mb-phase { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); margin-bottom: 10px; font-size: 14px; font-weight: 700; line-height: 1.35 }
.mb-phase.wait { background: rgba(var(--amber-rgb), .12); color: var(--amber-tx) }
.mb-phase.run { background: rgba(var(--green-rgb), .12); color: var(--green-tx) }
.mb-phase.count { background: rgba(var(--blue-rgb), .12); color: var(--blue-tx) }
.mb-phase.done { background: rgba(var(--ink-rgb), .06); color: var(--mut) }
.mb-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px }
.mb-tab { position: relative; min-width: 64px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--panel); color: var(--mut); font-size: 13px; font-weight: 700; touch-action: manipulation }
.mb-tab.active { border-color: var(--amber); background: rgba(var(--amber-rgb), .14); color: var(--txt) }
.mb-tab.done { border-color: var(--green) }
.mb-tab .mb-tab-sc { display: block; font-size: 14px; font-weight: 900; color: var(--txt) }
.mb-tab .mb-star { position: absolute; top: -6px; right: -4px; font-size: 11px }
.mb-score { text-align: center; padding: 12px; border-radius: var(--r-md); background: var(--panel2); margin-top: 10px }
.mb-score-num { font-family: var(--font-display); font-stretch: 80%; font-size: 40px; font-weight: 850; color: var(--txt); font-variant-numeric: tabular-nums; line-height: 1 }
.mb-formula { font-size: 12px; color: var(--mut); margin-top: 6px; line-height: 1.5 }
.mb-formula b { color: var(--txt) }
.mb-bonus { padding: 9px 12px; border-radius: var(--r-md); font-size: 13px; font-weight: 700; margin-top: 8px }
.mb-bonus.ok { background: rgba(var(--green-rgb), .12); color: var(--green-tx) }
.mb-bonus.no { background: rgba(var(--red-rgb), .1); color: var(--red-tx); font-weight: 600 }
.mb-toggle { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-md); margin-top: 8px; background: var(--panel); border: 1px solid var(--line2); cursor: pointer; font-size: 14px; font-weight: 700; touch-action: manipulation }
.mb-toggle.on { border-color: var(--green); background: rgba(var(--green-rgb), .1); color: var(--green-tx) }
.mb-toggle.off-disabled { opacity: .4; cursor: not-allowed }
.mb-toggle-box { width: 26px; height: 26px; border-radius: var(--r-xs); flex: none; border: 2px solid var(--line2); display: flex; align-items: center; justify-content: center; font-size: 16px }
.mb-toggle.on .mb-toggle-box { border-color: var(--green-strong); background: var(--green-strong); color: #fff }

/* Kit de las consolas con cronómetro: reloj, controles, avisos, desglose y total */
.tc { margin-bottom: 14px }
.tc-rule { text-align: center; font-size: 13px; color: var(--dim); margin: -6px 0 4px }
.tc-clock { text-align: center; margin: 6px 0 12px }
.tc-clock .tc-time { font-family: var(--font-display); font-stretch: 78%; font-weight: 850; font-size: clamp(64px, 12vw, 104px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--dim); transition: color var(--dur-fast) }
.tc-clock.ph-RUNNING .tc-time { color: var(--green-tx) }
.tc-clock.ph-RUNNING.low .tc-time { color: var(--red-tx) }
.tc-clock.ph-PAUSED .tc-time { color: var(--amber-tx) }
.tc-clock.ph-STOPPED .tc-time { color: var(--blue-tx) }
.tc-clock.ph-DNF .tc-time, .tc-clock.ph-TOUCHED .tc-time { color: var(--red-tx) }
.tc-clock .tc-lbl { font-size: 13px; color: var(--dim); margin-top: 4px }
.tc-ctrls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px }
.tc-ctrls .btn { min-height: 52px; min-width: 140px; font-size: 16px }
.btn.danger-ghost { color: var(--red-tx); border-color: rgba(var(--red-rgb), .55); background: transparent }
.btn.danger-ghost:hover:not([disabled]) { background: rgba(var(--red-rgb), .08); border-color: var(--red) }
.tc-act { display: flex; justify-content: flex-end; margin: -2px 0 10px }
.tc-primary { min-height: 62px; font-size: 18px; margin-bottom: 10px }
.tc-banner { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 11px 14px; border-radius: var(--r-md); margin-bottom: 10px; font-weight: 750; font-size: 15px; border: 1px solid; line-height: 1.35 }
.tc-banner small { display: block; font-weight: 550; font-size: 13px; color: var(--mut); margin-top: 2px }
.tc-banner > .ic { width: 22px; height: 22px; flex: none }
.tc-banner.ok { color: var(--green-tx); border-color: rgba(var(--green-rgb), .5); background: rgba(var(--green-rgb), .1) }
.tc-banner.err { color: var(--red-tx); border-color: rgba(var(--red-rgb), .5); background: rgba(var(--red-rgb), .08) }
.tc-banner.warn { color: var(--amber-tx); border-color: rgba(var(--amber-rgb), .55); background: rgba(var(--amber-rgb), .1) }
.tc-banner.info { color: var(--blue-tx); border-color: rgba(var(--blue-rgb), .5); background: rgba(var(--blue-rgb), .08) }
.tc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 12px 0 8px }
.tc-tile { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; text-align: center; min-width: 0 }
.tc-tile .l { font-size: 12.5px; color: var(--dim); font-weight: 650; line-height: 1.3 }
.tc-tile .v { font-family: var(--font-display); font-stretch: 85%; font-weight: 850; font-size: 25px; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--mut) }
.tc-tile .v small { font-family: var(--font-text); font-size: 12px; font-weight: 700; color: var(--red-tx) }
.tc-tile.on .v { color: var(--green-tx) }
.tc-tile.bonus .v { color: var(--blue-tx) }
.tc-tile.cur { border-color: var(--line2); box-shadow: inset 0 -3px 0 var(--line2) }
.tc-tile.best { border-color: rgba(var(--amber-rgb), .6); background: rgba(var(--amber-rgb), .08) }
.tc-tile.best .l, .tc-tile.best .v { color: var(--amber-tx) }
/* Total oficial: la cifra que va al acta, en una barra de alto contraste */
.tc-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-radius: var(--r-md); background: var(--txt); color: var(--bg); margin-top: 8px }
.tc-total .l { font-weight: 700; font-size: 14.5px; opacity: .85 }
.tc-total .v { font-family: var(--font-display); font-stretch: 85%; font-weight: 900; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums }
.tc-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin-bottom: 10px }
.tc-box-h { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--mut); margin-bottom: 8px }
.tc-box-h .ic { width: 16px; height: 16px }
/* Bloque aún cerrado: se atenúan los BOTONES (están deshabilitados); el rótulo, el aviso del candado y la
   cuenta se siguen leyendo —antes todo el bloque iba al 50 % y el «/3» quedaba ilegible—. */
.tc-box.locked .tc-steps { opacity: .6 }
.tc-box.locked .tc-count .cv, .tc-box.locked .tc-count .cv small { color: var(--dim) }
.tc-sub-l { font-size: 13px; font-weight: 650; color: var(--dim); text-align: center; margin: 8px 0 4px }
.tc-calc { text-align: center; margin-top: 10px; padding: 8px; border-radius: var(--r-sm); background: var(--panel2); font-size: 14px }
.tc-calc b { font-family: var(--font-display); font-size: 18px; font-weight: 850 }
.tc-count { display: flex; align-items: center; justify-content: center; gap: 12px }
.tc-count .cbtn { width: 56px; height: 56px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--panel2); color: var(--txt); display: grid; place-items: center; font-weight: 800; font-size: 15px; touch-action: manipulation; flex: none }
.tc-count .cbtn .ic { width: 22px; height: 22px; stroke-width: 2.4 }
.tc-count .cbtn:hover:not([disabled]) { background: var(--raise) }
.tc-count .cbtn:active:not([disabled]) { transform: scale(.95) }
.tc-count .cbtn[disabled] { opacity: .35; cursor: not-allowed }
.tc-count .cbtn.sm { width: 46px; height: 46px; font-size: 14px }
.tc-count .cv { font-family: var(--font-display); font-stretch: 80%; font-weight: 850; font-size: 42px; min-width: 2.4ch; text-align: center; font-variant-numeric: tabular-nums; line-height: 1 }
.tc-count .cv small { font-size: .55em; color: var(--dim); font-weight: 700 }
@media (max-width: 420px) { .tc-count { gap: 6px } .tc-count .cbtn { width: 48px; height: 48px } .tc-count .cbtn.sm { width: 40px; height: 40px } .tc-count .cv { font-size: 34px } }
.tc-steps { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px }
.tc-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel2); font-size: 14.5px; font-weight: 650; color: var(--mut); min-height: 48px; width: 100%; text-align: left; touch-action: manipulation }
.tc-step .ic { width: 19px; height: 19px; color: var(--dim) }
.tc-step .pts { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums }
.tc-step.on { border-color: rgba(var(--green-rgb), .6); background: rgba(var(--green-rgb), .1); color: var(--green-tx) }
.tc-step.on .ic { color: var(--green-tx) }
.tc-step[disabled] { cursor: not-allowed }
.tc-step:not([disabled]):hover { border-color: var(--line2) }
.tc-phases { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px }
.tc-phases > div { padding: 8px; border-radius: var(--r-sm); font-size: 13px; font-weight: 700; border: 1px solid var(--line); background: var(--panel2); color: var(--dim); display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center }
.tc-phases > div .ic { width: 15px; height: 15px }
.tc-phases > div.on { color: var(--green-tx); border-color: rgba(var(--green-rgb), .6); background: rgba(var(--green-rgb), .1) }
.tc-phases > div.on.p2 { color: var(--amber-tx); border-color: rgba(var(--amber-rgb), .6); background: rgba(var(--amber-rgb), .1) }
.tc-laps { display: flex; justify-content: center; gap: 14px; margin-bottom: 14px }
.tc-laps i { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--font-display); font-weight: 850; font-size: 21px; border: 3px solid var(--line2); color: var(--dim); background: var(--panel2) }
.tc-laps i.on { border-color: var(--green); color: var(--green-tx); background: rgba(var(--green-rgb), .12) }
.tc-laps i .ic { width: 26px; height: 26px; stroke-width: 3 }
.tc-segs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 8px }
.tc-segs span { width: 32px; height: 32px; border-radius: var(--r-xs); display: grid; place-items: center; border: 2px solid var(--line2); color: var(--dim); background: var(--panel2) }
.tc-segs span .ic { width: 17px; height: 17px; stroke-width: 2.6 }
.tc-segs span.on { border-color: var(--green); color: var(--green-tx); background: rgba(var(--green-rgb), .12) }
.tc-segs span.turn.on { border-color: var(--amber); color: var(--amber-tx); background: rgba(var(--amber-rgb), .12) }
.tc-legend { font-size: 12.5px; color: var(--dim); margin: 0 0 10px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap }
.tc-legend span { display: inline-flex; align-items: center; gap: 4px }
.tc-legend .ic { width: 14px; height: 14px }
.tc-attempts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
.tc-attempts span { font-size: 13px; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--mut); font-weight: 700; font-family: var(--font-num); font-variant-numeric: tabular-nums }
.tc-attempts span.best { border-color: var(--amber); color: var(--amber-tx) }
.tc-attempts span.cur { border-color: var(--green); color: var(--green-tx); background: rgba(var(--green-rgb), .1) }
/* Selector de equipo en eliminación VS */
.vs-kicker { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--amber-tx); margin-bottom: 8px }
.vs-kicker .ic { width: 15px; height: 15px }
.vs-tabs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; margin-bottom: 8px }
.vs-tab { position: relative; border-radius: var(--r-md); border: 1px solid var(--line2); background: var(--panel2); padding: 12px 10px 10px; text-align: center; color: var(--txt); min-height: 88px; overflow: hidden; touch-action: manipulation }
.vs-tab::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px }
.vs-tab.a::before { background: var(--corner-a) } .vs-tab.b::before { background: var(--corner-b) }
.vs-tab .vt-name { font-size: 14px; font-weight: 700; line-height: 1.25 }
.vs-tab .vt-sc { font-family: var(--font-display); font-stretch: 85%; font-weight: 850; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums }
.vs-tab .vt-st { font-size: 12px; color: var(--dim); font-weight: 600 }
.vs-tab .vt-done { position: absolute; top: 8px; right: 8px; color: var(--green-tx) }
.vs-tab .vt-done .ic { width: 17px; height: 17px }
.vs-tab.on.a { border-color: var(--corner-a); box-shadow: inset 0 0 0 1px var(--corner-a); background: rgba(var(--red-rgb), .07) }
.vs-tab.on.b { border-color: var(--corner-b); box-shadow: inset 0 0 0 1px var(--corner-b); background: rgba(var(--blue-rgb), .07) }
.vs-mid { align-self: center; font-weight: 800; color: var(--dim); font-size: 14px }
.vs-caption { text-align: center; font-size: 13.5px; color: var(--dim); margin-bottom: 12px }
/* Alpine: rampa, mesa y diana */
.alp-ramp { margin-bottom: 10px }
.alp-ramp svg { max-height: 190px; display: block; margin: 0 auto }
.alp-floor { stroke: var(--line2); stroke-width: 1 }
.alp-guide { stroke: var(--line2); stroke-width: 1.5; stroke-dasharray: 4 }
.alp-sec polygon { fill: rgba(var(--ink-rgb), .04); stroke: var(--line2); stroke-width: 1.5 }
.alp-sec text { fill: var(--dim); font-size: 13px; font-weight: 800; font-family: var(--font-display) }
.alp-sec.on polygon { fill: rgba(var(--green-rgb), .25); stroke: var(--green) }
.alp-sec.on text { fill: var(--green-tx) }
.alp-table rect { fill: rgba(var(--ink-rgb), .04); stroke: var(--line2); stroke-width: 2 }
.alp-table.ready rect { fill: rgba(var(--amber-rgb), .12); stroke: var(--amber) }
.alp-table.on rect { fill: rgba(var(--green-rgb), .22); stroke: var(--green) }
.alp-table text { fill: var(--dim) }
.alp-table.ready text { fill: var(--amber-tx) } .alp-table.on text { fill: var(--green-tx) }
.alp-tsm { font-size: 8.5px; font-weight: 700 }
.alp-tbig { font-size: 19px; font-weight: 900; font-family: var(--font-display) }
.alp-ico { stroke: var(--dim); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.alp-start { fill: var(--dim); font-size: 8px; font-weight: 700 }
.alp-row { display: flex; gap: 8px; margin-bottom: 10px; align-items: stretch }
.alp-table-btn { min-width: 116px; border-radius: var(--r-md); border: 1px solid var(--line2); background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; font-size: 13px; font-weight: 700; color: var(--txt); text-align: center }
.alp-table-btn b { font-family: var(--font-display); font-size: 22px; font-weight: 900; display: inline-flex; align-items: center; gap: 4px }
.alp-table-btn.on { border-color: var(--green); background: rgba(var(--green-rgb), .12); color: var(--green-tx) }
.alp-table-btn.locked { border-style: dashed; background: var(--panel2); color: var(--dim); font-weight: 600; font-size: 12px }
.alp-table-btn.locked .ic { width: 22px; height: 22px }
.alp-table-btn[disabled] { opacity: .45; cursor: not-allowed }
.alp-flag { position: relative; text-align: center; margin-bottom: 10px }
/* Diana aún cerrada: se atenúan la diana y sus botones (deshabilitados); el rótulo se sigue leyendo */
.alp-flag.locked { pointer-events: none }
.alp-flag.locked .alp-target, .alp-flag.locked .alp-zones { opacity: .4 }
.alp-target { max-width: 65vw; margin: 0 auto; display: block }
.alp-z { stroke-width: 1.5 }
.alp-z.z4 { fill: rgba(55,65,81,.18); stroke: #4B5563 } .alp-z.z4.sel { fill: rgba(55,65,81,.85) }
.alp-z.z3 { fill: rgba(156,163,175,.12); stroke: #9CA3AF } .alp-z.z3.sel { fill: rgba(156,163,175,.85) }
.alp-z.z2 { fill: rgba(75,85,99,.14); stroke: #6B7280 } .alp-z.z2.sel { fill: rgba(75,85,99,.85) }
.alp-z.z1 { fill: rgba(209,213,219,.12); stroke: #9CA3AF } .alp-z.z1.sel { fill: rgba(209,213,219,.9) }
.alp-z.z0 { fill: rgba(var(--amber-rgb), .12); stroke: var(--hazard) } .alp-z.z0.sel { fill: var(--hazard) }
.alp-z.sel { stroke-width: 3 }
.alp-zt { fill: var(--dim); font-size: 9px; font-weight: 700; pointer-events: none }
.alp-zt.sel { fill: #fff; font-size: 11px; font-weight: 900 }
.alp-hit { stroke: #fff; fill: none; stroke-width: 2.4; pointer-events: none }
.alp-hint { fill: var(--dim); font-size: 10px; pointer-events: none }
.alp-zones { display: flex; flex-direction: column; gap: 5px; margin: 10px auto 0; max-width: 340px }
.alp-zones .btn { justify-content: flex-start; min-height: 44px }
.alp-lock { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); color: var(--dim) }
.alp-lock .ic { width: 44px; height: 44px }
/* Consenso entre jueces: renglones por juez */
.consensus .ch .ic { width: 20px; height: 20px; flex: none; margin-top: 1px }
.cs-ok .ch { color: var(--green-tx) } .cs-bad .ch { color: var(--amber-tx) } .cs-single .ch { color: var(--blue-tx) } .cs-wait .ch { color: var(--mut) }
.cmp .cell .code { font-size: 12px; color: var(--dim) }
.cmp .input { margin-top: 2px }
/* Entrepreneurial: lista de equipos y hoja de evaluación */
.entre-pick-h { text-align: center; margin-bottom: 12px }
.entre-pick-h h3 { font-size: 18px; margin-bottom: 4px }
.entre-pick-h p { font-size: 13.5px; margin-bottom: 8px }
.entre-pick { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--panel) }
.ep-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line) }
.ep-row:last-child { border-bottom: none }
.ep-row b { display: block; font-size: 15px }
.ep-row small { display: block; font-size: 13px; color: var(--dim) }
.ep-row.done { opacity: .7 }
.entre-head { text-align: center; margin-bottom: 14px }
.entre-head .btn { margin-bottom: 6px }
.entre-head h3 { font-size: 20px; font-family: var(--font-display); font-stretch: 104% }
.entre-crit { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); padding: 12px 14px; margin-bottom: 10px }
.ec-h { display: flex; align-items: center; gap: 9px; margin-bottom: 4px }
.ec-h > .ic { width: 20px; height: 20px; color: var(--dim) }
.ec-name { flex: 1; font-weight: 800; font-size: 15px }
.ec-h .entre-num { width: 76px; font-family: var(--font-display); font-stretch: 85%; font-size: 26px; font-weight: 900; text-align: center; background: var(--panel); border: 1.5px solid var(--line2); border-radius: var(--r-sm); padding: 4px 6px; cursor: text; font-variant-numeric: tabular-nums; transition: color .3s, border-color .2s }
.ec-max { font-size: 13px; color: var(--dim); font-weight: 650 }
.ec-desc { font-size: 12.5px; color: var(--mut); line-height: 1.4; margin-bottom: 10px }
.ec-ctl { display: flex; align-items: center; gap: 8px }
.ec-ctl .cbtn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line2); background: var(--panel); color: var(--txt); display: grid; place-items: center; flex: none; touch-action: manipulation }
.ec-ctl .cbtn .ic { width: 20px; height: 20px; stroke-width: 2.4 }
.ec-ctl .cbtn:active { transform: scale(.95) }
.ec-bar { flex: 1; height: 18px; background: rgba(var(--ink-rgb), .1); border-radius: 8px; overflow: hidden; position: relative }
.ec-bar > div { height: 100%; border-radius: 8px; transition: width .25s ease, background .3s }
.ec-bar > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; color: rgba(var(--ink-rgb), .8) }
.ec-bar.total { height: 10px; margin-top: 8px }
.tc-total.entre-total { background: var(--panel2); color: var(--txt); border: 1px solid var(--line2) }
.tc-total.entre-total .v small { font-size: .45em; color: var(--dim); font-weight: 700 }

/* MiddleBot (ajustes V2) */
.mb-counter { flex: 1; min-width: 110px; text-align: center }
.mb-c-lbl { font-size: 12.5px; color: var(--dim); margin-bottom: 5px; font-weight: 650; display: flex; align-items: center; justify-content: center; gap: 5px }
.mb-c-lbl .ic { width: 14px; height: 14px }
.mb-btn { display: inline-grid; place-items: center }
.mb-btn .ic { width: 20px; height: 20px; stroke-width: 2.4 }
.mb-btn.sm .ic { width: 17px; height: 17px }
.mb-btn.danger { color: var(--red-tx) }
.mb-add { display: flex; align-items: center; justify-content: center; gap: 6px }
.mb-add .ic { width: 15px; height: 15px }
.mb-phase .ic { width: 18px; height: 18px; flex: none }
.mb-extra { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap }
.mb-toggle .ic { width: 16px; height: 16px; vertical-align: -3px }
.mb-toggle-box .ic { width: 18px; height: 18px; stroke-width: 3 }
.mb-tab .mb-star { color: var(--amber-tx) }
.mb-tab .mb-star .ic { width: 13px; height: 13px; fill: currentColor }
.mb-formula { text-align: center }
.mb-bonus { display: flex; align-items: center; gap: 8px }
.mb-bonus .ic { width: 16px; height: 16px }

/* ── 13. Panel del Director ─────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px }
.tbl th, .tbl td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle }
.tbl th { color: var(--dim); font-size: 12.5px; font-weight: 650; background: var(--panel2); position: sticky; top: 0 }
.tbl tbody tr:hover td { background: rgba(var(--ink-rgb), .03) }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100% }
/* En el teléfono cada tabla se desplaza por dentro de SU caja (.tbl-box): la página no se desborda y la
   tabla sigue siendo una tabla para los lectores de pantalla (antes se volvía un bloque). */
@media (max-width: 760px) { .tbl { white-space: nowrap } }
.drop-zone { border: 2px dashed var(--line2); border-radius: var(--r-lg); padding: 36px 20px; text-align: center; color: var(--mut); background: var(--panel); transition: border-color var(--dur-fast), background-color var(--dur-fast) }
.drop-zone:hover { border-color: rgba(var(--ink-rgb), .45) }
.drop-zone.over { border-color: var(--blue); background: rgba(var(--blue-rgb), .07); color: var(--txt) }
.drop-zone strong { color: var(--txt) }
.cfg-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden }
/* Reto fuera del evento: la tarjeta se «apaga» (borde punteado, pictograma y nombre atenuados) pero sus
   rótulos se siguen leyendo —antes toda la tarjeta iba al 60 % y el texto pequeño no alcanzaba contraste—. */
.cfg-card.cfg-off { background: var(--panel2); border-style: dashed; border-color: var(--line2) }
.cfg-card.cfg-off .cfg-icon { opacity: .45 }
.cfg-card.cfg-off .cfg-name { color: var(--mut) }
.cfg-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; user-select: none; flex-wrap: wrap }
.cfg-head:hover { background: rgba(var(--ink-rgb), .03) }
.cfg-icon { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(var(--ink-rgb), .06); border-radius: var(--r-sm); flex: none; font-size: 24px }
.cfg-icon .picto { width: 28px; height: 28px }
.cfg-info { flex: 1; min-width: 160px }
.cfg-info h4 { font-size: 15px; font-weight: 700; margin: 0 }
.cfg-name { font: inherit; color: inherit; text-align: left; padding: 0; cursor: pointer }
.cfg-name:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px }
.cfg-info .cfg-sub { font-size: 12.5px; color: var(--dim); margin-top: 2px }
.cfg-controls { display: flex; align-items: center; gap: 16px; flex-shrink: 0; flex-wrap: wrap }
.cfg-ctrl-group { display: flex; flex-direction: column; align-items: center; gap: 3px }
.cfg-ctrl-label { font-size: 12px; font-weight: 600; color: var(--dim); text-align: center }
/* Teléfono: los tres controles ocupan su propia fila y reparten el ancho (en japonés los rótulos se salían) */
@media (max-width: 620px) {
  .cfg-arrow { order: 2 }
  .cfg-controls { order: 3; flex: 1 1 100%; justify-content: space-between; gap: 8px; min-width: 0 }
  .cfg-controls > .cfg-ctrl-group { flex: 1 1 0; min-width: 0 }
  .cfg-controls .cfg-ctrl-label { overflow-wrap: anywhere }
  .cfg-ctrl-label { line-height: 1.25 }
  /* Dentro de la tarjeta, los campos de cada categoría van en rejilla: caben 2–3 por fila con su rótulo
     entero (antes los seis se apretaban en una sola fila y los rótulos se partían letra por letra). */
  .cfg-cat-row { align-items: flex-start }
  .cfg-cat-row .cfg-cat-badge { padding-top: 2px }
  .cfg-cat-row .cfg-cat-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-items: end }
  .cfg-cat-fields > .cfg-ctrl-group { margin-left: 0 !important; align-items: flex-start; min-width: 0 }
  .cfg-cat-fields .cfg-ctrl-label { text-align: left; overflow-wrap: anywhere }
}
.cfg-stepper { display: flex; align-items: center; gap: 0 }
.cfg-stepper button { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--panel2); color: var(--txt); font-size: 16px; display: flex; align-items: center; justify-content: center }
.cfg-stepper button:hover { background: var(--raise) }
.cfg-stepper .cfg-val { width: 32px; text-align: center; font-weight: 800; font-size: 16px; font-family: var(--font-num); font-variant-numeric: tabular-nums }
.cfg-arrow { color: var(--dim); display: grid; place-items: center; width: 28px; height: 28px; transition: transform var(--dur-fast) var(--ease-standard) }
.cfg-arrow .ic { width: 20px; height: 20px }
.cfg-stepper button .ic { width: 15px; height: 15px }
.cfg-num { width: 78px; text-align: center; min-height: 34px; font-weight: 700; font-family: var(--font-num); font-variant-numeric: tabular-nums }
.cfg-rules { padding: 14px 18px 16px 74px; border-top: 1px solid var(--line) }
.cfg-rules-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--mut); margin-bottom: 10px }
.cfg-rules-h .ic { width: 16px; height: 16px }
.cfg-rules .btn input[type=file] { display: none }
.cfg-savebar { position: sticky; bottom: 0; padding: 14px 0 18px; background: linear-gradient(to top, var(--bg) 70%, transparent); display: flex; justify-content: flex-end; z-index: 5 }
.icon-btn.danger:hover { color: var(--red-tx); background: rgba(var(--red-rgb), .1) }
@media (max-width: 700px) { .cfg-rules { padding-left: 18px } }
.cfg-card.cfg-open .cfg-arrow { transform: rotate(180deg) }
/* Cuerpo plegable: se abre a SU altura real (rejilla 0fr → 1fr). Con el tope fijo de 1200 px de antes, una
   tarjeta de cuatro divisiones en el teléfono quedaba cortada; cerrada, sus campos ya no reciben el foco. */
.cfg-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .28s var(--ease-standard), visibility 0s .28s }
.cfg-body-in { overflow: hidden; min-height: 0 }
.cfg-card.cfg-open .cfg-body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .28s var(--ease-standard), visibility 0s }
.cfg-cat-row { padding: 12px 18px 12px 74px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.cfg-cat-row.off { background: rgba(var(--ink-rgb), .035) }
.cfg-cat-row.off .cfg-cat-badge { color: var(--dim); text-decoration: line-through }
.cfg-cat-row .cfg-cat-badge { font-weight: 800; font-size: 14px; color: var(--blue-tx); min-width: 28px }
.cfg-cat-row .cfg-cat-fields { display: flex; align-items: center; gap: 14px; flex: 1; flex-wrap: wrap }
.cfg-body input[type="number"], .cfg-body input[type="url"], .cfg-body input[type="text"], .cfg-body textarea,
.cfg-rules input[type="url"], .cfg-rules textarea {
  background: var(--panel2) !important; color: var(--txt) !important; border: 1px solid var(--line2) !important;
  border-radius: var(--r-sm); padding: 7px 10px; font-size: 14px; font-family: inherit;
}
@media (max-width: 700px) { .cfg-cat-row { padding-left: 18px } }

/* Tarjetas de cifras del tablero */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px }
.stat .st-l { font-size: 13px; color: var(--mut); font-weight: 600; display: flex; align-items: center; gap: 6px }
.stat .st-l .ic { width: 16px; height: 16px; color: var(--dim) }
.stat .st-v { font-family: var(--font-display); font-stretch: 80%; font-weight: 850; font-size: 36px; line-height: 1.05; margin-top: 4px; font-variant-numeric: tabular-nums }
.prog-list { display: flex; flex-direction: column; border-top: 1px solid var(--line) }
.prog-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(90px, 30%) 64px; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line) }
.prog-row .picto { width: 26px; height: 26px; stroke-width: 1.8 }
.prog-row .pr-name { font-weight: 650; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.prog-row .pr-name small { font-weight: 500; color: var(--mut); margin-left: 6px }
/* Teléfono: reto arriba y ámbito debajo (antes «SumoBot ES O…» perdía la división) */
@media (max-width: 620px) {
  .prog-row { grid-template-columns: 26px minmax(0, 1fr) minmax(64px, 26%) 52px; gap: 8px }
  .prog-row .pr-name { white-space: normal; line-height: 1.25 }
  .prog-row .pr-name small { display: block; margin-left: 0; font-size: 12.5px }
}
.prog-row .pr-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden }
.prog-row .pr-bar i { display: block; height: 100%; background: var(--green-strong); border-radius: 4px }
.prog-row .pr-bar i.part { background: var(--blue-strong) }
.prog-row .pr-n { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--mut); font-weight: 650 }
.prog-row .pr-n b { color: var(--txt) }
.prog-row .live-dot { color: var(--live) }

.ev-card { padding: 16px 18px; margin-bottom: 10px }
.ev-card.is-live { border-color: rgba(var(--green-rgb), .6); box-shadow: inset 4px 0 0 var(--green-strong) }
.ev-card .ev-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap }
.ev-card .ev-name { font-size: 18px; font-weight: 800; font-family: var(--font-display); font-stretch: 102% }
.ev-card .ev-meta { font-size: 13.5px; color: var(--mut); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.ev-card .ev-meta .ic { width: 14px; height: 14px; color: var(--dim) }
.ev-card .ev-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px }

/* Encabezado de vista del Director (sin pictograma) y pie de nota */
.adm-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px }
.adm-head .ah-txt { flex: 1; min-width: 220px }
.adm-head h2 { font-size: 22px; font-stretch: 104% }
.adm-head .ah-sub { font-size: 14px; color: var(--mut); margin-top: 4px; line-height: 1.5; max-width: 72ch }
.adm-head .ah-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.meta-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--dim); margin-bottom: 12px }
.meta-line .ic { width: 15px; height: 15px }

/* Grupos plegables: reto · categoría · división */
details.grp { margin-bottom: 18px }
/* Listas largas (un mundial son cientos de filas por pestaña): cada tabla de un grupo abierto que queda
   lejos de la pantalla no se calcula ni se pinta hasta que se acerca. Su alto se recuerda: la barra no salta. */
details.grp[open] > .tbl-box, .sch-hour { content-visibility: auto; contain-intrinsic-size: auto 420px }
/* Tablero de calendario: bloques por hora, columnas fijas (todas las tablas alinean) */
.sch-hour { margin-bottom: 12px }
.sch-hour-h { display: flex; align-items: baseline; gap: 10px; margin: 14px 2px 6px; font-family: var(--font-display); font-stretch: 92%; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums }
.sch-hour-h small { font-family: var(--font-num); font-size: 12.5px; font-weight: 600; color: var(--dim) }
.sch-tbl { table-layout: fixed; min-width: 680px }
.sch-tbl .c-time { width: 74px } .sch-tbl .c-no { width: 58px } .sch-tbl .c-field { width: 84px } .sch-tbl .c-scope { width: 29% } .sch-tbl .c-status { width: 132px }
.sch-tbl td { overflow-wrap: anywhere }
.sch-scope { gap: 7px; align-items: flex-start }
.sch-scope .picto { flex: none }
.sch-tbl tr.slot td { background: rgba(var(--amber-rgb), .05) }
details.grp > summary {
  list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
  padding: 8px 4px 10px; font-weight: 700; font-size: 15px; border-radius: var(--r-sm); flex-wrap: wrap;
}
details.grp > summary::-webkit-details-marker { display: none }
details.grp > summary::before {
  content: ""; width: 8px; height: 8px; flex: none; margin: 0 3px 0 2px;
  border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim);
  transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease-standard);
}
details.grp[open] > summary::before { transform: translateY(-2px) rotate(45deg) }
details.grp > summary:hover { background: rgba(var(--ink-rgb), .04) }
details.grp > summary .picto { width: 24px; height: 24px; stroke-width: 1.8 }
details.grp > summary .g-scope { color: var(--mut); font-weight: 600 }
details.grp > summary .g-n { color: var(--dim); font-weight: 600; font-family: var(--font-num); font-variant-numeric: tabular-nums }
details.grp > summary .g-end { margin-left: auto; display: flex; gap: 6px; align-items: center }

/* Celdas */
.cc { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap }
.cc .flag { font-size: 17px }
.cc .cc-code { font-size: 12.5px; color: var(--dim); font-weight: 600 }
.code { font-family: var(--font-code); font-weight: 750; letter-spacing: .02em; white-space: nowrap }
.code-amber { color: var(--amber-tx) }
.tbl .n, .tbl th.n { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums }
.tbl td.n { font-family: var(--font-display); font-stretch: 92%; font-weight: 700 }
.tbl td.n.big { font-weight: 850; font-size: 15.5px }
.tbl .t-hm { font-family: var(--font-display); font-stretch: 92%; font-weight: 750; color: var(--blue-tx); font-variant-numeric: tabular-nums; white-space: nowrap }
.tbl .t-sub { font-size: 12.5px; color: var(--mut) }
.tbl td.pos { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; width: 34px; color: var(--dim) }
.tbl td.pos.p1 { color: var(--gold) } .tbl td.pos.p2 { color: var(--silver) } .tbl td.pos.p3 { color: var(--bronze) }
[data-theme="mesa"] .tbl td.pos.p1 { color: #9A6B00 } [data-theme="mesa"] .tbl td.pos.p2 { color: #6B7280 } [data-theme="mesa"] .tbl td.pos.p3 { color: #9A5525 }
.tbl .acts { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap }
.tbl .acts .icon-btn { width: 34px; height: 34px }
.tbl .acts .icon-btn .ic { width: 17px; height: 17px }
.tbl .acts .icon-btn.danger:hover { color: var(--red-tx); background: rgba(var(--red-rgb), .1) }
.tbl-box { border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto hidden; -webkit-overflow-scrolling: touch; background: var(--panel) }
/* Las regiones con desplazamiento reciben el foco del teclado (flechas para moverse) sin perder su forma */
.tbl-box:focus-visible { border-radius: var(--r-md) }
.bkt-wrap:focus-visible { border-radius: var(--r-sm); outline-offset: -3px }
.tbl-box .tbl th:first-child, .tbl-box .tbl td:first-child { padding-left: 14px }
.tbl-box .tbl tr:last-child td { border-bottom: none }
.conn { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--dim); white-space: nowrap }
.conn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; flex: none }
.conn.on { color: var(--green-tx); font-weight: 650 }
.conn.on::before { background: currentColor }

/* Pasos numerados (el proceso sí es una secuencia) */
.step-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 12px }
.step-card > .sc-h { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--line) }
.step-card .sc-no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--font-display); font-weight: 800; font-size: 14px; background: var(--txt); color: var(--bg) }
.step-card .sc-t { font-weight: 700; font-size: 15.5px }
.step-card .sc-d { font-size: 13.5px; color: var(--mut); margin-top: 2px; line-height: 1.5 }
.step-card > .sc-b { padding: 14px 16px }
.drop-zone .dz-ic { width: 40px; height: 40px; stroke-width: 1.5; color: var(--dim); margin-bottom: 8px }
.drop-zone .dz-t { font-weight: 700; color: var(--txt); font-size: 15px }
.drop-zone .dz-s { font-size: 13px; color: var(--dim); margin-top: 4px }
.drop-zone { cursor: pointer }
.file-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border: 1px solid var(--line2); border-radius: var(--r-sm); margin-bottom: 6px; font-size: 14px; background: var(--panel2) }
.file-row > .ic { color: var(--green-tx) }
.file-row .fr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.file-row .fr-size { font-size: 12.5px; color: var(--dim); white-space: nowrap }
.stat-row.sm { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) }
.stat-row.sm .stat { padding: 10px 12px }
.stat-row.sm .st-v { font-size: 28px }
.bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden }
.bar > i { display: block; height: 100%; width: 0; background: var(--red-strong); border-radius: 4px; transition: width .2s }
.log-box { margin-top: 12px; max-height: 220px; overflow-y: auto; font-size: 12px; line-height: 1.55; color: var(--mut); font-family: var(--font-code); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px }
.log-box:empty { display: none }
.log-box .ok { color: var(--green-tx) } .log-box .bad { color: var(--red-tx) }
.notice ul { margin: 6px 0 0 18px; font-size: 13px; color: var(--mut); max-height: 160px; overflow: auto; line-height: 1.55 }
.notice .n-t { font-weight: 700 }
.notice .n-d { font-size: 13.5px; color: var(--mut); margin-top: 2px; line-height: 1.5 }
.notice .n-body { flex: 1; min-width: 0 }
.notice .n-act { margin-left: auto; align-self: center; flex: none }
.notice.info { border-color: rgba(var(--blue-rgb), .45); background: rgba(var(--blue-rgb), .07) }
.notice.info > .ic { color: var(--blue-tx) }
.check-line { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 4px 0 12px; cursor: pointer }
.check-line input { width: 18px; height: 18px; accent-color: var(--red-strong) }
.choice-row { display: flex; gap: 8px; flex-wrap: wrap }
.choice {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line2); background: var(--panel); font-weight: 700; font-size: 15px; text-align: left;
}
.choice small { font-weight: 550; font-size: 12.5px; color: var(--mut) }
.choice:hover { border-color: rgba(var(--ink-rgb), .4) }
.choice.on { border-color: var(--txt); box-shadow: inset 0 0 0 1px var(--txt) }
.choice .rec { color: var(--green-tx); font-size: 12px; font-weight: 700 }
.mini-stepper { display: inline-flex; align-items: center; gap: 6px }
.mini-stepper button { width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--panel2); display: grid; place-items: center; color: var(--txt) }
.mini-stepper button:hover:not([disabled]) { background: var(--raise) }
.mini-stepper button .ic { width: 16px; height: 16px }
.mini-stepper .v, .mini-stepper input { width: 52px; min-height: 36px; text-align: center; font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm) }
.mini-stepper input { border-color: var(--line2); background: var(--panel) }
.mini-stepper .u { font-size: 14px; color: var(--mut); margin-left: 4px }

/* Llaves: barra de ámbito, paneles, hechos, fases */
.scope-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px }
.scope-bar > .picto { width: 32px; height: 32px; stroke-width: 1.7; margin-right: 4px }
.scope-bar .input { width: auto; min-height: 40px; padding: 7px 34px 7px 12px; font-weight: 650 }
.scope-bar .sb-n { font-size: 14px; color: var(--dim); margin-left: 4px }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat }
.panel .sec-h { margin-bottom: 6px }
.panel .sec-h .picto { width: 22px; height: 22px }
.p-desc { font-size: 13.5px; color: var(--mut); margin: 0 0 12px; line-height: 1.55; max-width: 82ch }
.facts { list-style: none; margin-top: 12px; font-size: 13.5px; color: var(--mut); display: flex; flex-direction: column; gap: 5px; line-height: 1.5 }
.facts li { display: flex; gap: 8px; align-items: flex-start }
.facts li > .ic { width: 16px; height: 16px; margin-top: 2px; flex: none }
.t-violet { color: var(--violet-tx) }
.notice.violet { border-color: rgba(var(--violet-rgb), .5); background: rgba(var(--violet-rgb), .07) }
.notice.violet > .ic, .notice.violet .n-t { color: var(--violet-tx) }
.notice.warn .n-t { color: var(--amber-tx) }
.notice.ok .n-t { color: var(--green-tx) }
.notice { align-items: flex-start; flex-wrap: wrap }
.notice .n-body { min-width: 200px }
.phase-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 12px; padding-top: 16px; border-top: 1px solid var(--line) }
.phase-h h3 { font-size: 17px }
.phase-h > .ic { width: 20px; height: 20px; color: var(--dim) }
.phase-h.gold { border-top: 2px solid var(--gold) }
.phase-h.gold > .ic { color: var(--gold) }
[data-theme="mesa"] .phase-h.gold > .ic { color: #9A6B00 }
.phase-h.sub { margin: 18px 0 8px; padding-top: 10px }
.phase-h.sub h3 { font-size: 15px; color: var(--mut) }
.phase-h .g-n { color: var(--dim); font-weight: 600; font-size: 14px }
.entre-list { max-height: 420px; overflow-y: auto; margin: 4px 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm) }
.entre-row { padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 14px }
.entre-row:last-child { border-bottom: none }
.seed-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 14px; background: var(--panel) }
.seed-row:first-child { border-top: 1px solid var(--line) }
.seed-row.tied { background: rgba(var(--amber-rgb), .08) }
.seed-row .sr-pos { width: 28px; font-family: var(--font-display); font-weight: 800; color: var(--dim); font-variant-numeric: tabular-nums }
.seed-row .sr-pos.p1 { color: var(--gold) } .seed-row .sr-pos.p2 { color: var(--silver) } .seed-row .sr-pos.p3 { color: var(--bronze) }
[data-theme="mesa"] .seed-row .sr-pos.p1 { color: #9A6B00 } [data-theme="mesa"] .seed-row .sr-pos.p2 { color: #6B7280 } [data-theme="mesa"] .seed-row .sr-pos.p3 { color: #9A5525 }
.tbl .picto { width: 18px; height: 18px; stroke-width: 1.9 }
.seed-list { margin-bottom: 4px; border-radius: var(--r-sm); overflow: hidden }
.match-list { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); overflow: hidden }
.m-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 14px }
.m-row:last-child { border-bottom: none }
.m-row .m-no { min-width: 26px; color: var(--dim); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px }
.m-row .m-st { width: 18px; display: grid; place-items: center; color: var(--dim) }
.m-row .m-st .ic { width: 17px; height: 17px }
.m-row.done .m-st { color: var(--green-tx) }
.m-row.live { background: rgba(var(--red-rgb), .05) }
.m-row .m-rd { font-size: 12.5px; font-weight: 700; color: var(--mut) }
.m-row .m-hm { font-family: var(--font-display); font-weight: 750; color: var(--blue-tx); font-variant-numeric: tabular-nums; min-width: 44px }
.m-row .m-teams { flex: 1; min-width: 220px }
.m-row .m-teams .vs { color: var(--dim); margin: 0 5px }
.m-row .m-teams .w { font-weight: 750 }
.m-row .m-sc { font-family: var(--font-display); font-weight: 850; font-size: 15.5px; margin: 0 2px; font-variant-numeric: tabular-nums }
.m-row .m-where { font-size: 13px; color: var(--mut); white-space: nowrap }
.m-row .m-res { white-space: nowrap }
.cov-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: var(--panel2); cursor: pointer; font-size: 14px }
.cov-row.on { border-color: rgba(var(--amber-rgb), .6); background: rgba(var(--amber-rgb), .09) }
.cov-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--red-strong); flex: none }
.cov-row .cov-arena { width: 70px; min-height: 36px; padding: 5px 8px; text-align: center }
.tcode { font-family: var(--font-code); font-size: 12px; font-weight: 700; color: var(--blue-tx); background: rgba(var(--blue-rgb), .1); border: 1px solid rgba(var(--blue-rgb), .28); padding: 0 6px; border-radius: var(--r-xs); margin-right: 6px; white-space: nowrap }

/* Configuración rápida de retos (lista de eventos) */
.qc-list { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 6px }
.qc-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 4px; border-bottom: 1px solid var(--line) }
.qc-row:last-child { border-bottom: none }
.qc-row.off { opacity: .55 }
.qc-row > .picto { width: 28px; height: 28px; stroke-width: 1.7 }
.qc-row .qc-name { flex: 1; min-width: 150px }
.qc-row .qc-name b { display: block; font-size: 15px }
.qc-row .qc-name small { font-size: 12.5px; color: var(--dim) }
.qc-row .qc-ctl { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer }
.qc-row .qc-lbl { font-size: 12px; font-weight: 600; color: var(--dim); white-space: nowrap }
.qc-row .qc-note { flex-basis: 100%; font-size: 12.5px; padding-left: 42px }

/* ── 14. Avisos, ventanas y estado de conexión ──────────────────────────── */
.toast-wrap { position: fixed; top: 72px; right: 14px; z-index: 450; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 28px)) }
.toast {
  display: flex; align-items: flex-start; gap: 10px; background: var(--panel); color: var(--txt);
  border: 1px solid var(--line2); border-left: 4px solid var(--blue); border-radius: var(--r-md);
  padding: 12px 14px; box-shadow: var(--shadow-pop); font-size: 14px; line-height: 1.4;
  animation: rrToastIn .28s var(--ease-enter) both;
}
.toast.success { border-left-color: var(--green) }
.toast.warn { border-left-color: var(--hazard) }
.toast.error { border-left-color: var(--red) }
@keyframes rrToastIn { from { transform: translateY(-8px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (max-width: 760px) { .toast-wrap { top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); right: 12px; left: 12px; max-width: none } }

.modal-overlay {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 18px;
  background: var(--overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: rrFade .18s var(--ease-standard) both;
}
.modal-overlay > .card { box-shadow: var(--shadow-pop); border-color: var(--line2); animation: rrDialogIn .26s var(--ease-enter) both; position: relative; overscroll-behavior: contain }
.modal-overlay > .card:focus { outline: none }
/* Con una ventana abierta, en pantallas táctiles la página de atrás no se desplaza */
@media (hover: none) { html:has(.modal-overlay) { overflow: hidden } }
.modal-x { position: absolute; top: 10px; right: 10px }
@keyframes rrFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rrDialogIn { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }

.rr-update-bar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 320; display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 32px); padding: 10px 12px 10px 16px; border-radius: var(--r-md); background: var(--panel);
  border: 1px solid var(--line2); color: var(--txt); font-size: 14px; box-shadow: var(--shadow-pop);
}
.rr-update-bar .btn { min-height: 34px; padding: 6px 14px; font-size: 13px; width: auto }

.offline-indicator {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 9000;
  max-width: calc(100% - 24px); border-radius: var(--r-pill); font-size: 13.5px; font-weight: 650; pointer-events: none;
  background: var(--panel); color: var(--txt); border: 1px solid var(--line2); box-shadow: var(--shadow-pop);
}
.offline-indicator .oi-open {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: inherit;
  font: inherit; color: inherit; white-space: nowrap; max-width: 100%;
}
.offline-indicator .oi-open > span { overflow: hidden; text-overflow: ellipsis }
.offline-indicator button.oi-open { pointer-events: auto; cursor: pointer; padding-right: 10px }
.offline-indicator button.oi-open:hover { background: rgba(var(--ink-rgb), .05) }
.offline-indicator .ic { width: 17px; height: 17px; flex: none }
.offline-indicator .ic:last-child:not(:first-child) { width: 15px; height: 15px; color: var(--dim) }
.offline-indicator.online { color: var(--green-tx); border-color: rgba(var(--green-rgb), .5) }
.offline-indicator.offline { border-color: var(--hazard) }
.offline-indicator.offline .ic:first-child { color: var(--amber-tx) }
.offline-indicator.syncing, .offline-indicator.pending { color: var(--amber-tx); border-color: rgba(var(--amber-rgb), .5) }
.offline-indicator.syncing .ic:first-child { animation: rrSpin 1s linear infinite }
@keyframes rrSpin { to { transform: rotate(360deg) } }
/* Detalle de la cola sin sincronizar */
.oq-h { display: flex; align-items: center; gap: 10px; font-size: 19px; margin: 0 34px 8px 0 }
.oq-h .ic { width: 22px; height: 22px; color: var(--dim); flex: none }
.oq-list { list-style: none; margin: 0 0 14px; padding: 0; max-height: 46vh; overflow-y: auto; display: grid; gap: 8px }
.oq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); padding: 12px 14px; display: grid; gap: 5px; justify-items: start }
.oq-item.bad { border-color: rgba(var(--red-rgb), .5) }
.oq-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; width: 100%; font-size: 14px }
.oq-data { font-family: var(--font-code); font-size: 12.5px; color: var(--dim); word-break: break-all }
.oq-meta { font-size: 12.5px; color: var(--mut) }
.oq-err { font-size: 13px; color: var(--red-tx); word-break: break-word }
.oq-note { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; color: var(--amber-tx); line-height: 1.45 }
.oq-note .ic { width: 15px; height: 15px; flex: none; margin-top: 2px }
.oq-item .btn { margin-top: 4px }
.oq-empty { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 14px }
.oq-empty .ic { width: 18px; height: 18px; color: var(--green-tx); flex: none }
.oq-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap }
@media (max-width: 520px) { .oq-acts .btn { flex: 1 1 calc(50% - 4px) } }
body[data-screen="public"] .offline-indicator { bottom: calc(84px + env(safe-area-inset-bottom)) }
.pwa-install-banner { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-md); padding: 12px 18px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-pop); z-index: 9000; max-width: 360px }

.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9999 }

/* ── 15. Utilidades y movimiento mínimo ─────────────────────────────────── */
.muted { color: var(--mut) } .dim { color: var(--dim) }
.t-red { color: var(--red-tx) } .t-green { color: var(--green-tx) } .t-amber { color: var(--amber-tx) } .t-blue { color: var(--blue-tx) } .t-gold { color: var(--gold) }
.row { display: flex; align-items: center; gap: 8px } .wrap { flex-wrap: wrap } .grow { flex: 1; min-width: 0 }
.stack > * + * { margin-top: 10px }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
@keyframes sp-tab-in { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
#sp-body.sp-in { animation: sp-tab-in .17s var(--ease-enter) both }
.rr-idle .live-dot { animation-play-state: paused }

/* Impresión (calendario para pegar en la pared, resultados para la mesa de premiación): papel blanco y
   tinta negra con cualquier ambiente, sin botones ni barras, todo desplegado y sin partir filas. */
/* ── 16. Ayuda contextual (js/help.js) ──────────────────────────────────── */
/* Burbuja con «qué hace» y «cómo funciona»: superficie invertida respecto al ambiente, para que se lea de un vistazo. */
.help-tip {
  position: fixed; z-index: 9430; top: 0; left: 0; width: max-content; max-width: min(340px, calc(100vw - 16px));
  padding: 11px 14px 12px; border-radius: var(--r-md); background: var(--tip-bg); color: var(--tip-txt);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: 13.5px; line-height: 1.45; font-weight: 400; text-align: left;
  letter-spacing: 0; text-transform: none; white-space: normal; pointer-events: none; animation: rrTipIn .14s var(--ease-enter) both;
}
.help-tip[hidden] { display: none }
.help-tip::before { content: ""; position: absolute; left: var(--ax, 24px); width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg) }
.help-tip[data-side="bottom"]::before { top: -5px }
.help-tip[data-side="top"]::before { bottom: -5px }
.help-tip[data-side="over"]::before { display: none }
.help-tip p { margin: 0 }
.help-tip p + p { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--tip-line) }
.help-tip .ht-l { display: block; margin-bottom: 1px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tip-dim) }
.help-tip .ht-what { font-weight: 650 }
@keyframes rrTipIn { from { opacity: 0; transform: translateY(3px) } to { opacity: 1; transform: none } }

/* Botón «?» del encabezado y de la portada */
.help-btn[aria-pressed="true"] { color: var(--txt); background: rgba(var(--ink-rgb), .1); border-color: var(--line2) }
.login-tools { display: flex; align-items: center; gap: 6px }

/* Modo ayuda: una lámina recibe los toques (nada de la página se ejecuta), un marco señala el control explicado
   y un aviso fijo dice cómo salir. */
.help-glass {
  position: fixed; inset: 0; z-index: 9400; cursor: help; background: transparent; box-shadow: inset 0 0 0 3px var(--focus);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.help-ring { position: fixed; z-index: 9410; pointer-events: none; border: 3px solid var(--focus); border-radius: var(--r-md) }
.help-ring[hidden] { display: none }
.help-bar {
  position: fixed; z-index: 9420; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom));
  width: min(900px, calc(100% - 20px)); display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  padding: 10px 12px 10px 14px; border-radius: var(--r-md); background: var(--panel); color: var(--txt);
  border: 2px solid var(--focus); box-shadow: var(--shadow-pop); font-size: 14px;
}
.help-bar[data-pos="top"] { bottom: auto; top: calc(10px + env(safe-area-inset-top)) }
.help-bar .hb-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--focus); color: var(--focus-ink); flex: none }
.help-bar .hb-ic .ic { width: 20px; height: 20px }
.help-bar .hb-txt { flex: 1 1 210px; min-width: 0; display: grid; gap: 1px; line-height: 1.35 }
.help-bar .hb-txt span { color: var(--mut); font-size: 13px }
.help-bar .hb-hover { display: none; align-items: center; gap: 7px; font-size: 13px; color: var(--mut); cursor: pointer }
.help-bar .hb-hover input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue-strong) }
@media (hover: hover) and (pointer: fine) { .help-bar .hb-hover { display: inline-flex } }
.help-bar .btn { width: auto; min-height: 36px; margin-left: auto }
.help-bar .icon-btn { width: 36px; height: 36px }
.help-bar .hb-short { display: none }
@media (max-width: 600px) {
  .help-bar { flex-wrap: nowrap; gap: 8px; padding: 8px 8px 8px 10px }
  .help-bar .hb-ic { display: none }
  .help-bar .hb-long { display: none }
  .help-bar .hb-short { display: inline }
  .help-bar .hb-txt { flex: 1 1 auto }
  .help-bar .hb-txt span { font-size: 12.5px }
  .help-bar .btn { margin-left: 0; padding-inline: 12px }
}

@media print {
  :root, [data-theme="arena"], [data-theme="mesa"] {
    color-scheme: light;
    --bg: #fff; --bg-rgb: 255,255,255; --panel: #fff; --panel2: #fff; --raise: #f3f4f6; --line: #d1d5db; --line2: #9ca3af;
    --txt: #000; --mut: #374151; --dim: #4b5563; --fg: #000; --ink-rgb: 0,0,0; --tape: #000;
    --red-tx: #9E2129; --blue-tx: #1A44BF; --green-tx: #0B5C34; --amber-tx: #6F4A00; --violet-tx: #5B21B6;
    --logo-robo: #373536; --logo-rave: #C1343D;
  }
  html, body { background: #fff !important; color: #000 }
  .tb-tools, .mode-tabs, .rail, .divrow, footer, #sp-topbar-tabs, .toast-wrap, .offline-indicator, .rr-update-bar,
  .cfg-savebar, .modal-overlay, .topbar button, .adm-head .btn, .adm-head .ah-act, .adm-head .row, .meta-line button,
  .tbl .acts, .pwa-install-banner, .help-tip, .help-glass, .help-ring, .help-bar, .help-btn { display: none !important }
  .meta-line:has(> button) { display: none !important }
  .topbar { position: static !important; border-bottom: 1px solid #9ca3af; background: #fff !important }
  details.grp[open] > .tbl-box, .sch-hour { content-visibility: visible }
  .tbl-box { overflow: visible !important; max-height: none !important }
  .tbl, .sch-tbl { white-space: normal; min-width: 0 }
  .tbl th { position: static; background: #f3f4f6 }
  .tbl thead { display: table-header-group }
  .tbl tr, .lb-row, .mini-row { break-inside: avoid }
  details.grp > summary, .sch-hour-h { break-after: avoid }
  .chip, .status-pill { border: 1px solid #9ca3af; background: none !important }
  .live-pill, .live-badge { background: none !important; color: #000 !important; border: 1px solid #000 }
  * { animation: none !important; transition: none !important; box-shadow: none !important }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
}