/* ═══════════════════════════════════════════════════════════════════════════
   GRID · hoja de MARCA (landing + barra + pie)
   ---------------------------------------------------------------------------
   Se carga DESPUÉS de sistema.css y solo pisa tres cosas: la barra superior, el
   pie y la portada. Todo lo que es la aplicación del torneo —tablero, tabla,
   horario, mesa— sigue gobernado por sistema.css y no se toca. Por eso casi
   todo aquí cuelga de `body.ruta-inicio`.

   Tres decisiones dan el carácter, y no son el color:
     1. Dos familias con trabajos distintos: Montserrat habla, JetBrains Mono
        instrumenta (rótulos, cifras, metadatos). Wild Wolf es la firma y
        aparece contadas veces.
     2. Radio 0 en todo. Rectángulos con filete de 1px, sin sombras.
     3. Cuadrados, no círculos: el punto de estado es un cuadrado de 8px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wild Wolf — subconjunto latino, 101 KB. `swap` para que no bloquee jamás el
   titular: si tarda, se lee en Montserrat y luego cambia. */
@font-face {
  font-family: 'Wild Wolf';
  src: url('img/wildwolf.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --g-negro:      #0b0c10;
  --g-sup:        #0d0e12;
  --g-sup-baja:   #111318;
  --g-sup-alta:   #171920;
  --g-filete:     #232631;
  --g-filete-2:   #323644;
  --g-tinta:      #e3e1ec;
  --g-tinta-2:    #9498a8;
  --g-rojo:       #d32f2f;   /* RELLENO: botón, cuadrados, reglas */
  --g-rojo-osc:   #b71c1c;
  --g-rojo-tx:    #e53935;   /* TEXTO: 4,6:1 sobre el negro. El #d32f2f da 3,9 y no
                                pasa AA; el #ef5350 pasaba pero tiraba a rosa. */
  --g-cielo:      #38bdf8;
  --g-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Existía escrito como `var(--g-sans, inherit)` en dos sitios y NUNCA estuvo definido:
     el respaldo se tragaba el fallo sin avisar y esos dos sitios salían en Inter mientras
     el botón de al lado salía en Montserrat. Es la mezcla de letras que se ve en el
     acceso. Se define donde vive su pareja. */
  --g-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  --g-firma: 'Wild Wolf', 'Montserrat', sans-serif;
}

/* ─── Rótulo técnico. El recurso que más se repite en todo el sistema. ───── */
.g-rot {
  font-family: var(--g-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--g-tinta-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.g-rot::before {                       /* el cuadrado, no un círculo */
  content: ''; width: 7px; height: 7px; background: var(--g-rojo); flex: none;
}
.g-rot--limpio::before { display: none; }
.g-rot em { font-style: normal; color: var(--g-rojo-tx); }

/* ─── BARRA (global: se ve en todas las rutas) ───────────────────────────── */
body .barra {
  background: rgba(11,12,16,.94);
  border-bottom: 1px solid var(--g-filete);
  backdrop-filter: blur(12px);
}
/* El pincel necesita cuerpo: por debajo de ~34px las tres garras que hacen de «I»
   se empastan y el logotipo deja de leerse como GRID. */
.marca-logo { height: 38px; width: auto; display: block; }
@media (max-width: 600px) { .marca-logo { height: 30px; } }

/* Grupos de navegación: en la portada se ven los anclajes de la landing; dentro
   de la aplicación, las rutas. `body.ruta-inicio` ya lo pone app.js. */
.nav-landing { display: none; }
body.ruta-inicio .nav-landing { display: flex; }
body.ruta-inicio .nav-app     { display: none; }

.nav-landing a {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--g-tinta-2); text-decoration: none;
  padding: 10px 14px; border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.nav-landing a:hover { color: #fff; border-bottom-color: var(--g-rojo); }
/* En el celular estos tres destinos son la barra inferior. Dejarlos también arriba
   desbordaba la barra a lo ancho (553 px de contenido en una pantalla de 375). */
@media (max-width: 780px) { body.ruta-inicio .nav-landing { display: none; } }

/* El botón de acceso vive en la misma fila que el selector de idioma: si uno es
   cuadrado y el otro redondeado, la barra se ve montada de dos sistemas. */
body .barra .btn { border-radius: 0; }
body .barra .btn-primario { background: var(--g-rojo); border-color: var(--g-rojo); }
body .barra .btn-primario:hover { background: var(--g-rojo-osc); border-color: var(--g-rojo-osc); }

/* Selector de idioma */
.g-idioma { display: flex; border: 1px solid var(--g-filete-2); }
.g-idioma button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--g-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  color: var(--g-tinta-2); padding: 7px 10px; min-height: 34px;
  transition: background .16s ease, color .16s ease;
}
.g-idioma button:hover { color: #fff; }
.g-idioma button[aria-pressed="true"] { background: var(--g-rojo); color: #fff; }

/* ─── LANDING ────────────────────────────────────────────────────────────── */
body.ruta-inicio { background: var(--g-negro); color: var(--g-tinta); }
body.ruta-inicio .marco,
body.ruta-inicio .contenedor { background: transparent; }

.lp { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
@media (max-width: 640px) { .lp { padding-inline: 18px; } }

/* Hero — la imagen va A SANGRE, de borde a borde, sin marco ni márgenes: es lo
   primero que se ve y un recuadro flotando la volvía una ilustración más.
   Formato 21:9 fijo, así que al estrechar la pantalla lo que encoge es el ALTO y
   nunca aparecen franjas a los lados. `min-height` para que en un teléfono no se
   quede en una tira de 160 px donde el logotipo no se lee.
   Sigue sin llevar texto encima: en móvil el texto sobre foto siempre pierde. */
.lp-hero { padding-top: 0; }
.lp-hero-img {
  background: #07080a; overflow: hidden;
  border-bottom: 1px solid var(--g-filete);
  animation: lp-entra .6s cubic-bezier(.22,.61,.36,1) both;
}
.lp-hero-img img {
  width: 100%; display: block;
  aspect-ratio: 21 / 9; min-height: 210px; height: auto;
  object-fit: cover; object-position: center 46%;
}
@media (max-width: 640px) { .lp-hero-img img { min-height: 240px; } }
.lp-hero-tx { margin-top: 46px; }
@media (max-width: 640px) { .lp-hero-tx { margin-top: 32px; } }

.lp-titular {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
  font-size: clamp(30px, 5.2vw, 58px); line-height: 1.02; color: #f1f1f5;
  margin: 0;
}
/* La firma: segunda línea, Wild Wolf y roja. Aparece dos veces en toda la
   página — es lo que la hace pegar. */
/* Wild Wolf es la mitad que hace que la marca pegue: va claramente por encima de
   la Montserrat que lleva arriba, no a la par. Su caja de texto es más pequeña que
   su dibujo, de ahí el interlineado corto y el margen negativo. */
.lp-firma {
  display: block; font-family: var(--g-firma); font-weight: 400;
  color: var(--g-rojo-tx); text-transform: none; letter-spacing: 0;
  font-size: clamp(54px, 10.5vw, 122px); line-height: .88; margin-top: -2px;
}

.lp-bajada {
  color: var(--g-tinta-2); font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65; max-width: 62ch; margin: 18px 0 0;
}

/* Botones */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 26px;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--g-filete-2); background: var(--g-sup-baja);
  color: var(--g-tinta); cursor: pointer; text-decoration: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.lp-btn:hover { border-color: #fff; color: #fff; }
.lp-btn:active { transform: scale(.98); }
.lp-btn--rojo { background: var(--g-rojo); border-color: var(--g-rojo); color: #fff; }
.lp-btn--rojo:hover { background: var(--g-rojo-osc); border-color: var(--g-rojo-osc); }

/* Banda de datos bajo el hero — la retícula técnica de la referencia, pero con
   lo que esta herramienta SÍ hace. Nada de latencias ni checksums inventados. */
.lp-banda {
  border-top: 1px solid var(--g-filete); border-bottom: 1px solid var(--g-filete);
  background: var(--g-sup); margin-top: 44px;
}
/* `padding-block`, no el atajo `padding`: `padding: 20px 0` pisaba el margen lateral
   que trae `.lp` y en el celular la banda salía pegada a los dos bordes. */
.lp-banda-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-block: 20px; }
@media (max-width: 780px) { .lp-banda-in { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.lp-dato { border-left: 2px solid var(--g-filete-2); padding-left: 14px; }
.lp-dato:first-child { border-left-color: var(--g-rojo); }
.lp-dato b {
  display: block; font-family: var(--g-mono); font-size: 13px; font-weight: 700;
  color: var(--g-tinta); margin-top: 5px; letter-spacing: .02em;
}

/* Secciones */
/* Igual que en la banda: `padding-block`. `.lp-sec` va SIEMPRE junto a `.lp`, y el
   atajo `padding` le borraba el margen lateral. Se nota solo por debajo de 1180px,
   que es justo donde importa. */
.lp-sec { padding-block: 76px; }
@media (max-width: 640px) { .lp-sec { padding-block: 54px; } }
.lp-sec-cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-bottom: 1px solid var(--g-filete); padding-bottom: 20px; margin-bottom: 40px;
}
.lp-h2 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; font-size: clamp(22px, 2.6vw, 32px); color: #f1f1f5; margin: 8px 0 0;
}

/* Tarjetas cuadradas. El hover solo cambia el filete: nada se mueve de sitio. */
.lp-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 780px) { .lp-rejilla { grid-template-columns: 1fr; } }
.lp-card {
  border: 1px solid var(--g-filete); background: #0b0c11; padding: 30px;
  transition: border-color .2s ease;
}
.lp-card:hover { border-color: #3a3f50; }
.lp-card-n { display: flex; align-items: center; justify-content: space-between; }
.lp-card-n span:first-child { font-family: var(--g-mono); font-size: 11px; font-weight: 700; color: var(--g-rojo-tx); letter-spacing: .12em; }
.lp-card-n span:last-child  { font-family: var(--g-mono); font-size: 11px; color: var(--g-tinta-2); letter-spacing: .12em; text-transform: uppercase; }
.lp-card h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 18px; letter-spacing: -.01em; color: #fff; margin: 18px 0 0;
}
.lp-card p { color: var(--g-tinta-2); font-size: 14.5px; line-height: 1.65; margin: 10px 0 0; }

/* Panel incrustado: la caja más oscura dentro de la tarjeta con el dato vivo.
   Es el patrón que hace que se lea «instrumento». */
.lp-visor {
  margin-top: 22px; background: #08090c; border: 1px solid #1a1c24; padding: 14px;
  font-family: var(--g-mono); font-size: 11.5px;
}
.lp-visor-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lp-visor-f + .lp-visor-f { margin-top: 8px; }
.lp-visor .k { color: var(--g-tinta-2); letter-spacing: .1em; text-transform: uppercase; }
.lp-visor .v { color: #fff; font-weight: 700; }
.lp-visor .v-rojo { color: var(--g-rojo-tx); font-weight: 700; }
.lp-visor .v-cielo { color: var(--g-cielo); font-weight: 700; }

/* Pasos de «cómo se usa» */
.lp-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--g-filete); }
@media (max-width: 900px) { .lp-pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lp-pasos { grid-template-columns: 1fr; } }
.lp-paso { padding: 26px 22px; border-right: 1px solid var(--g-filete); }
.lp-paso:last-child { border-right: 0; }
@media (max-width: 900px) { .lp-paso { border-bottom: 1px solid var(--g-filete); } }
.lp-paso-n { font-family: var(--g-mono); font-size: 12px; font-weight: 700; color: var(--g-rojo-tx); letter-spacing: .12em; }
.lp-paso h4 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; color: #fff; margin: 12px 0 0; text-transform: uppercase; letter-spacing: -.01em; }
.lp-paso p { color: var(--g-tinta-2); font-size: 13.5px; line-height: 1.6; margin: 8px 0 0; }

/* Llamado final */
.lp-cta {
  border: 1px solid var(--g-filete); background: var(--g-sup-baja);
  padding: 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.lp-cta h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 28px); color: #fff; margin: 10px 0 0; max-width: 22ch;
}

/* ─── PIE ────────────────────────────────────────────────────────────────── */
.lp-pie {
  border-top: 1px solid #1a1c24; background: #07080a; margin-top: 20px;
  padding: 34px 0 calc(34px + env(safe-area-inset-bottom));
}
.lp-pie-in { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.lp-pie-logo { height: 34px; width: auto; opacity: .95; }
.lp-pie small { font-family: var(--g-mono); font-size: 11px; color: #7b8291; letter-spacing: .06em; }
.lp-by { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.lp-by span { font-family: var(--g-mono); font-size: 11px; color: var(--g-tinta-2); letter-spacing: .16em; text-transform: uppercase; }
.lp-by img { height: 22px; width: auto; }
.lp-by:hover span { color: #fff; }

/* ─── NAVEGACIÓN INFERIOR (móvil) ────────────────────────────────────────
   Al estilo del Portal: cuatro destinos, pulgar abajo. Solo en la portada y
   solo en pantalla estrecha. */
.lp-tabbar { display: none; }
@media (max-width: 780px) {
  body.ruta-inicio .lp-tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(11,12,16,.97); border-top: 1px solid var(--g-filete);
    backdrop-filter: blur(12px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.ruta-inicio .lp-pie { padding-bottom: 96px; }
}
.lp-tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 58px; text-decoration: none; color: var(--g-tinta-2);
  font-family: var(--g-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  border-top: 2px solid transparent; transition: color .16s ease, border-color .16s ease;
}
.lp-tabbar a i { font-size: 17px; line-height: 1; }
.lp-tabbar a.on { color: #fff; border-top-color: var(--g-rojo); }

/* ─── MOVIMIENTO ─────────────────────────────────────────────────────────
   Sutil y con causa: cada bloque entra una vez al aparecer, nada se repite en
   bucle y nada se mueve al pasar el ratón. */
@keyframes lp-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Se esconden SOLO cuando el observador ya está montado (`html.rev-on`). Sin esa
   condición, cualquier fallo de JavaScript dejaba media landing invisible para
   siempre y sin un solo error en consola: el modo de fallo correcto es «se ve
   todo de golpe», nunca «no se ve nada». */
html.rev-on .lp-rev { opacity: 0; }
html.rev-on .lp-rev.visto { animation: lp-entra .55s cubic-bezier(.22,.61,.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  .lp-rev, .lp-rev.visto, .lp-hero-img { animation: none !important; opacity: 1 !important; transform: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ─── PANTALLA DE CARGA · la garra que se rellena ──────────────────────────
   Aparece SOLO si la carga se demora: el velo nace transparente y su animación
   de entrada arranca a los 350 ms. En una conexión decente el navegador ya
   terminó y el velo se retira sin haberse visto nunca — que es justo lo que se
   quiere: un fogonazo de pantalla negra es peor que no tener pantalla de carga.

   La garra es un PNG usado como MÁSCARA (`mask-image`): el archivo solo aporta
   la silueta, el color lo pone el CSS. Así el relleno es una caja roja que sube
   bajo el recorte de la garra, sin SVG y sin una sola línea de JavaScript. */
#gridCarga {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center; gap: 18px;
  background: var(--g-negro);
  opacity: 0;
  animation: gc-aparece .28s ease .35s forwards;
}
#gridCarga.gc-fin { animation: gc-sale .3s ease forwards; pointer-events: none; }
@keyframes gc-aparece { to { opacity: 1; } }
@keyframes gc-sale    { to { opacity: 0; visibility: hidden; } }

.gc-caja { display: grid; justify-items: center; gap: 16px; }
.gc-garra { position: relative; width: 116px; aspect-ratio: 300 / 338; }
/* Las dos capas comparten máscara: abajo la garra apagada, encima la roja que sube. */
.gc-garra::before, .gc-garra::after {
  content: ''; position: absolute; inset: 0;
  -webkit-mask: url('img/garra-carga.png?v=20260911b') no-repeat center / contain;
          mask: url('img/garra-carga.png?v=20260911b') no-repeat center / contain;
}
.gc-garra::before { background: #20242f; }
.gc-garra::after {
  background: linear-gradient(180deg, var(--g-rojo-tx), var(--g-rojo));
  animation: gc-llena 1.5s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* `inset(arriba derecha abajo izquierda)`. Para que SUBA hay que encoger el recorte
   de ABAJO; encoger el de arriba la llenaría al revés. Luego el nivel baja solo. */
@keyframes gc-llena {
  0%        { clip-path: inset(0 0 100% 0); }   /* vacía */
  55%, 70%  { clip-path: inset(0 0 0 0); }      /* llena */
  100%      { clip-path: inset(100% 0 0 0); }   /* el nivel cae */
}
.gc-tx {
  font-family: var(--g-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--g-tinta-2);
}
@media (prefers-reduced-motion: reduce) {
  #gridCarga { animation: none; opacity: 1; }
  #gridCarga.gc-fin { display: none; }
  .gc-garra::after { animation: none; clip-path: none; opacity: .85; }
}

/* ─── ANCLAJES ────────────────────────────────────────────────────────────
   La barra es pegajosa: sin este margen el título de la sección queda debajo. */
body.ruta-inicio .lp-sec { scroll-margin-top: 84px; }

/* ─── CONTACTO ─────────────────────────────────────────────────────────── */
.lp-contacto { border: 1px solid var(--g-filete); background: var(--g-sup); padding: 40px 34px; }
@media (max-width: 640px) { .lp-contacto { padding: 28px 20px; } }
.lp-contacto p { color: var(--g-tinta-2); font-size: 15px; line-height: 1.7; margin: 12px 0 0; max-width: 62ch; }
.lp-nota {
  font-family: var(--g-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #7b8291; margin: 14px 0 0;
}
.lp-btn[disabled] { opacity: .45; cursor: not-allowed; }
.lp-btn[disabled]:hover { border-color: var(--g-filete-2); color: var(--g-tinta-2); }

/* Fila de botones del hero */
.lp-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ─── La landing manda en su propio ancho ─────────────────────────────────
   `.contenedor` y `.marco` traen el ancho y el margen de la APLICACIÓN. En la
   portada estorban: la banda de datos va de borde a borde y los márgenes los
   pone `.lp`. Solo en `ruta-inicio`; dentro de un torneo todo sigue igual. */
body.ruta-inicio .marco,
body.ruta-inicio main.contenedor { max-width: none; padding: 0; }
body.ruta-inicio #p-inicio.panel { padding: 0 0 20px; }

/* La firma dentro de un título de sección: la misma letra, a la escala del h2.
   Con el tamaño del hero (78px) se comía el rótulo que tiene encima. */
.lp-h2 .lp-firma { font-size: clamp(38px, 4.6vw, 62px); margin-top: -2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA APLICACIÓN, EN EL MISMO SISTEMA
   ───────────────────────────────────────────────────────────────────────────
   Hasta aquí la portada era oscura y cuadrada y el torneo seguía siendo blanco
   y redondeado: dos productos pegados con cinta. Se unifica reasignando los
   TOKENS de `sistema.css`, no reescribiéndolo. Sus 58 KB están escritos contra
   `--papel`, `--tinta`, `--linea`…, así que cambiar el significado de esas seis
   variables cambia tablas, tarjetas, botones, chips y modales de una vez.

   Lo que NO se toca: la estructura, los nombres de clase y el HTML. Un rediseño
   que además mueve el marcado es un rediseño que no se puede revertir.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  /* Marca */
  --marca: #d32f2f;                 /* relleno de acción */
  --sobre-marca: #ffffff;
  --marca-osc: var(--g-rojo-tx);    /* rojo para TEXTO — ahora sobre oscuro */
  --marca-osc-2: #b71c1c;           /* hover del botón primario */
  --marca-clara: var(--g-rojo-tx);
  --marca-suave: #1d1114;
  --azul: #38bdf8;
  --azul-osc: #38bdf8;              /* azul para TEXTO — sobre oscuro se aclara */
  --azul-suave: #0e1a22;
  --marino: #0d0e12;                /* la columna lateral deja de ser un bloque azul */

  /* Superficies */
  --papel:    #0f1015;
  --fondo:    #0b0c10;
  --hundido:  #0d0e12;
  --hundido-2:#15171f;

  /* Tinta */
  --tinta:   #e3e1ec;
  --tinta-2: #9498a8;
  --tinta-3: #7b8291;
  --linea:        #232631;
  --linea-fuerte: #323644;

  /* Estados. Los `-bg` eran pasteles pensados para papel blanco: sobre negro se
     leen como manchas. Aquí son tintes casi negros con su filete. */
  --ok: #10b981;    --ok-tx: #34d399;  --ok-bg: #0c1a15;   --ok-linea: #1e4a39;
  --alerta: #fbbf24; --alerta-bg: #1c1608; --alerta-linea: #4a3a12;
  --error: #ef5350;  --error-bg: #1e1113;  --error-linea: #4a1f20;
  --vivo: #d32f2f;

  /* Forma: cuadrado. El sistema entero es de esquina viva; la píldora se queda
     solo donde de verdad es una píldora (puntos y avatares circulares). */
  --r-sm: 0; --r: 0; --r-md: 0; --r-lg: 0; --r-xl: 0;

  /* La elevación es el filete, no la sombra: sobre negro una sombra no se ve y
     solo ensucia el borde. */
  --sombra: none;
  --sombra-alta: 0 24px 60px rgba(0,0,0,.6);
  --sombra-activa: none;
}

html, body { background: var(--fondo); color-scheme: dark; }

/* La barra de scroll de la PÁGINA la pinta `<html>`: sin esto queda una franja
   blanca al lado de una aplicación negra. */
html { scrollbar-color: #2b2f3c var(--fondo); }

/* Lo que `sistema.css` dejó con color fijo en vez de token. Cada uno se veía
   como un parche blanco en cuanto el fondo pasó a negro. */
.barra { border-bottom: 1px solid var(--linea); }
.lateral { border-right: 1px solid var(--linea); }
.tarjeta, .caja, .panel-cab, table, thead, tbody, tr, th, td { border-color: var(--linea); }
thead th { background: var(--hundido); color: var(--tinta-2); }
tbody tr:hover { background: rgba(255,255,255,.03); }

/* El arte del Club dentro de la aplicación: fuera. GRID se le enseña a clubes
   que no son Promesas y el lema de uno no pinta en el panel de otro. */
.lat-arte, .acc-arte { display: none !important; }

/* ─── `--marino` hacía DOS trabajos ───────────────────────────────────────
   Era a la vez el fondo oscuro (barra, columna, cabeceras de tarjeta) y el
   color del TEXTO fuerte sobre papel blanco. Al invertir el tema, lo segundo
   se volvió tinta negra sobre fondo negro: los títulos de sección seguían ahí,
   ilegibles, y en la captura parecía que faltaban.

   Los fondos ya llevan su `color:#fff` al lado y no necesitan nada. Estos son
   los catorce sitios donde `--marino` era TEXTO. Se fijan a mano y no vía token
   porque `app.js:279` reescribe `--marino` cuando el club configura su color
   secundario: cualquier arreglo que dependa de esa variable dura hasta que
   alguien elija un color en la configuración. */
.s-title, .panel-cab h2, .modal h3, .reglas-cab b, .herr h3, .evento h3,
.portada-tx h2, .portada-tit, .m-marcador, .banda-cuando b, .banda .nm,
.det-dato b, .campeon { color: #f1f1f5; }
.campeon { background: #1d1114; border-color: var(--marca); }

/* ═══ FIXTURE · la cuadrícula de la jornada ═══════════════════════════════
   Se usa de pie, junto a la cancha y con el teléfono en una mano. De ahí que
   la hora y la fila de canchas se queden pegadas, que cada partido sea una
   ficha con su estado a la izquierda y que un hueco diga «libre» en vez de un
   guion: un guion no dice si sobra la cancha o si falta programar algo. */
.hz-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.hz-resumen { display: flex; gap: 0; border: 1px solid var(--linea); }
.hz-kpi {
  padding: 10px 18px; border-right: 1px solid var(--linea); min-width: 84px;
}
.hz-kpi:last-child { border-right: 0; }
.hz-kpi b {
  display: block; font-family: var(--g-mono); font-size: 20px; font-weight: 700;
  color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.hz-kpi span {
  font-family: var(--g-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-3);
}
.hz-kpi--ok b   { color: var(--ok-tx); }
.hz-kpi--pend b { color: var(--g-rojo-tx); }

.hz-mandos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hz-filtro { display: flex; border: 1px solid var(--linea-fuerte); }
.hz-filtro button {
  min-height: 38px; padding: 0 14px; background: none; border: 0; cursor: pointer;
  font-family: var(--g-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-2);
  border-right: 1px solid var(--linea-fuerte);
}
.hz-filtro button:last-child { border-right: 0; }
.hz-filtro button:hover { color: #fff; }
.hz-filtro button.on { background: var(--marca); color: #fff; }
.hz-check {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: .9rem; color: var(--tinta-2); min-height: 38px;
}
.hz-check input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--marca); }

/* El scroll horizontal vive en la caja, nunca en la página. */
.hz-caja { border: 1px solid var(--linea); overflow: auto; max-height: 78vh; }
.hz-tabla { width: 100%; border-collapse: separate; border-spacing: 0; }
.hz-tabla thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--hundido-2); color: var(--tinta-2);
  font-family: var(--g-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; text-align: left;
  padding: 12px 14px; border-bottom: 1px solid var(--linea-fuerte);
  white-space: nowrap;
}
.hz-tabla thead .hz-hora-th { left: 0; z-index: 4; width: 78px; }
.hz-hora {
  position: sticky; left: 0; z-index: 2; width: 78px;
  background: var(--hundido); color: #fff; text-align: left;
  font-family: var(--g-mono); font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; padding: 10px 14px;
  border-right: 1px solid var(--linea-fuerte); border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.hz-tabla td {
  padding: 8px; border-bottom: 1px solid var(--linea);
  border-right: 1px solid var(--linea); vertical-align: top; min-width: 216px;
}
.hz-tabla td:last-child { border-right: 0; }
.hz-libre { text-align: center; }
.hz-libre span {
  display: inline-block; margin-top: 10px;
  font-family: var(--g-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-3);
}

/* La ficha del partido. El estado es un filete a la izquierda y no un fondo de
   color: con 28 franjas en pantalla, rellenar cada celda convierte la jornada en
   un semáforo ilegible. */
.hz-ficha {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--papel); border: 1px solid var(--linea); border-left: 3px solid var(--linea-fuerte);
  padding: 9px 11px; transition: border-color .15s ease, background .15s ease;
}
.hz-ficha + .hz-ficha { margin-top: 8px; }
.hz-ficha:hover, .hz-ficha:focus-visible { background: #15171f; border-color: var(--linea-fuerte); }
.hz-ficha:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.hz-ficha.hz-jugado    { border-left-color: var(--ok); }
.hz-ficha.hz-pendiente { border-left-color: #3a3f50; }
.hz-rot {
  font-family: var(--g-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-3); margin: 0 0 7px;
}
.hz-lado {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: .95rem; color: var(--tinta-2); line-height: 1.5;
}
/* Sin `break-word`: «Naranja» partido como «Naranj/a» ya pasó una vez. */
.hz-lado span { min-width: 0; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.hz-lado b {
  font-family: var(--g-mono); font-weight: 700; font-size: 1rem; color: var(--tinta-2);
  font-variant-numeric: tabular-nums; flex: none;
}
.hz-lado.gana { color: #fff; font-weight: 700; }
.hz-lado.gana b { color: #fff; }
.hz-choque { background: var(--error-bg); }
.hz-aviso {
  display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
  font-family: var(--g-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--error);
}
.hz-nomina {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linea);
  font-size: .78rem; color: var(--tinta-3); line-height: 1.55;
}
.hz-nomina b { color: var(--tinta-2); font-weight: 600; }

@media (max-width: 700px) {
  .hz-barra { gap: 12px; }
  .hz-resumen { width: 100%; overflow-x: auto; }
  .hz-tabla td { min-width: 190px; padding: 6px; }
  .hz-hora, .hz-tabla thead .hz-hora-th { width: 62px; padding-inline: 9px; }
  .hz-caja { max-height: none; }
}

/* Cuando no hay escudo de club, el hueco lo ocupa la garra de GRID: sin el círculo
   blanco de un escudo real, que sobre negro es un foco. */
.escudo-generico {
  background: none !important; padding: 0 !important; border-radius: 0 !important;
  object-fit: contain; opacity: .9;
}

/* ─── La columna del evento ───────────────────────────────────────────────
   Era un bloque azul marino con un escudo, cuatro cifras enormes y el lema del
   Club. Ahora es un panel del mismo sistema: filete a la derecha, rótulos en
   monoespaciada y las cifras a un tamaño que informa sin gritar. */
.lat-cab { border-bottom-color: var(--linea) !important; }
.lat-nom { font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: -.01em; }
.lat-eye, .lat-sub {
  font-family: var(--g-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-3);
}
.lat-cifras { background: var(--linea) !important; border-top-color: var(--linea) !important; }
.lat-cifra { background: var(--hundido) !important; }
.lat-cifra b { font-family: var(--g-mono); color: #fff; }
.lat-cifra span {
  font-family: var(--g-mono); font-size: 9px; letter-spacing: .12em; color: var(--tinta-3);
}
.lat-volver { background: rgba(255,255,255,.06) !important; border: 1px solid var(--linea); }
.lat-volver:hover { background: rgba(255,255,255,.12) !important; }
.nav-btn.active { background: var(--marca-suave); border-left: 3px solid var(--marca); }

/* El pie de la plataforma dentro de la aplicación: el mismo, pero sin gritar. */
body:not(.ruta-inicio) .lp-pie { background: transparent; border-top: 1px solid var(--linea); }
body:not(.ruta-inicio) .lp-pie-logo { height: 26px; opacity: .75; }

/* ═══ EQUIPOS · la plantilla ══════════════════════════════════════════════
   Una lista, no una galería de tarjetas. Cuatro equipos sin nómina llenaban
   una pantalla entera para decir «Sin jugadores» cuatro veces. */
.eq-resumen { margin-bottom: 22px; display: inline-flex; }
.eq-grupo { margin-bottom: 26px; border: 1px solid var(--linea); background: var(--papel); }
.eq-grupo-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px; border-bottom: 1px solid var(--linea); background: var(--hundido);
}
.eq-cuenta {
  font-family: var(--g-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-3);
}
.eq-rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 1px; background: var(--linea);
}
.eq-equipo { background: var(--papel); padding: 15px 16px 16px; border-left: 3px solid var(--eq-color); }
.eq-nom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eq-nom h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .98rem;
  text-transform: uppercase; letter-spacing: -.01em; color: #fff; margin: 0;
}
.eq-n {
  font-family: var(--g-mono); font-size: 12px; font-weight: 700; color: var(--tinta);
  background: var(--hundido-2); padding: 2px 8px; flex: none;
}
.eq-n.vacio { color: var(--tinta-3); }
.eq-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.eq-lista li {
  display: flex; align-items: baseline; gap: 7px;
  font-size: .9rem; color: var(--tinta-2); line-height: 1.5;
}
.eq-lista em { font-family: var(--g-mono); font-size: 10.5px; color: var(--tinta-3); font-style: normal; }
.eq-f { color: var(--marca-osc); display: inline-flex; }
.eq-sin {
  margin: 12px 0 0; font-family: var(--g-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-3);
}
.eq-sueltos { padding: 14px 16px; border-top: 1px solid var(--linea); }
.eq-sueltos > div { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* Los nombres de equipo no se parten: «Naranja» como «Naranj/a» ya pasó. */
.eq-nom h3, .eq-lista span { overflow-wrap: normal; word-break: keep-all; hyphens: none; }

/* ═══ POP-UPS · el fondo se queda quieto ══════════════════════════════════
   `body{overflow:hidden}` ya estaba, y aun así al llegar al final de un modal
   largo el scroll seguía en la página de detrás: el navegador ENCADENA el
   scroll al ancestro cuando el contenedor se acaba. Eso es `overscroll-behavior`,
   no `overflow`. Y `scrollbar-gutter` evita el salto lateral de la página
   entera al aparecer y desaparecer la barra de scroll. */
html { scrollbar-gutter: stable; }
.modal-fondo {
  background: rgba(4,5,8,.78);
  backdrop-filter: blur(6px);
  overscroll-behavior: contain;
  align-items: center;
}
.modal {
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
  overscroll-behavior: contain;
}
.modal h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; font-size: 1.15rem; color: #fff;
}
.modal .pista { color: var(--tinta-2); }
.modal-acciones { border-top: 1px solid var(--linea); padding-top: var(--e4); }
.modal input, .modal select, .modal textarea, .acc-form input {
  background: var(--hundido); border: 1px solid var(--linea-fuerte);
  color: var(--tinta); border-radius: 0;
}
.modal input:focus, .modal select:focus, .modal textarea:focus, .acc-form input:focus {
  border-color: var(--marca); outline: 2px solid rgba(211,47,47,.25); outline-offset: 0;
}

/* ═══ ACCESO ══════════════════════════════════════════════════════════════
   La misma marca que la portada: el logotipo de pincel sobre negro y la garra
   de fondo. El rojo es el OSCURO —#b71c1c de relleno, #e53935 de texto—: el
   coral de antes tiraba a rosa y en una pantalla de entrada se veía blando. */
.modal-acceso { max-width: 880px; border: 1px solid var(--linea-fuerte); }
.acc-marca {
  background: var(--g-negro); color: #fff; position: relative; overflow: hidden;
  border-right: 1px solid var(--linea);
  padding: var(--e6) var(--e5);
  align-items: flex-start; text-align: left; justify-content: center; gap: var(--e4);
}
/* La garra, gigante y casi apagada, como marca de agua. */
.acc-marca::after {
  content: ''; position: absolute; right: -34px; bottom: -28px;
  width: 210px; height: 236px; opacity: .07; pointer-events: none;
  -webkit-mask: url('img/garra-carga.png?v=20260911b') no-repeat center / contain;
          mask: url('img/garra-carga.png?v=20260911b') no-repeat center / contain;
  background: #fff;
}
.acc-escudo { display: none; }
.acc-logo { width: 148px; height: auto; display: block; position: relative; z-index: 1; }
.acc-sigla { display: none; }
.acc-lema {
  color: var(--tinta-2); font-size: .92rem; line-height: 1.6; max-width: 30ch;
  position: relative; z-index: 1; margin: 0;
}
.acc-lema b { color: var(--g-rojo-tx); font-weight: 700; }
.acc-form { padding: var(--e6) var(--e5); background: var(--papel); }
/* Ojo con el alcance: esto era `.acc-form label` a secas, y en el acceso hay más
   etiquetas que las de los campos — la de aceptar términos y las dos del tipo de
   cuenta también son <label>. El resultado era el consentimiento legal a 10 px en
   versalitas monoespaciadas, que es exactamente el aspecto de lo que nadie lee.
   Va donde tiene que ir: la etiqueta de un campo, igual que en el resto del sistema. */
.acc-form .campo > label {
  font-family: var(--g-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-3);
}
.acc-sep { color: var(--tinta-3); font-family: var(--g-mono); font-size: 10px; letter-spacing: .14em; }
.acc-sep::before, .acc-sep::after { background: var(--linea); }
.acc-g { background: var(--hundido-2); border-color: var(--linea-fuerte); color: var(--tinta); }
.btn.acc-entrar {
  background: #b71c1c; border-color: #b71c1c; color: #fff; border-radius: 0;
  font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; font-size: 12px; min-height: 48px;
}
.btn.acc-entrar:hover { background: #9a1616; border-color: #9a1616; }
.acc-cancelar { border-radius: 0; min-height: 44px; }
.acc-pie { color: var(--tinta-3); }
.acc-pie b { color: var(--tinta-2); }
@media (max-width: 720px) {
  .acc-marca { padding: var(--e4) var(--e4) var(--e3); flex-direction: row; align-items: center; gap: var(--e3); }
  .acc-logo { width: 96px; }
  .acc-marca::after { display: none; }
}

/* ═══ LA CARA PÚBLICA · cuatro pantallas ══════════════════════════════════ */
/* `es-landing` la ponen las cuatro rutas públicas (`app.js`). Antes esto colgaba
   de `ruta-inicio` y al partir la portada en cuatro, tres de ellas se quedaban
   sin barra, sin ancho y sin navegación inferior. */
body.es-landing { background: var(--g-negro); color: var(--g-tinta); }
/* `.marco-cue` mete 24px de margen lateral: es el aire de la aplicación, donde el
   contenido nunca toca el borde. En la cara pública estorba, porque la foto del hero
   y la banda de datos van A SANGRE y los márgenes los pone `.lp`. */
body.es-landing .marco,
body.es-landing .marco-cue,
body.es-landing main.contenedor { max-width: none; padding: 0; background: transparent; }
body.es-landing .panel { padding: 0 0 24px; }
body.es-landing .nav-landing { display: flex; }
body.es-landing .nav-app { display: none; }

.nav-landing a.active { color: #fff; border-bottom-color: var(--g-rojo); }

@media (max-width: 780px) {
  body.es-landing .lp-tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(11,12,16,.97); border-top: 1px solid var(--g-filete);
    backdrop-filter: blur(12px); padding-bottom: env(safe-area-inset-bottom);
  }
  body.es-landing .lp-pie { padding-bottom: 96px; }
  body.es-landing .nav-landing { display: none; }
}

/* La bajada de la cabecera no debe estirarse hasta el otro extremo. */
.lp-cab-p { margin: 0; max-width: 40ch; }

/* ─── Inicio · las cuatro puertas ────────────────────────────────────────── */
.lp-puertas {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--g-filete); border: 1px solid var(--g-filete);
}
@media (max-width: 900px) { .lp-puertas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lp-puertas { grid-template-columns: 1fr; } }
.lp-puerta {
  display: block; background: var(--g-sup); padding: 26px 22px 22px;
  text-decoration: none; transition: background .18s ease;
}
.lp-puerta:hover { background: #14161d; }
.lp-puerta i { font-size: 22px; color: var(--g-rojo-tx); display: block; line-height: 1; }
.lp-puerta b {
  display: block; margin-top: 16px; font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 15px; text-transform: uppercase;
  letter-spacing: -.01em; color: #fff;
}
.lp-puerta span {
  display: block; margin-top: 8px; color: var(--g-tinta-2);
  font-size: 13.5px; line-height: 1.6;
}
.lp-puerta em {
  display: inline-block; margin-top: 14px; font-style: normal;
  font-family: var(--g-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--g-tinta-2);
}
.lp-puerta:hover em { color: var(--g-rojo-tx); }

/* ─── Inicio · para quién ────────────────────────────────────────────────── */
.lp-sec--alt { border-top: 1px solid var(--g-filete); }
.lp-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .lp-doble { grid-template-columns: 1fr; gap: 30px; } }
.lp-para { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--g-filete); }
.lp-para li { padding: 18px 0; border-bottom: 1px solid var(--g-filete); }
.lp-para b {
  display: block; font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 14px; text-transform: uppercase; letter-spacing: -.01em; color: #fff;
}
.lp-para span { display: block; margin-top: 6px; color: var(--g-tinta-2); font-size: 14px; line-height: 1.65; }

/* ─── Qué hace · el icono de la tarjeta ──────────────────────────────────── */
.lp-card-i { display: block; margin-top: 20px; font-size: 24px; color: var(--g-rojo-tx); line-height: 1; }
.lp-card h3 { margin-top: 14px; }

/* ─── Cómo se usa · los pasos, en columna ────────────────────────────────── */
.lp-pasos2 { list-style: none; margin: 0; padding: 0; border: 1px solid var(--g-filete); }
.lp-paso2 { display: grid; grid-template-columns: 96px 1fr; border-bottom: 1px solid var(--g-filete); }
.lp-paso2:last-child { border-bottom: 0; }
@media (max-width: 620px) { .lp-paso2 { grid-template-columns: 62px 1fr; } }
.lp-paso2-n {
  display: flex; align-items: flex-start; justify-content: center; padding: 28px 0;
  border-right: 1px solid var(--g-filete); background: var(--g-sup);
}
.lp-paso2-n span {
  font-family: var(--g-mono); font-size: 22px; font-weight: 700; color: var(--g-rojo-tx);
  letter-spacing: .04em;
}
.lp-paso2-tx { padding: 26px 26px 28px; }
@media (max-width: 620px) { .lp-paso2-tx { padding: 20px 18px 22px; } }
.lp-paso2-tx h3 {
  display: flex; align-items: center; gap: 11px; margin: 0;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px;
  text-transform: uppercase; letter-spacing: -.01em; color: #fff;
}
.lp-paso2-tx h3 i { color: var(--g-rojo-tx); font-size: 18px; }
.lp-paso2-tx p { margin: 10px 0 0; color: var(--g-tinta-2); font-size: 14.5px; line-height: 1.7; max-width: 64ch; }
.lp-paso2-det { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.lp-paso2-det li {
  position: relative; padding-left: 17px; color: var(--g-tinta-2);
  font-size: 13px; line-height: 1.55;
}
.lp-paso2-det li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; background: var(--g-rojo);
}

/* ─── Contacto · qué contar ──────────────────────────────────────────────── */
.lp-puntos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.lp-puntos li {
  position: relative; padding-left: 20px; color: var(--g-tinta-2);
  font-size: 14.5px; line-height: 1.6;
}
.lp-puntos li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; background: var(--g-rojo);
}

/* ─── El enlace a la sección siguiente ───────────────────────────────────── */
.lp-sig {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  margin-top: 44px; padding: 24px 26px; text-decoration: none;
  border: 1px solid var(--g-filete); background: var(--g-sup);
  transition: border-color .18s ease, background .18s ease;
}
.lp-sig:hover { border-color: var(--g-filete-2); background: #14161d; }
.lp-sig b {
  display: block; margin-top: 8px; font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: 19px; text-transform: uppercase;
  letter-spacing: -.01em; color: #fff;
}
.lp-sig-p { display: block; margin-top: 5px; color: var(--g-tinta-2); font-size: 14px; }
.lp-sig > i { font-size: 20px; color: var(--g-rojo-tx); flex: none; transition: transform .18s ease; }
.lp-sig:hover > i { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .lp-sig:hover > i { transform: none; } }

/* ─── La barra, dentro de la aplicación ──────────────────────────────────
   Los destinos eran botones con relleno redondeado: en una barra que ahora es
   negra y cuadrada parecían pegados de otro sitio. Mismo tratamiento que los
   anclajes de la cara pública: mayúsculas, filete rojo abajo cuando estás ahí. */
.barra-nav .ruta-btn {
  background: none; border: 0; border-radius: 0; border-bottom: 2px solid transparent;
  padding: 6px 2px; min-height: 38px; color: var(--g-tinta-2); cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .16s ease, border-color .16s ease;
}
.barra-nav .ruta-btn:hover { color: #fff; }
.barra-nav .ruta-btn.active { color: #fff; border-bottom-color: var(--g-rojo); background: none; }
.barra-nav .ruta-btn i { font-size: 14px; }
.nav-app { gap: 22px; }

/* El pie: el logotipo de pincel tiene rasgos que bajan y se montaba sobre la
   línea de debajo. */
.lp-pie-col { display: grid; gap: 8px; justify-items: start; }

/* ─── La columna de pestañas del evento ─────────────────────────────────── */
.lat-nav .nav-btn {
  border-radius: 0; border-left: 3px solid transparent;
  font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em;
}
.lat-nav .nav-btn.active {
  background: var(--marca-suave); border-left-color: var(--marca); color: #fff;
}

/* ─── La barra en pantallas estrechas ────────────────────────────────────
   A 375px sumaban 418px: logotipo + tres destinos + selector de idioma +
   «Entrar». Se aprieta el marco y la palabra «Entrar» se queda en su icono,
   que ya lleva; no se quita ningún destino. */
@media (max-width: 480px) {
  .barra-in { padding-inline: 12px; gap: 8px; }
  .g-idioma button { padding: 0 8px; min-height: 34px; font-size: 10px; }
  body:not(.es-landing) #btnAdmin span { display: none; }
  #btnAdmin { padding-inline: 12px; }
}
@media (max-width: 380px) {
  .marca-logo { height: 26px; }
  .barra-nav { gap: 0; }
}
.lat-volver, .chip, .chip-btn, .btn, .btn-sm { border-radius: 0; }
.lat-logo, .acc-escudo, .marca-prev img { border-radius: 0; }

/* «En vivo» usaba el rojo de hover (#b71c1c) sobre el tinte de error: 2,79:1 sobre
   negro. El chip es literalmente lo que dice si la jornada está corriendo. */
.chip-vivo { background: #140a0c; color: var(--g-rojo-tx); border: 1px solid var(--error-linea); }
.chip-vivo::before { background: var(--g-rojo-tx); }

/* ═══════════════════════════════════════════════════════════════════════════
   DOS AMBIENTES, NO UNO
   ───────────────────────────────────────────────────────────────────────────
   Sin sesión: la presentación. Con sesión: el programa, y nada más. Devolver a
   la landing desde la barra era la forma más rápida de perder lo que tenías
   delante — y encima el idioma, que fuera vende, dentro no hace nada.
   ═════════════════════════════════════════════════════════════════════════ */
body.is-admin .nav-landing,
body.is-admin .lp-tabbar,
body.is-admin .g-idioma,
body.is-admin .ruta-btn.sin-sesion { display: none !important; }
.sin-sesion { display: inline-flex; }

/* ─── La barra inferior del programa ─────────────────────────────────────
   Solo en pantalla táctil. En escritorio la navegación de arriba y la columna
   lateral bastan, y una barra fija abajo solo come alto. */
.ap-tabbar { display: none; }
@media (max-width: 900px) {
  body:not(.es-landing) .ap-tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(11,12,16,.97); border-top: 1px solid var(--linea-fuerte);
    backdrop-filter: blur(12px); padding-bottom: env(safe-area-inset-bottom);
  }
  /* Sitio para que la barra no tape la última fila de cualquier pantalla. */
  body:not(.es-landing) .panel { padding-bottom: 84px; }
  /* Y la tira horizontal de pestañas de arriba sobra: son las mismas de abajo. */
  body.con-lateral .lat-nav { display: none; }
}
.ap-tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 60px; background: none; border: 0; cursor: pointer;
  border-top: 2px solid transparent; color: var(--tinta-3);
  font-family: var(--g-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  transition: color .15s ease, border-color .15s ease;
}
.ap-tabbar button i { font-size: 18px; line-height: 1; }
.ap-tabbar button.on { color: #fff; border-top-color: var(--marca); }
.ap-tabbar button:active { background: rgba(255,255,255,.05); }

/* ═══ HOJA INFERIOR · el menú táctil ══════════════════════════════════════
   Sustituye a las filas de botoncitos y a los lápices de 32px puestos al lado
   de cada cosa: en un teléfono eso no se acierta. Sube desde abajo, ocupa el
   ancho y cada opción es una franja de 56px. En escritorio se queda centrada
   como un cuadro normal. */
.hoja-fondo {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(4,5,8,.7); backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .2s ease; overscroll-behavior: contain;
}
/* `display:flex` gana a la regla del navegador para `[hidden]`, así que la hoja
   cerrada seguía tapando la pantalla entera e interceptando cada clic. */
.hoja-fondo[hidden] { display: none !important; }
.hoja-fondo.abierta { opacity: 1; }
.hoja {
  width: 100%; max-width: 520px; background: var(--papel);
  border: 1px solid var(--linea-fuerte); border-bottom: 0;
  padding: 10px 0 calc(12px + env(safe-area-inset-bottom));
  transform: translateY(12px); transition: transform .22s cubic-bezier(.22,.61,.36,1);
  max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
}
.hoja-fondo.abierta .hoja { transform: none; }
@media (min-width: 720px) {
  .hoja-fondo { align-items: center; }
  .hoja { border-bottom: 1px solid var(--linea-fuerte); padding-bottom: 12px; }
}
.hoja-asa { width: 40px; height: 3px; background: var(--linea-fuerte); margin: 4px auto 12px; }
@media (min-width: 720px) { .hoja-asa { display: none; } }
.hoja-tit {
  margin: 0 18px 10px; font-family: var(--g-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3);
}
.hoja-op {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 56px; padding: 0 18px; background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--tinta); font-size: .98rem;
}
.hoja-op:hover, .hoja-op:focus-visible { background: rgba(255,255,255,.05); }
.hoja-op i { width: 20px; font-size: 17px; color: var(--tinta-3); flex: none; }
.hoja-op b { font-weight: 600; display: block; }
.hoja-op em {
  display: block; font-style: normal; margin-top: 2px;
  font-size: .8rem; color: var(--tinta-3);
}
.hoja-op.peligro { color: var(--error); }
.hoja-op.peligro i { color: var(--error); }
.hoja-sep { border: 0; border-top: 1px solid var(--linea); margin: 6px 0; }
body.con-hoja { overflow: hidden; }

/* El azul de TEXTO no sirve de relleno: `.btn-secundario` salía cian con letras
   blancas —«+ Grupo», «Elegir formato», «Buscar en el Club»— y se veía pegado de
   otra aplicación. */
.btn-secundario {
  background: var(--hundido-2); color: var(--tinta);
  border: 1px solid var(--linea-fuerte);
}
.btn-secundario:hover { background: #1c1f29; border-color: #444a5c; color: #fff; }

/* ─── El escudo del equipo ───────────────────────────────────────────────
   Cuadrado, como todo lo demás. El color del equipo es el filete y el tinte de
   fondo: así se distingue de lejos sin que el color se coma la figura. */
.esc {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; overflow: hidden;
  background: color-mix(in srgb, var(--esc-c) 16%, #0b0c10);
  border: 1px solid color-mix(in srgb, var(--esc-c) 45%, #0b0c10);
  border-left: 3px solid var(--esc-c);
  color: var(--esc-c);
}
.esc svg { width: 78%; height: 78%; display: block; }
.esc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.esc--sm { width: 26px; height: 26px; }
.esc--lg { width: 46px; height: 46px; }
/* `color-mix` no llega a todos los navegadores; sin él la caja quedaría
   transparente y el escudo se perdería sobre el fondo. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .esc { background: #14161d; border-color: var(--esc-c); }
}

/* ─── El fixture en un teléfono ──────────────────────────────────────────
   Era lo que peor se llevaba: los rótulos y las cifras estaban pensados para un
   monitor y en 390px cada franja se comía un tercio de la pantalla. */
.hz-lado { align-items: center; gap: 9px; }
/* `.hz-lado span` alcanzaba TAMBIÉN al escudo, que es un `<span>`: le daba `flex:1`
   y lo estiraba hasta el ancho de la celda. El escudo se excluye por nombre. */
.hz-lado > span:not(.esc) { flex: 1; }
.hz-lado .esc { flex: none; }
.hz-lado b { color: var(--tinta-3); }
.hz-lado.gana b { color: #fff; }

@media (max-width: 700px) {
  .hz-imprimir { display: none; }            /* imprimir desde el celular no existe */
  .hz-kpi { padding: 8px 13px; min-width: 68px; }
  .hz-kpi b { font-size: 17px; }
  .hz-kpi span { font-size: 8.5px; letter-spacing: .1em; }
  .hz-barra { gap: 10px; margin-bottom: 14px; }
  .hz-mandos { gap: 10px; width: 100%; }
  .hz-filtro button { min-height: 42px; padding: 0 16px; flex: 1; }
  .hz-filtro { flex: 1; }
  .hz-ficha { padding: 8px 9px; }
  .hz-rot { font-size: 9px; margin-bottom: 6px; }
  .hz-lado { font-size: .9rem; gap: 7px; }
  .hz-tabla td { min-width: 172px; }
  /* La cabecera del evento: tres renglones para decir el nombre y dos chips. */
  .lat-cab { padding: 10px 14px !important; }
  .lat-eye, .lat-sub { font-size: 9px; }
  .lat-nom { font-size: 1.05rem !important; }
  .lat-cifras { display: none; }             /* las mismas cifras están en el resumen */
  /* Títulos de sección: 1,5rem en 390px es un titular de portada. */
  .s-title, .panel-cab h2 { font-size: 1.25rem !important; }
  .s-eye { font-size: 9.5px; }
}
.eq-nom { gap: 11px; }
.eq-nom h3 { flex: 1; min-width: 0; }

/* ═══ LA TARJETA DEL GRUPO ════════════════════════════════════════════════
   Seis botones en fila, y debajo cada equipo con un lápiz y una × de 32px
   pegados. En 390px eran tres renglones de botones antes del primer dato, y
   «eliminar» quedaba a cinco milímetros de «editar». Ahora: un menú, y el
   equipo entero es el botón. */
.gr-tarjeta { margin-bottom: 16px; }
.gr-cab {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-bottom: 1px solid var(--linea); background: var(--hundido);
}
.gr-id { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.gr-letra {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; background: var(--hundido-2);
  border: 1px solid var(--linea-fuerte); border-left: 3px solid var(--marca);
  font-family: var(--g-mono); font-size: 14px; font-weight: 700; color: #fff;
  text-transform: uppercase;
}
.gr-cab h3 {
  margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem;
  text-transform: uppercase; letter-spacing: -.01em; color: #fff;
}
.gr-meta {
  margin: 3px 0 0; font-family: var(--g-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3);
}
.gr-marcador {
  font-family: var(--g-mono); font-size: 13px; font-weight: 700; color: var(--tinta-2);
  font-variant-numeric: tabular-nums; flex: none;
}
.gr-marcador.lleno { color: var(--ok-tx); }
.gr-mas {
  flex: none; width: 44px; height: 44px; background: none; cursor: pointer;
  border: 1px solid var(--linea-fuerte); color: var(--tinta-2);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.gr-mas:hover { color: #fff; border-color: #444a5c; background: rgba(255,255,255,.04); }

/* La única acción que se queda a la vista: sin formato no hay cruce que repartir,
   así que el grupo no sirve para nada hasta que se elige. */
.gr-cta {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  min-height: 62px; padding: 0 14px; margin-bottom: 16px; cursor: pointer;
  background: var(--hundido-2); border: 1px solid var(--linea-fuerte);
  border-left: 3px solid var(--marca); color: var(--tinta);
}
.gr-cta:hover { background: #1c1f29; }
.gr-cta > i { font-size: 17px; color: var(--marca-osc); flex: none; }
.gr-cta > i:last-child { margin-left: auto; color: var(--tinta-3); }
.gr-cta b { display: block; font-weight: 600; font-size: .96rem; }
.gr-cta em {
  display: block; font-style: normal; margin-top: 2px;
  font-size: .78rem; color: var(--tinta-3);
}
.gr-cta--rojo { border-left-color: var(--ok); }
.gr-cta--rojo > i:first-child { color: var(--ok-tx); }

.gr-tit {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 10px; flex-wrap: wrap;
}
.gr-equipos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.gr-eq {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  min-height: 46px; padding: 0 14px 0 0; background: var(--hundido);
  border: 1px solid var(--linea); color: var(--tinta);
  font-size: .92rem; text-align: left;
}
.gr-eq:hover { background: var(--hundido-2); border-color: var(--linea-fuerte); }
.gr-eq:active { background: #1c1f29; }
.gr-eq .esc { border: 0; border-left: 3px solid var(--eq-color); height: 44px; width: 38px; }
/* Los nombres de equipo no se parten. */
.gr-eq span { overflow-wrap: normal; word-break: keep-all; hyphens: none; }

@media (max-width: 560px) {
  /* En un teléfono el equipo ocupa la fila entera: es un objetivo de 44px de alto
     y del ancho de la pantalla, no una pastilla de dos centímetros. */
  .gr-equipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .gr-eq { width: 100%; }
  .gr-cab { padding: 11px 12px; gap: 10px; }
  .gr-letra { width: 34px; height: 34px; font-size: 12px; }
}

/* Cabecera de la sección «Grupos» dentro del tablero. */
.gr-seccion {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 26px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--linea);
}
.gr-seccion h3 {
  margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem;
  text-transform: uppercase; letter-spacing: -.01em; color: #f1f1f5;
}

/* ─── Lo que quedó con color FIJO en `sistema.css` ───────────────────────
   Todo esto estaba escrito para papel blanco y no pasó por token, así que el
   cambio de tema no lo alcanzó. Sale uno a uno midiendo el contraste sobre la
   página ya pintada; a ojo no se ven, porque varios solo aparecen al pasar el
   ratón o al salir un aviso. */

/* Fila de tabla bajo el ratón: pintaba la celda de #FAFCFF y el texto claro
   desaparecía. 1,26:1 — el peor de todos, y se ve en CADA tabla. */
tbody tr:hover td { background: rgba(255,255,255,.045); }

/* El botón primario usaba `--marca-osc`, que ahora es el rojo de TEXTO (#e53935):
   blanco encima da 4,23 y no pasa. El de relleno es `--marca`. */
.btn-primario { background: var(--marca); color: #fff; }
.btn-primario:hover { background: var(--marca-osc-2); }

/* Avisos: los `-bg` ya son tintes oscuros, pero los colores de texto seguían
   siendo los de papel blanco. El informativo daba 1,65. */
.aviso-info { background: var(--azul-suave); border-color: #1d3a52; color: var(--azul-osc); }
.aviso-ok { color: var(--ok-tx); }
.aviso-alerta { color: var(--alerta); }
.aviso-error { color: var(--error); }

/* El aviso flotante: verde #10b981 con letras blancas da 2,54. */
.toast { border-radius: 0; }
.toast.success { background: #0c3b2c; color: #d6f5e8; border: 1px solid var(--ok-linea); }
.toast.error { background: #3b1214; color: #ffd9d7; border: 1px solid var(--error-linea); }

/* ─── Bloque plegable ────────────────────────────────────────────────────
   `<details>` nativo: sin JavaScript, accesible por teclado y recordado por el
   navegador al volver atrás. El resumen dice lo que hay dentro, así que no hace
   falta abrirlo para saberlo. */
.plegable > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 12px;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary:hover { background: var(--hundido-2); }
.ple-resumen {
  font-family: var(--g-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-3); text-align: right;
}
.ple-flecha { flex: none; color: var(--tinta-3); transition: transform .18s ease; }
.plegable[open] > summary .ple-flecha { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ple-flecha { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   GRID · SaaS — acceso, legal, configuración y consola de cancha
   2026-09-12
   ═══════════════════════════════════════════════════════════════════════════ */

/* `hidden` quiere decir escondido, y punto.
   La hoja de estilos del navegador trae `[hidden]{display:none}`, pero cualquier regla
   de autor con `display` le gana: `.campo{display:flex}` dejaba visible un campo al que
   el JavaScript acababa de poner `hidden`. Ya lo pagamos una vez con la hoja inferior y
   lo volvimos a pagar con el nombre del club en el registro, así que se arregla en la
   raíz y no elemento por elemento. */
[hidden] { display: none !important; }

/* ── Acceso: dos pestañas, tres puertas ───────────────────────────────────── */
.acc-tabs { display: flex; gap: 0; margin-bottom: var(--e4); border-bottom: 1px solid var(--linea); }
.acc-tab {
  flex: 1; padding: 11px 8px; background: none; border: 0; cursor: pointer;
  font: 600 13px/1 var(--g-sans, inherit); letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.acc-tab:hover { color: var(--tinta); }
.acc-tab.active { color: var(--tinta); border-bottom-color: var(--marca); }
.acc-panel[hidden] { display: none !important; }
.acc-panel .campo + .campo { margin-top: var(--e3); }

.acc-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); margin-bottom: var(--e3); }
/* `position:relative` en la etiqueta no es decorativo: sin él, el radio escondido se
   posiciona contra el modal y acaba flotando sobre otros controles, robándoles el
   clic. Se ve como «ese botón a veces no responde», que es de lo más difícil de
   diagnosticar mirando la pantalla. */
.acc-op { display: block; cursor: pointer; position: relative; }
.acc-op input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.acc-op > span {
  display: block; padding: 10px 12px; border: 1px solid var(--linea);
  background: var(--hundido); transition: border-color .12s, background .12s;
}
.acc-op > span b { display: block; font-size: 13px; color: var(--tinta); }
.acc-op > span small { display: block; margin-top: 2px; font-size: 11px; color: var(--tinta-3); line-height: 1.35; }
.acc-op input:checked + span { border-color: var(--marca); background: var(--marca-suave); }
.acc-op input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }

.acc-tyc { display: flex; gap: 10px; align-items: flex-start; margin: var(--e3) 0; cursor: pointer; }
.acc-tyc input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--marca); }
.acc-tyc span { font-size: 12px; line-height: 1.5; color: var(--tinta-2); }
.acc-tyc a { color: var(--marca-osc); text-decoration: underline; }

/* ── Legal ────────────────────────────────────────────────────────────────── */
.lp-legal { padding-block: 44px 72px; }
.lg-ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-bottom: 40px;
}
.lg-ficha > div { background: var(--papel); padding: 14px 16px; }
.lg-ficha span { display: block; font: 600 10px/1 var(--g-mono, monospace); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-3); margin-bottom: 6px; }
.lg-ficha b { font-size: 14px; color: var(--tinta); }
.lg-h { margin: 34px 0 12px; font-size: 18px; color: #f1f1f5; letter-spacing: -.01em; }
.lp-legal p { color: var(--tinta-2); line-height: 1.65; margin: 0 0 12px; max-width: 72ch; }
.lp-legal p b, .lg-lista b { color: var(--tinta); }
.lg-lista { margin: 0 0 12px; padding-left: 20px; }
.lg-lista li { color: var(--tinta-2); line-height: 1.6; margin-bottom: 7px; }
.lg-menores { border-left: 3px solid var(--marca); }
.lg-menores .callout__t { color: var(--marca-osc); }
.lg-pie { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linea);
  font-size: 13px; color: var(--tinta-3) !important; }

/* ── Configuración ────────────────────────────────────────────────────────── */
.cfg-carga { padding: 48px; text-align: center; color: var(--tinta-3); }
.cfg-sub { margin: var(--e4) 0 6px; font-size: 13px; color: var(--tinta); }
.cfg-nota { font-size: 12px; color: var(--tinta-3); line-height: 1.55; margin: 0 0 var(--e3); }
.cfg-fila { display: flex; justify-content: space-between; gap: var(--e3); padding: 9px 0;
  border-bottom: 1px solid var(--linea); font-size: 13px; }
.cfg-fila:last-of-type { border-bottom: 0; }
.cfg-fila span { color: var(--tinta-3); }
.cfg-fila b { color: var(--tinta); text-align: right; }
.cfgw-sec small { display: block; margin-top: 5px; font-size: 11px; color: var(--tinta-3); }
.cfg-color { display: flex; gap: var(--e3); align-items: flex-end; margin-top: var(--e3); }
.cfg-color input[type=color] { width: 62px; height: 40px; padding: 2px; background: var(--hundido);
  border: 1px solid var(--linea); cursor: pointer; }
.cfg-muestra { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linea); }
.cfg-muestra span { font: 700 12px/1 var(--g-mono, monospace); letter-spacing: .1em;
  text-transform: uppercase; color: #fff; }
.cfg-logo { display: block; margin-top: 10px; max-height: 56px; width: auto; }
.cfg-cuerpo { padding-top: var(--e2); }

/* ── Consola de cancha ────────────────────────────────────────────────────────
   El día del partido esto es TODA la pantalla: sin barra, sin pestañas, sin nada
   que tocar por error. `100dvh` y no `100vh` porque en el móvil la barra del
   navegador se mete dentro de `vh` y los botones de abajo quedan tapados justo
   cuando hay que pulsarlos.                                                    */
/* Se apaga por ELEMENTO (`footer`, `header`) y no solo por clase: el pie se llama
   `.lp-pie` y no `.pie`, así que la lista por nombres lo dejó vivo y metía 164 px de
   más al final — el scroll aparecía justo cuando el partido estaba en marcha. */
/* `footer` a secas, no: el pie de la página es `.lp-pie` y es el único que hay que apagar.
   Con el selector de elemento se apagaba también el pie de cada baldosa de la torre —que
   es un `<footer>` legítimo—, así que «sin mesa» no se veía y la torre callaba justo lo
   que existe para gritar. Es la segunda vez que este selector se pasa de listo. */
/* Con `:is()` en vez de repetir la lista por cada pantalla: eran cuatro renglones para
   dos, y sumar la grada los habría puesto en seis. Ahora añadir una pantalla sin cromo es
   escribir su clase una vez. */
body:is(.es-consola, .es-torre, .es-grada, .es-arena)
  :is(.barra, .ap-tabbar, .lp-tabbar, .lp-pie, .barra-nav, .g-idioma) { display: none !important; }
body:is(.es-consola, .es-torre, .es-grada, .es-arena)
  :is(.marco, .marco-cue, .contenedor) { min-height: 0; height: auto; }
/* La grada NO va aquí: es una página que se lee de arriba abajo —la tira de partidos y
   debajo la tabla—, así que necesita su scroll vertical. La consola y la torre ocupan
   exactamente una pantalla y el scroll ahí solo estorba. */
body:is(.es-consola, .es-torre, .es-arena) { overflow: hidden; }
/* `.contenedor` —con E— es quien lleva el `max-width: 1440px`. La regla decía `.contenido`,
   que no existe, así que el tope nunca se quitaba: la TORRE, que se hizo para el televisor
   del coliseo, salía desde S201 capada a 1440 px con 480 de negro a cada lado en cualquier
   pantalla más ancha. No se vio porque se midió a 1280 y a 1440. El relleno lateral de
   `.marco-cue` va en la misma lista por lo mismo: 24 px de margen a cada lado son sitio
   robado al marcador en una pantalla que existe para el marcador. */
body:is(.es-consola, .es-torre, .es-grada, .es-arena)
  :is(.contenedor, .marco-cue, #p-cancha, #p-torre, #p-grada, #p-arena) {
  padding: 0; margin: 0; max-width: none; }

.cn-entrada { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; padding: var(--e5); background: var(--fondo); }
.cn-entrada .cn-logo { height: 34px; width: auto; margin-bottom: var(--e4); }
.cn-entrada h2 { margin: 0 0 8px; font-size: 20px; color: #f1f1f5; }
.cn-entrada p { margin: 0 0 var(--e5); max-width: 34ch; color: var(--tinta-2); font-size: 13px; line-height: 1.6; }
.cn-entrada form { width: 100%; max-width: 340px; text-align: left; }
.cn-grande { width: 100%; margin-top: var(--e4); padding: 15px; font-size: 15px; }

.cn { min-height: 100dvh; display: flex; flex-direction: column; background: var(--fondo); }
.cn-cab { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: 10px var(--e4); border-bottom: 1px solid var(--linea); background: var(--papel); }
.cn-cab b { display: block; font-size: 14px; color: var(--tinta); }
.cn-cab small { display: block; font-size: 11px; color: var(--tinta-3); }
.cn-volver { background: none; border: 0; color: var(--tinta-2); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 6px; padding: 6px 2px; }
.cn-red { font: 600 11px/1 var(--g-mono, monospace); letter-spacing: .04em; display: flex;
  align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--linea); white-space: nowrap; }
.cn-red.bien   { color: var(--ok-tx);    border-color: var(--ok-linea);    background: var(--ok-bg); }
.cn-red.espera { color: var(--alerta);   border-color: var(--alerta-linea); background: var(--alerta-bg); }
.cn-red.mal    { color: var(--error);    border-color: var(--error-linea);  background: var(--error-bg); }

.cn-lista { flex: 1; overflow-y: auto; padding: var(--e3); display: flex; flex-direction: column; gap: var(--e2); }
.cn-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e3);
  width: 100%; padding: 15px var(--e3); text-align: left; cursor: pointer;
  background: var(--papel); border: 1px solid var(--linea); color: var(--tinta); position: relative; }
.cn-item:active { background: var(--hundido-2); }
.cn-item.vivo  { border-color: var(--error-linea); }
.cn-item.listo { opacity: .62; }
.cn-hora { font: 700 13px/1 var(--g-mono, monospace); color: var(--tinta-3); }
.cn-vs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-vs b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-vs i { font-style: normal; font-size: 10px; color: var(--tinta-3); letter-spacing: .1em; }
.cn-mk { font: 700 17px/1 var(--g-mono, monospace); color: var(--tinta); }
.cn-chip { position: absolute; top: -1px; right: -1px; padding: 3px 7px; background: var(--marca);
  color: #fff; font: 700 9px/1 var(--g-mono, monospace); letter-spacing: .1em; }

/* El tablero. Dígitos monoespaciados y enormes: es lo que se mira de reojo desde
   la mesa mientras pasa el partido. */
.cn-tablero { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr;
  align-content: stretch; align-items: stretch; gap: 1px; min-height: 0;
  background: var(--linea); border-bottom: 1px solid var(--linea); }
/* Cada lado es una columna entera con su color de equipo arriba: en una cancha
   ruidosa, el color es más rápido de leer que el nombre. */
/* El nombre se ancla arriba, pegado a su franja de color, y el número se queda con
   todo el alto que sobra. Centrando las dos cosas juntas quedaba el marcador flotando
   en mitad de una columna vacía, que es lo que hacía que la pantalla se viera a medio
   terminar aunque tuviera todo lo que necesita. */
.cn-eq { display: flex; flex-direction: column; align-items: center;
  min-width: 0; padding: 10px 6px 6px; background: var(--fondo);
  border-top: 5px solid var(--eq, var(--tinta-3)); }
.cn-nom { display: block; max-width: 100%; font-size: 12px; font-weight: 700; color: var(--tinta-2);
  text-transform: uppercase; letter-spacing: .07em; flex: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-eq .cn-num { flex: 1; display: flex; align-items: center; justify-content: center; }
/* Dígitos de marcador: monoespaciados, apretados y enormes. `tabular-nums` para que
   no bailen al pasar de 9 a 10, que en un contador es lo que más se nota. */
.cn-num { display: block; font: 700 clamp(86px, 27vw, 168px)/0.86 var(--g-mono, monospace);
  color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  text-shadow: 0 0 26px color-mix(in srgb, var(--eq, #fff) 45%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .cn-num { text-shadow: none; } }
.cn-num.late { animation: cnLate .26s cubic-bezier(.2,1.4,.4,1); }
@keyframes cnLate { 0% { transform: scale(1.18) translateY(-2px); color: var(--eq, #fff); } 100% { transform: scale(1); } }

.cn-centro { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 12px; padding: 10px var(--e3); background: var(--papel); min-width: 112px; }
.cn-centro .cn-reloj { margin-top: auto; }
.cn-centro .cn-pos-caja { margin-bottom: auto; }
.cn-per { font: 700 10px/1 var(--g-mono, monospace); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-3); }
.cn-reloj { font: 700 clamp(26px, 7.5vw, 38px)/1 var(--g-mono, monospace);
  color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cn-pos-caja { display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 12px; border: 1px solid var(--linea-fuerte); background: var(--fondo); }
.cn-pos-caja i { font-style: normal; font: 700 8px/1 var(--g-mono, monospace);
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.cn-pos { font: 700 22px/1 var(--g-mono, monospace); color: var(--tinta); font-variant-numeric: tabular-nums; }
.cn-pos.rojo { color: var(--error); }
.cn-vs b { color: var(--tinta); border-left: 3px solid var(--eq, var(--tinta-3)); padding-left: 7px; }

.cn-mandos { flex: none; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: var(--e2);
  padding: var(--e3); padding-bottom: max(var(--e3), env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--papel); }
.cn-col { display: flex; flex-direction: column; gap: var(--e2); }
/* 56px de alto mínimo: por debajo de eso, un pulgar con prisa falla. */
.cn-mas, .cn-menos, .cn-reloj-btn, .cn-24, .cn-sec {
  min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--linea-fuerte); background: var(--hundido-2); color: var(--tinta);
  font: 700 19px/1 var(--g-mono, monospace); cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .06s ease-out;
}
/* Sumar puntos es el gesto que se repite cien veces por partido: pesa más que el
   resto y responde al dedo. Restar queda deliberadamente apagado y más bajo, para
   que no se confunda con sumar cuando se toca sin mirar. */
.cn-mas { font-size: 22px; background: var(--hundido-2); border-color: var(--linea-fuerte); }
.cn-mas:active { transform: scale(.96); }
.cn-mas:active, .cn-menos:active, .cn-reloj-btn:active, .cn-24:active, .cn-sec:active { background: var(--marca-suave); border-color: var(--marca); }
.cn-menos { min-height: 44px; font-size: 15px; color: var(--tinta-3); }
.cn-reloj-btn { font-size: 14px; background: var(--ok-bg); border-color: var(--ok-linea); color: var(--ok-tx); }
.cn-reloj-btn.andando { background: var(--alerta-bg); border-color: var(--alerta-linea); color: var(--alerta); }
.cn-24 { font-size: 16px; min-height: 46px; }
.cn-sec { font: 600 12px/1.2 var(--g-sans, inherit); min-height: 44px; color: var(--tinta-2); text-align: center; padding: 0 6px; }
.cn-pie { flex: none; margin: 0; padding: 8px var(--e4) calc(8px + env(safe-area-inset-bottom));
  text-align: center; font-size: 11px; color: var(--tinta-3); background: var(--papel);
  border-top: 1px solid var(--linea); }
.cn-pie b { color: var(--tinta-2); }

/* En horizontal —la tablet apoyada en la mesa— el tablero y los mandos conviven. */
@media (min-width: 700px) and (orientation: landscape) {
  .cn-tablero { padding: var(--e5) var(--e6); }
  .cn-mandos { grid-template-columns: 1fr 1fr 1fr; max-width: 960px; margin: 0 auto; width: 100%; }
  .cn-mas { min-height: 64px; font-size: 22px; }
}

/* ── Mesas de control ─────────────────────────────────────────────────────── */
.mesas h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--e3); font-size: 16px; color: #f1f1f5; }
.mesas h3 i { color: var(--marca-osc); }
.mesas-p { margin: 0 0 var(--e4); font-size: 13px; line-height: 1.6; color: var(--tinta-2); }
.mesas-p b { color: var(--tinta); }
.mesas-lista { display: flex; flex-direction: column; gap: var(--e3); }
.mesa { border: 1px solid var(--linea); background: var(--hundido); padding: var(--e3); }
.mesa-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.mesa-cab b { font-size: 14px; color: var(--tinta); }
.mesa-out:not(:empty) { margin-top: var(--e3); display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start; }
.mesa-qr { align-self: center; line-height: 0; padding: 8px; background: #fff; }
.mesa-qr img, .mesa-qr canvas { display: block; }
.mesa-noqr { font-size: 12px; color: var(--tinta-3); }
.mesa-url { width: 100%; font: 400 11px/1.4 var(--g-mono, monospace); padding: 8px;
  background: var(--fondo); border: 1px solid var(--linea); color: var(--tinta-2); }

/* ── El partido que se está jugando ───────────────────────────────────────── */
.hz-ficha.hz-vivo { border-color: var(--error-linea); background: var(--error-bg); }
.hz-envivo {
  float: right; font-style: normal; font-weight: 700; font-size: 9px; letter-spacing: .12em;
  color: var(--g-rojo-tx); display: inline-flex; align-items: center; gap: 4px;
}
.hz-envivo::before {
  content: ''; width: 6px; height: 6px; background: var(--g-rojo-tx); border-radius: 50%;
  animation: hzLate 1.4s ease-in-out infinite;
}
@keyframes hzLate { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Quien prefiere no ver cosas moviéndose no las ve: el color ya distingue el partido. */
@media (prefers-reduced-motion: reduce) { .hz-envivo::before { animation: none; } }

/* Un hijo de flex no baja de su ancho de contenido salvo que se le diga. El aviso de
   la página legal desbordaba 21 px dentro de su caja y empujaba 2 px de scroll lateral
   a la página entera a 375. Se arregla donde nace —el aviso— y no tapando el síntoma
   con `overflow:hidden` en el contenedor, que además cortaría el texto. */
.aviso { min-width: 0; }
.aviso > * { min-width: 0; overflow-wrap: break-word; }

/* ── Acceso: que el bloque de términos se pueda leer ──────────────────────── */
.acc-tyc { align-items: flex-start; gap: 11px; padding: 12px; background: var(--hundido);
  border: 1px solid var(--linea); }
.acc-tyc input { width: 18px; height: 18px; margin-top: 1px; }
.acc-tyc span { font-size: 12.5px; line-height: 1.55; color: var(--tinta-2);
  font-family: inherit; letter-spacing: 0; text-transform: none; }
.acc-op > span b { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.acc-op > span small { font-family: inherit; letter-spacing: 0; text-transform: none; }

/* El panel izquierdo del acceso tenía el logotipo a media altura y un socavón
   encima. Centrado y con la garra detrás ocupa lo que le toca. */
.acc-marca { display: flex; flex-direction: column; justify-content: center; }

/* ── Configuración: los controles en crudo ────────────────────────────────── */
/* El selector de archivo del navegador sale en inglés y con el estilo del sistema
   operativo. Se esconde y la etiqueta hace de botón, que además da sitio para decir
   qué archivo sirve. */
.cfg-archivo input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip-path: inset(50%); }
.cfg-archivo > span {
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  min-height: 44px; padding: 0 var(--e4); background: var(--hundido);
  border: 1px dashed var(--linea-fuerte); color: var(--tinta-2); font-size: 13px;
}
.cfg-archivo > span:hover { border-color: var(--marca); color: var(--tinta); }
.cfg-archivo input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.cfg-archivo em { font-style: normal; color: var(--tinta-3); font-size: 11px; }

.cfg-color { align-items: stretch; }
.cfg-color input[type=color] { width: 54px; height: 54px; }
.cfg-muestra { height: 54px; flex-direction: column; gap: 3px; }
.cfg-muestra span { font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: 0; text-transform: none; }
.cfg-muestra i { font-style: normal; font: 600 10px/1 var(--g-mono, monospace);
  letter-spacing: .1em; opacity: .75; }

/* `.cfg-archivo` es un <label> hijo directo de `.campo`, así que se comía la regla
   `.campo>label` del sistema y el botón salía «ELEGIR IMAGEN» en versalitas de 10 px.
   Es el mismo alcance de más que en el acceso: ahí la etiqueta es un control, no un
   rótulo de campo. */
.cfg-archivo, .cfg-archivo > span {
  font-family: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--tinta-2);
}
.cfg-archivo em { font-size: 11px; }

/* ── Legal en el pie ──────────────────────────────────────────────────────── */
.lp-pie-legal { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.lp-pie-legal a { color: var(--tinta-2); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--linea-fuerte); }
.lp-pie-legal a:hover { color: var(--marca-osc); text-decoration-color: currentColor; }
@media (max-width: 700px) { .lp-pie-legal { align-items: center; } }

/* ═══════════════════════════════════════════════════════════════════════════
   S194 · LA VENTANA DE CONFIGURACIÓN, EL ACCESO Y EL DOCUMENTO LEGAL
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Acceso: una sola letra para los rótulos ──────────────────────────────────
   Las pestañas iban en Inter 600/13 y el botón de debajo en Montserrat 700/12 con
   otro espaciado: dos rótulos en mayúsculas, uno encima del otro, en dos familias
   distintas. Ahora comparten métrica —Montserrat 700, 12 px, .14em— y el bloque se
   lee como una sola pieza. Inter se queda con lo que informa: el lema y la letra
   pequeña. */
.acc-tab {
  font: 700 12px/1 var(--g-sans); letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 8px; color: var(--tinta-3);
  transition: color .16s ease, border-color .16s ease;
}
.acc-tab.active { color: var(--tinta); }
.btn.acc-entrar { font-family: var(--g-sans); }
/* El logotipo pesaba 148 px al lado de un lema de 14: la columna se leía como un
   cartel con una nota al pie. A 118 las dos piezas pesan parecido. */
.acc-logo { width: 118px; }
.acc-lema { font-size: .9rem; max-width: 32ch; }
.acc-sep { margin: var(--e3) 0; }

/* El alto de la ventana se anima desde el JS (`animarAlto`); esto solo evita que el
   contenido se salga mientras crece. */
.acc-form { min-width: 0; }
@keyframes accEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.acc-entra { animation: accEntra .26s cubic-bezier(.22,.68,.28,1) both; }
@media (prefers-reduced-motion: reduce) { .acc-entra { animation: none; } }

/* «Coinciden / No coinciden», mientras se escribe. */
.acc-coincide {
  display: block; margin-top: 5px; font: 600 11px/1 var(--g-mono, monospace);
  letter-spacing: .08em; text-transform: uppercase; color: #3fae5a;
}
.acc-coincide.mal { color: var(--marca-osc-2, #e53935); }

/* ── Configuración: ventana con lista a la izquierda ──────────────────────────
   Como pestaña obligaba a abandonar lo que estuvieras haciendo, y en pantalla ancha
   era una columna de 680 px con 760 de negro a los lados. Como ventana se abre
   encima, ocupa lo que le toca, y los apartados se eligen en una lista vertical
   —igual que los pop-up de SISPRO— en vez de bajando por un formulario largo. */
.modal-cfg {
  max-width: 960px; padding: 0; border: 1px solid var(--linea-fuerte); border-radius: 0;
  display: flex; flex-direction: column; height: min(84vh, 660px); overflow: hidden;
}
.cfgw-cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: 14px var(--e4); border-bottom: 1px solid var(--linea); background: var(--hundido);
  flex: none;
}
.cfgw-cab h3 {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font: 700 13px/1 var(--g-sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta);
}
.cfgw-cab h3 i { color: var(--marca-osc); font-size: 15px; }
.cfgw-x {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; background: none; border: 1px solid transparent;
  color: var(--tinta-3); cursor: pointer; font-size: 17px;
}
.cfgw-x:hover { color: var(--tinta); border-color: var(--linea-fuerte); }

.cfgw-cuerpo { display: flex; flex: 1; min-height: 0; }
.cfgw-nav {
  flex: none; width: 208px; border-right: 1px solid var(--linea);
  background: var(--hundido); overflow-y: auto; padding: var(--e2) 0;
}
.cfgw-op {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
  padding: 0 var(--e3) 0 13px; background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--tinta-2); font-size: 13px;
  border-left: 3px solid transparent;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.cfgw-op i { color: var(--tinta-3); font-size: 14px; flex: none; transition: color .14s ease; }
.cfgw-op:hover { color: var(--tinta); background: var(--papel); }
.cfgw-op.active {
  color: var(--tinta); background: var(--papel); border-left-color: var(--marca); font-weight: 600;
}
.cfgw-op.active i { color: var(--marca-osc); }
.cfgw-op:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

.cfgw-panel { flex: 1; min-width: 0; overflow-y: auto; padding: var(--e5) var(--e5) var(--e6); }
.cfgw-sec > h4 {
  margin: 0 0 6px; font: 700 16px/1.25 var(--g-sans); letter-spacing: -.01em; color: #f1f1f5;
}
.cfgw-sec .campo + .campo, .cfgw-sec .aviso, .cfgw-sec .cfg-color { margin-top: var(--e3); }
.cfgw-sec .cfg-sub { margin: var(--e5) 0 6px; font-size: 13px; color: var(--tinta);
  padding-top: var(--e4); border-top: 1px solid var(--linea); }
.cfg-acciones { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--linea); }
.cfg-acciones .btn { min-height: 44px; }
/* Los términos dentro de la ventana: su propio marco y su propio scroll, para que se
   note que es un documento metido acá y no el final de un formulario. */
.cfg-legal {
  border: 1px solid var(--linea); background: var(--hundido); padding: var(--e4);
  /* Ocupa el alto que sobra en vez de un 46vh fijo: con el tope quedaba una ventana de
     lectura pequeña y cien píxeles de vacío debajo. */
  flex: 1; min-height: 0; overflow-y: auto;
}
.cfg-legal .lg-h:first-of-type, .cfg-legal .lg-ficha { margin-top: 0; }
.cfg-legal .lg-h { font-size: 15px; margin-top: 24px; }

@media (max-width: 760px) {
  .modal-cfg { height: calc(100dvh - 2 * var(--e4)); max-width: none; }
  .cfgw-cuerpo { flex-direction: column; }
  /* La lista pasa a ser una tira horizontal: en vertical se comía media pantalla y
     dejaba el contenido en una rendija. */
  .cfgw-nav {
    width: auto; display: flex; overflow-x: auto; overflow-y: hidden; padding: 0;
    border-right: 0; border-bottom: 1px solid var(--linea); scrollbar-width: none;
  }
  .cfgw-nav::-webkit-scrollbar { display: none; }
  .cfgw-op {
    width: auto; flex: none; white-space: nowrap; padding: 0 14px; min-height: 46px;
    border-left: 0; border-bottom: 3px solid transparent;
  }
  .cfgw-op.active { border-left-color: transparent; border-bottom-color: var(--marca); }
  .cfgw-panel { padding: var(--e4) var(--e4) var(--e6); }
  .cfg-legal { max-height: none; border: 0; padding: 0; background: none; }
}

/* ── Legal: es un documento, no una sección de la portada ─────────────────────
   Con la cabecera de la landing la firma «GRID» salía a 58 px bajo un título de 32
   —casi el doble— y el trazo de la garra se montaba encima del título. Una página de
   términos no necesita firma de marca: necesita jerarquía y un camino de vuelta. */
.lg-doc { max-width: 880px; }
.lg-cab { margin-bottom: 36px; }
.lg-volver {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 22px;
  padding: 0 14px 0 8px; min-height: 38px;
  border: 1px solid var(--linea-fuerte); background: var(--hundido); color: var(--tinta-2);
  font-size: 13px; border-radius: 0;
}
.lg-volver:hover { color: var(--tinta); border-color: var(--marca); }
.lg-volver i { font-size: 15px; }
.lg-titulo {
  font-family: var(--g-sans); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; font-size: clamp(21px, 2.8vw, 30px); line-height: 1.12;
  color: #f1f1f5; margin: 10px 0 0;
}
.lg-bajada {
  margin: 12px 0 0; max-width: 60ch; color: var(--tinta-2);
  font-size: 14.5px; line-height: 1.6;
}
.lp-legal { padding-block: 36px 72px; }

/* La columna de marca se quedaba centrada: con «Entrar» encajaba, pero en «Crear cuenta»
   la caja mide 970 px y el logotipo acababa flotando en mitad de un vacío de 380. Se
   ancla arriba —logotipo, lema debajo, la garra abajo a la derecha— y así crece sin
   dejar socavones. */
@media (min-width: 760px) {
  .acc-marca { justify-content: flex-start; padding-top: var(--e6); }
  .acc-marca::after { width: 260px; height: 292px; right: -46px; bottom: -36px; }
}

/* Los términos dentro de la ventana traían la ficha del responsable con `.lp-rev`, que
   nace invisible y solo se enciende cuando el observador de la portada la ve pasar. Ahí
   dentro ese observador no corre nunca: el bloque estaba, ocupaba su sitio y no se veía.
   Un hueco de 150 px al principio de unos términos parece un error de maquetación y es
   contenido legal escondido. */
.cfg-legal .lp-rev { opacity: 1 !important; animation: none !important; transform: none !important; }
.cfg-legal .lg-ficha { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 22px; }
.cfg-legal .lg-ficha b { font-size: 12.5px; }
/* El enlace salía en el azul por defecto del navegador, que no es de esta paleta. */
.cfgw-sec a { color: var(--marca-osc); text-decoration: underline; text-underline-offset: 2px; }

/* La acción principal se va al fondo del panel cuando la sección es corta: así «Guardar»
   está siempre en el mismo sitio y el panel no parece cortado a media altura. */
.cfgw-sec { display: flex; flex-direction: column; min-height: 100%; }
.cfgw-sec > .cfg-acciones { margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   S201 · LA FILA DEL PANEL ES EL BOTÓN
   ═══════════════════════════════════════════════════════════════════════════ */

/* Texto que solo leen los lectores de pantalla. La columna de acciones no lleva rótulo
   visible —sería ruido— pero sin nombre la tabla se lee «columna cuatro». */
.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* La mitad que faltaba del estándar de tablas: el envoltorio con scroll ya estaba
   (`.tabla-caja`), la de esconder columnas no. En un teléfono, cinco columnas no caben
   y el scroll lateral esconde justo la que importa. */
@media (max-width: 560px) { .mob-hide { display: none !important; } }

.tb-torneos tbody tr { cursor: pointer; transition: background .12s ease; }
.tb-torneos tbody tr:hover { background: var(--hundido); }
/* El foco se ve en el botón de la fila, que es lo que alcanza el tabulador; la fila
   entera no se enfoca a propósito —un `<tr>` con `tabindex` se anuncia «fila» y no dice
   que abra nada—. */
.tb-torneos tbody tr:has(.tb-mas:focus-visible) { background: var(--hundido); }
.tb-torneos .tb-acc { text-align: right; width: 1%; white-space: nowrap; }
.tb-mas { min-width: 40px; padding: 0 10px; color: var(--tinta-2); }
.tb-mas:hover { color: var(--tinta); }
.tb-torneos .chip + .chip { margin-left: 6px; }
/* La visibilidad es un dato de segunda fila: se lee si se busca, no compite con el estado. */
.tb-vis { background: transparent; border: 1px solid var(--linea-fuerte); color: var(--tinta-3); }
@media (max-width: 560px) {
  .tb-torneos .tb-vis { display: none; }   /* va en el menú, como la fecha */
  .tb-torneos tbody td { padding-block: 13px; }
}
/* El diálogo recibe el foco para que el tabulador y el lector entren por el título; no
   debe pintar anillo —no es un control, es el contenedor—. */
.hoja:focus { outline: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   S201 · TORRE DE CONTROL
   El `gap` de 1 px sobre fondo de línea dibuja la retícula sin un solo borde:
   es la misma rejilla expuesta del sistema, y no hay radios que apagar.
   ═══════════════════════════════════════════════════════════════════════════ */
.tr {
  display: grid; grid-template-columns: 62fr 38fr;
  height: 100dvh; gap: 1px; background: var(--linea);
}
.tr-carga { display: grid; place-items: center; gap: var(--e4); height: 100dvh; color: var(--tinta-3); }
.tr-canchas, .tr-lado { background: var(--g-negro); min-width: 0; display: flex; flex-direction: column; }
.tr-lado { overflow-y: auto; }

.tr-cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: 12px var(--e4); border-bottom: 1px solid var(--linea); flex: none;
}
.tr-tit b { display: block; font: 700 15px/1.2 var(--g-sans); letter-spacing: .02em; color: #f1f1f5; }
.tr-tit small { display: block; margin-top: 2px; font: 500 11px/1 var(--g-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-3); }
.tr-cab-d { display: flex; align-items: center; gap: var(--e3); }
.tr-hora { font: 700 20px/1 var(--g-mono); color: var(--tinta-2); letter-spacing: .02em; }
/* Que la propia torre avise cuando deja de recibir. Una pantalla congelada que nadie nota
   es peor que una apagada: la mesa sigue leyendo un marcador viejo convencida de que está
   al día. Por eso el rótulo cambia solo, sin que nadie pregunte. */
.tr-red {
  font: 700 10px/1 var(--g-mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 9px; border: 1px solid var(--linea-fuerte); color: var(--tinta-3);
}
.tr-red.flojo { color: #e0a33a; border-color: #6b5220; }
.tr-red.mal   { color: #ff6b6b; border-color: #7a2b2b; background: rgba(160,40,40,.14); }
.tr-x {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; color: var(--tinta-3); cursor: pointer; font-size: 18px;
}
.tr-x:hover { color: var(--tinta); border-color: var(--linea-fuerte); }

.tr-rejilla {
  flex: 1; display: grid; gap: 1px; background: var(--linea);
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  border-top: 1px solid var(--linea); min-height: 0;
}
.tr-vacia { background: var(--g-negro); display: grid; place-items: center; color: var(--tinta-3); padding: var(--e5); }

/* La baldosa se mide a sí misma: con `vw` el marcador de seis canchas no cabría en una
   tele, y con un tamaño fijo se perdería con dos. */
.tr-b {
  background: var(--g-negro); container-type: inline-size;
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border-left: 3px solid transparent; cursor: pointer;
}
.tr-b.vivo { border-left-color: var(--marca); }
.tr-b.fin  { opacity: .62; }
.tr-b:hover { background: #0e1016; }
.tr-b-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 12px 6px; font: 600 11px/1 var(--g-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-3); flex: none;
}
.tr-b-c { color: var(--tinta); font-weight: 700; }
/* `--marca-osc-2` es el rojo para texto sobre BLANCO (#a42525): sobre la baldosa negra
   da 2,67:1 y el reloj es justo el número que más se mira. El sistema ya tiene el rojo
   de texto sobre negro, documentado en 4,6:1. */
.tr-b-est b { color: var(--g-rojo-tx, #e53935); font-size: 13px; letter-spacing: .04em; }
.tr-b-eq { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* El color del equipo, en banda: a cuatro metros se lee antes que el nombre. */
.tr-eq {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  min-height: 0; border-left: 9px solid var(--eq, #5b6070);
}
.tr-eq + .tr-eq { border-top: 1px solid var(--linea); }
.tr-eq-n {
  flex: 1; min-width: 0; font-weight: 700; color: var(--tinta);
  font-size: clamp(12px, 6.5cqw, 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-eq-p {
  font: 700 clamp(30px, 22cqw, 150px)/0.9 var(--g-mono); color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.tr-b-pie {
  flex: none; padding: 7px 12px 10px; font-size: 11.5px; color: var(--tinta-3);
  display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--linea);
}
.tr-sinmesa { color: #e0a33a; display: inline-flex; align-items: center; gap: 6px; }
.tr-b-vacia { justify-content: center; align-items: center; gap: 8px; cursor: default; }
.tr-nada { color: var(--tinta-3); font: 500 12px/1 var(--g-mono); letter-spacing: .12em; text-transform: uppercase; }

.tr-lado-sec { padding: var(--e4); border-bottom: 1px solid var(--linea); }
.tr-h { margin: 0 0 var(--e3); font: 700 11px/1 var(--g-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-3); }
.tr-liga + .tr-liga { margin-top: var(--e4); }
.tr-liga h4 { margin: 0 0 8px; font-size: 13px; color: var(--tinta); }
.tr-nota { color: var(--tinta-3); font-size: 12px; margin: 0; }
.tr-mesas { list-style: none; margin: 0 0 var(--e3); padding: 0; }
.tr-mesas li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--linea); font-size: 13px; color: var(--tinta-2); }
.tr-mesas li:last-child { border-bottom: 0; }
.tr-mesas b { color: var(--tinta); font: 700 12px/1 var(--g-mono); min-width: 34px; }
.tr-mesas em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--tinta-3); }
.tr-mesas li.sin span { color: #e0a33a; }
.tr-qr { width: 100%; border-radius: 0; }

/* En vertical la tabla va debajo, no al lado: 38 % de un teléfono no es una columna. */
@media (max-width: 900px) {
  .tr { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; height: auto; min-height: 100dvh; }
  .tr-lado { overflow: visible; }
  .tr-rejilla { grid-template-columns: 1fr !important; }
  /* En una sola columna la baldosa es ancha y baja: el mismo `cqw` daba un marcador de
     150 px en una franja de 200 y se comía el nombre del equipo. */
  .tr-eq-p { font-size: clamp(30px, 11cqw, 76px); }
  .tr-eq-n { font-size: clamp(13px, 4cqw, 20px); }
  body.es-torre { overflow: auto; }
}
/* En un teléfono la cabecera se partía en cinco renglones: el nombre en dos, el resumen
   en dos y «AL DÍA» en otros dos. La torre en vertical es la vista de consulta rápida —
   la cabecera tiene que ocupar una franja, no un tercio de la pantalla. */
@media (max-width: 560px) {
  .tr-cab { padding: 10px var(--e3); gap: 10px; }
  .tr-tit { min-width: 0; }
  .tr-tit b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tr-tit small { white-space: nowrap; font-size: 10px; letter-spacing: .06em; }
  .tr-cab-d { gap: 8px; flex: none; }
  .tr-red { white-space: nowrap; padding: 5px 7px; font-size: 9px; letter-spacing: .1em; }
  .tr-hora { font-size: 16px; }
  .tr-x { width: 34px; height: 34px; }
}

/* ═══ ASISTENTE POR PASOS ═════════════════════════════════════════════════
   Una tira horizontal con `scroll-snap`: en el celular se pasa con el dedo, en el
   portátil con los botones, y el alto lo pone el panel activo. Antes el asistente
   repintaba el modal entero en cada paso —salto seco de tamaño— y el primero pedía
   siete cosas de golpe. */
.wz-cab { display: flex; align-items: baseline; gap: var(--e3); margin-bottom: 10px; }
.wz-cab h3 { margin: 0; flex: 1; min-width: 0; }
.wz-n {
  font: 800 11px/1 var(--g-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
}
.wz-barra { height: 3px; background: var(--linea-fuerte); margin-bottom: var(--e4); }
.wz-barra i {
  display: block; height: 100%; width: 16.7%; background: var(--marca);
  transition: width .34s cubic-bezier(.22,.68,.28,1);
}
.wz {
  position: relative;           /* `offsetLeft` de los paneles se mide contra la tira */
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  min-height: 210px; max-height: min(64vh, 560px);
  transition: height .34s cubic-bezier(.22,.68,.28,1);
}
.wz::-webkit-scrollbar { display: none; }
.wz-p {
  flex: 0 0 100%; min-width: 100%; scroll-snap-align: start;
  overflow-y: auto; padding: 3px;   /* el relleno deja ver el halo de foco, que si no se recorta */
}
.wz-p:focus { outline: none; }      /* el panel se enfoca para el lector de pantalla, no para pintarlo */
.wz-p .pista { margin-bottom: var(--e3); }
.wz-msg:empty { display: none; }
.wz-msg { margin-top: var(--e3); }
/* La barra de botones vive fuera de la tira: en un panel largo seguiría siendo visible. */
.wz + .modal-acciones { margin-top: var(--e4); }

@media (prefers-reduced-motion: reduce) {
  .wz { scroll-behavior: auto; transition: none; }
  .wz-barra i { transition: none; }
}
/* En un teléfono la tira se lleva la pantalla: sin el tope, un panel de seis grupos
   empuja los botones fuera de la vista y hay que hacer scroll para seguir. */
@media (max-width: 560px) {
  .wz { max-height: 62vh; min-height: 180px; }
  .wz-cab h3 { font-size: 1rem; }
}

/* ═══ LA GRADA ════════════════════════════════════════════════════════════
   La pantalla de la familia. Un teléfono en una mano, de pie, a cuatro metros de la
   cancha: el marcador manda, el resto acompaña. Medido antes de escribirla: lo que
   recibía una familia era la clasificación del organizador —3,4 pantallas de scroll de
   una tabla de ocho columnas— y un horario titulado «Mesa de control». */
.gr-cab {
  display: flex; align-items: center; gap: var(--e3);
  padding: 10px var(--e4); border-bottom: 1px solid var(--linea);
  background: var(--papel); position: sticky; top: 0; z-index: 5;
}
.gr-x {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: var(--hundido); border: 1px solid var(--linea-fuerte); color: var(--tinta);
  cursor: pointer; border-radius: 0;
}
.gr-x:hover { background: var(--hundido-2); }
.gr-tit { flex: 1; min-width: 0; }
.gr-tit b { display: block; font: 800 14px/1.2 var(--g-sans); text-transform: uppercase;
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-tit small { display: block; font-size: 11px; color: var(--tinta-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.gr-red {
  flex: none; font: 800 9.5px/1 var(--g-sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 8px; border: 1px solid var(--linea-fuerte); color: var(--tinta-3);
}
.gr-red.flojo { color: var(--alerta-tx, #f0a500); border-color: currentColor; }
.gr-red.mal   { color: var(--g-rojo-tx, #e53935); border-color: currentColor; }

/* ── a quién sigo ── */
.gr-yo {
  display: flex; align-items: center; gap: var(--e3); width: 100%;
  padding: var(--e3) var(--e4); background: var(--hundido); border: 0;
  border-bottom: 1px solid var(--linea); color: var(--tinta); cursor: pointer; text-align: left;
}
.gr-yo:hover { background: var(--hundido-2); }
.gr-yo i:first-child, .gr-eq-b i { width: 10px; align-self: stretch; min-height: 34px;
  background: var(--eq, #5b6070); flex: none; }
.gr-yo span, .gr-eq-b span { flex: 1; min-width: 0; }
.gr-yo b, .gr-eq-b b { display: block; font: 800 15px/1.2 var(--g-sans); text-transform: uppercase; }
.gr-yo em, .gr-eq-b em { display: block; font-style: normal; font-size: 11px; color: var(--tinta-3); }

/* ── elegir equipo ── */
.gr-elige { padding: var(--e5) var(--e4); }
.gr-elige h2 { font: 800 1.35rem/1.15 var(--f-titulo, var(--g-sans)); margin-bottom: 6px; }
.gr-nota { color: var(--tinta-3); font-size: .9rem; margin-bottom: var(--e4); }
.gr-eqs { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.gr-eq-b { display: flex; align-items: center; gap: var(--e3); padding: var(--e3);
  background: var(--papel); border: 0; color: var(--tinta); cursor: pointer; text-align: left;
  min-height: 56px; }          /* 56 px: el objetivo táctil, no un icono al lado */
.gr-eq-b:hover { background: var(--hundido); }
.gr-eq-b.on { background: var(--hundido-2); outline: 2px solid var(--marca); outline-offset: -2px; }

/* ── la tira de partidos ── */
.gr-tira {
  /* `position: relative` no es decoración: sin ella el `offsetParent` de las tarjetas es
     el `<body>` y `offsetLeft` devuelve la posición en la PÁGINA —24 px de relleno
     incluidos—, no dentro de la tira. Hoy cuela porque el encaje corrige la diferencia;
     con un relleno mayor que medio ancho de tarjeta, la tira arrancaría en el partido
     equivocado. */
  position: relative;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none;
}
.gr-tira::-webkit-scrollbar { display: none; }
.gr-c { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; padding: var(--e4); }
.gr-c-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e2);
  font: 700 11.5px/1 var(--g-sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: var(--e3); }
.gr-c-est { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gr-c.vivo .gr-c-est { color: var(--g-rojo-tx, #e53935); }
.gr-c.fin  .gr-c-est { color: var(--tinta-2); }
.gr-viva { width: 7px; height: 7px; background: currentColor; animation: grLatido 1.4s infinite; }
@keyframes grLatido { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.gr-c-eq { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.gr-lado { display: flex; align-items: center; gap: var(--e3); padding: var(--e3);
  background: var(--papel); border-left: 9px solid var(--eq, #5b6070); }
/* El equipo que sigue la familia va marcado: en un partido entre «Naranja» y «Rojo», a
   cuatro metros y con el sol de frente, saber cuál de los dos es el tuyo no es evidente. */
.gr-lado.mio { background: var(--hundido-2); }
.gr-lado.mio .gr-lado-n { color: var(--tinta); font-weight: 800; }
.gr-lado-n { flex: 1; min-width: 0; font: 700 1.05rem/1.2 var(--g-sans); text-transform: uppercase;
  color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; }
.gr-lado-p { font: 800 2.6rem/1 var(--g-mono); font-variant-numeric: tabular-nums; }
/* Antes de empezar, el 0-0 no es un marcador: es que todavía no hay nada. */
.gr-c.previo .gr-lado-p { color: var(--tinta-3); opacity: .5; }
.gr-c-pie { min-height: 1.2em; margin-top: var(--e2); font-size: .88rem; color: var(--tinta-2); }

.gr-puntos { display: flex; justify-content: center; gap: 7px; padding: 0 0 var(--e4); }
.gr-puntos i { width: 7px; height: 7px; background: var(--linea-fuerte); cursor: pointer;
  border: 0; padding: 0; }
.gr-puntos i.on { background: var(--marca); }

/* ── la tabla, en corto ── */
.gr-tabla { padding: var(--e4); border-top: 1px solid var(--linea); }
.gr-tabla h3 { font: 800 11.5px/1 var(--g-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: var(--e3); }
.gr-t { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gr-t th { font: 700 10px/1 var(--g-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-3); text-align: left; padding: 0 6px 8px; }
.gr-t td { padding: 9px 6px; border-top: 1px solid var(--linea); }
.gr-t .num { text-align: right; width: 42px; }
.gr-t .pts { font-weight: 800; }
.gr-t .gr-t-eq { display: flex; align-items: center; gap: 8px; }
.gr-t tr.yo td { background: var(--hundido-2); font-weight: 700; }
.gr-t tr.yo td:first-child { box-shadow: inset 3px 0 0 var(--marca); }

.gr-carga, .gr-vacia { padding: var(--e6) var(--e4); text-align: center; color: var(--tinta-3); }
.gr-vacia i { font-size: 2rem; display: block; margin-bottom: var(--e3); }
.gr-vacia b { color: var(--tinta); }

/* En un portátil la tira no tiene por qué ocupar 1400 px: la tarjeta es una ficha. */
@media (min-width: 720px) {
  #gradaBody { max-width: 560px; margin: 0 auto; border-inline: 1px solid var(--linea);
    min-height: 100dvh; }
  .gr-lado-p { font-size: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-tira { scroll-behavior: auto; }
  .gr-viva { animation: none; }
}

/* La banda que lleva a la grada desde el evento público. */
.gr-banda {
  display: flex; align-items: center; gap: var(--e3); width: 100%; text-align: left;
  padding: var(--e3) var(--e4); margin-bottom: var(--e4); cursor: pointer;
  background: var(--hundido); border: 1px solid var(--linea-fuerte); color: var(--tinta);
  border-left: 4px solid var(--marca);
}
.gr-banda:hover { background: var(--hundido-2); }
.gr-banda > i:first-child { font-size: 1.3rem; color: var(--marca); flex: none; }
.gr-banda > i:last-child { color: var(--tinta-3); flex: none; }
.gr-banda span { flex: 1; min-width: 0; }
.gr-banda b { display: block; font: 800 14px/1.25 var(--g-sans); }
.gr-banda em { display: block; font-style: normal; font-size: 12.5px; color: var(--tinta-2);
  line-height: 1.4; margin-top: 2px; }

/* ═══ LA ARENA ════════════════════════════════════════════════════════════
   El marcador del pabellón: UN partido en el televisor, leído desde veinte metros.
   Todo lo que no sea el marcador va en una franja fina; el marcador se lleva el resto.

   El tamaño se limita por LOS DOS EJES —`min(vh, vw)`— y no solo por el alto: un
   marcador dimensionado con `vh` a secas desborda a lo ancho en cuanto llega a dos
   cifras en una pantalla apaisada, y esta pantalla existe para las apaisadas. */
/* Una columna de alto completo con la cabecera y el pie fijos y el marcador quedándose lo
   que sobre. Antes eran tres altos en `vh` que sumaban 100 — y dejaban de sumar 100 en
   cuanto un `min-height` entraba en juego: en una tableta apaisada sobraban 9 px y la
   página, que no debería tener scroll, lo tenía. */
#arenaBody { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.ar-cab {
  display: flex; align-items: center; gap: var(--e4); flex: none;
  height: 9vh; min-height: 44px; padding: 0 clamp(12px, 2vw, 32px);
  border-bottom: 1px solid var(--linea); background: var(--papel);
}
.ar-c {
  font: 800 clamp(13px, 2.4vh, 30px)/1 var(--g-sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta); background: var(--hundido); border: 1px solid var(--linea-fuerte);
  padding: .5em .8em; cursor: pointer; flex: none; border-radius: 0;
}
.ar-c:hover { background: var(--hundido-2); }
.ar-ev {
  flex: 1; min-width: 0; font: 700 clamp(11px, 2vh, 24px)/1 var(--g-sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El aviso de congelación ocupa sitio de verdad: es el fallo más caro de esta pantalla
   —doscientas personas dando por bueno un marcador de hace cinco minutos—. */
.ar-red {
  flex: none; font: 800 clamp(10px, 1.9vh, 22px)/1 var(--g-sans); letter-spacing: .12em;
  text-transform: uppercase; padding: .5em .7em;
  border: 2px solid var(--linea-fuerte); color: var(--tinta-3);
}
.ar-red.flojo { color: var(--alerta-tx, #f0a500); border-color: currentColor; }
.ar-red.mal   { color: var(--g-rojo-tx, #e53935); border-color: currentColor;
                animation: arLatido 1.2s infinite; }
@keyframes arLatido { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* Columnas en fracciones FIJAS, no `auto`. Con la del medio en `auto` el reloj mandaba
   sobre el reparto: a 1920 se llevaba 1000 px y dejaba 460 por equipo, así que el marcador
   —dimensionado contra el viewport— se salía 41 px de su columna y la cortaba. */
.ar {
  display: grid; grid-template-columns: 38fr 24fr 38fr; align-items: stretch;
  flex: 1; min-height: 0; gap: 1px; background: var(--linea);
}
/* Cada columna se mide a SÍ MISMA (`cqw`) y no al viewport: es lo único que garantiza que
   la cifra quepa, porque lo que la limita es el ancho de su columna, no el de la pantalla.
   El tope se calcula para TRES cifras —un partido puede pasar de 100— y el `vh` evita que
   en una pantalla muy ancha y baja el marcador se coma el alto. */
.ar-eq {
  container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(4px, 1.5vh, 18px); padding: clamp(8px, 2vh, 28px) clamp(6px, 1.5vw, 24px);
  background: var(--papel); border-top: clamp(8px, 1.6vh, 20px) solid var(--eq, #5b6070);
  min-width: 0; overflow: hidden;
}
/* El nombre se PARTE en dos renglones en vez de cortarse: los equipos de colores caben en
   uno, pero un torneo externo llega con «Colegio San Ignacio» y recortarlo a «Colegio San…»
   en el marcador del pabellón deja a media tribuna sin saber quién juega. */
.ar-eq-n {
  font: 800 clamp(15px, min(7vh, 16cqw), 72px)/1.05 var(--g-sans); letter-spacing: .02em;
  text-transform: uppercase; text-align: center; color: var(--tinta);
  max-width: 100%; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}
.ar-eq-n.medio { font-size: clamp(15px, min(5.5vh, 11cqw), 56px); }
.ar-eq-n.largo { font-size: clamp(14px, min(4.5vh, 8cqw), 44px); }
.ar-eq-p {
  font: 800 clamp(56px, min(48vh, 54cqw), 520px)/0.85 var(--g-mono);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.ar.previo .ar-eq-p { color: var(--tinta-3); opacity: .45; }

.ar-medio {
  container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(4px, 1.2vh, 14px); padding: 0 clamp(6px, 1.5vw, 28px); background: var(--papel);
  min-width: 0; overflow: hidden;
}
.ar-per {
  font: 800 clamp(11px, min(4vh, 18cqw), 48px)/1 var(--g-sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-3); white-space: nowrap;
}
.ar-reloj {
  font: 800 clamp(26px, min(14vh, 26cqw), 150px)/1 var(--g-mono); font-variant-numeric: tabular-nums;
  color: var(--tinta); white-space: nowrap;
}
.ar.vivo .ar-reloj { color: var(--g-rojo-tx, #e53935); }
.ar-reloj.ar-txt { color: var(--tinta-3); }

.ar-pie {
  display: flex; align-items: center; gap: clamp(8px, 2vw, 28px); flex: none;
  height: 13vh; min-height: 40px; padding: 0 clamp(12px, 2vw, 32px);
  border-top: 1px solid var(--linea); background: var(--hundido); overflow: hidden;
}
.ar-pie-e { font: 800 clamp(10px, 2vh, 24px)/1 var(--g-sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-3); flex: none; }
.ar-pie-h { font: 800 clamp(16px, min(5vh, 4vw), 56px)/1 var(--g-mono); color: var(--tinta); flex: none; }
.ar-pie-t { font: 700 clamp(13px, min(3.6vh, 3vw), 40px)/1.1 var(--g-sans); text-transform: uppercase;
  color: var(--tinta-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ar-nada, .ar-carga { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--e3); text-align: center; padding: var(--e5); }
.ar-nada b { font: 800 clamp(20px, 5vh, 56px)/1.1 var(--g-sans); text-transform: uppercase; }
.ar-nada span { color: var(--tinta-3); font-size: clamp(13px, 2.2vh, 24px); }

/* En vertical —una tableta de pie, o el portátil girado— las tres columnas no caben:
   los equipos se apilan y el reloj queda en medio, que es como se lee un marcador. */
@media (max-aspect-ratio: 1/1) {
  .ar { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
  /* En vertical la baldosa es ancha y baja: el mismo `cqw` daría una cifra más alta que su
     propia fila. Manda el alto de la fila, y el nombre pasa al lado en vez de encima. */
  .ar-eq { flex-direction: row; justify-content: space-between; gap: var(--e4);
    border-top: 0; border-left: clamp(10px, 3vw, 28px) solid var(--eq, #5b6070); }
  /* De pie el nombre va al LADO del marcador, con la mitad del ancho: aquí no se recorta a
     tres renglones, se deja correr. Un nombre largo hace crecer su fila y el marcador se
     achica solo, que es mejor que enseñar «Colegio San Ignacio de…». */
  .ar-eq-n { text-align: left; font-size: clamp(14px, min(6vw, 26cqw), 48px);
    -webkit-line-clamp: none; line-clamp: none; display: block; }
  .ar-eq-n.medio { font-size: clamp(14px, min(5vw, 22cqw), 40px); }
  .ar-eq-n.largo { font-size: clamp(13px, min(4vw, 17cqw), 32px); }
  .ar-eq-p { font-size: clamp(44px, min(30vh, 26cqw), 200px); }
  .ar-medio { flex-direction: row; gap: var(--e4); padding: clamp(6px, 2vh, 18px); }
  .ar-reloj { font-size: clamp(26px, min(9vh, 22cqw), 110px); }
}
@media (prefers-reduced-motion: reduce) { .ar-red.mal { animation: none; } }

/* ═══ §18 · ELEGIR FORMATO ────────────────────────────────────────────────────
   Una fila por opción: icono · nombre y una línea · la cifra que decide, a la derecha.

   El detalle NO va en un panel al lado, como en la referencia que lo inspiró: ese panel
   se llena al PASAR EL RATÓN, y en un teléfono no hay ratón —quedaría una columna muerta
   en la mitad de los anchos—. Aquí se despliega DENTRO de la opción elegida, así que hay
   una sola columna en todos los tamaños y el botón de confirmar nace donde se está
   mirando. El detalle es HERMANO de la fila y no hijo: un botón dentro de otro botón no
   es HTML válido y el navegador lo desarma. */
.fmt-lista { display: grid; gap: var(--e2); }

.fmt-op {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--e3); width: 100%; text-align: left; min-height: 60px;
  padding: var(--e3); border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--papel); color: var(--tinta); font-family: inherit; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.fmt-op:hover:not(:disabled) { background: var(--hundido); border-color: var(--tinta-3); }
.fmt-op[aria-checked="true"] { border-color: var(--marca); background: var(--hundido); }
.fmt-op:disabled { opacity: .5; cursor: not-allowed; }

.fmt-ico { display: flex; gap: 2px; color: var(--marca); font-size: 1.15rem; line-height: 1; }
.fmt-op:disabled .fmt-ico { color: var(--tinta-3); }

.fmt-tx { display: grid; gap: 2px; min-width: 0; }
.fmt-tx b { font-size: .98rem; font-weight: 700; }
.fmt-tx em { font-style: normal; font-size: .84rem; color: var(--tinta-2); }

/* La cifra de la derecha es el argumento entero de la pantalla: en una jornada formativa
   se elige formato por cuántos partidos juega cada niño, no por el nombre del formato. */
.fmt-meta { text-align: right; font-family: var(--g-mono); font-size: 1.1rem; font-weight: 700;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.fmt-meta small { display: block; font-family: var(--g-sans); font-size: .7rem;
  font-weight: 600; color: var(--tinta-2); letter-spacing: .04em; text-transform: uppercase; }
/* En el asistente todavía no hay equipos, así que la derecha lleva el torneo conocido que
   tiene esta forma. Es texto, no cifra: ni mono ni tabular. */
.fmt-meta.ej { font-family: var(--g-sans); font-size: .8rem; font-weight: 600;
  color: var(--tinta-2); white-space: normal; max-width: 11ch; line-height: 1.25; }

.fmt-mas { display: none; padding: 0 var(--e3) var(--e3); margin-top: calc(var(--e2) * -1);
  border: 1px solid var(--marca); border-top: 0;
  border-radius: 0 0 var(--r) var(--r); background: var(--hundido); }
.fmt-op[aria-checked="true"] { border-radius: var(--r) var(--r) 0 0; }
.fmt-op[aria-checked="true"] + .fmt-mas { display: block; }

.fmt-rot { font-family: var(--g-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3);
  margin: var(--e3) 0 var(--e2); }
.fmt-pasos { display: grid; gap: 6px; margin-bottom: var(--e3); }
.fmt-paso { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.fmt-paso i { color: var(--marca); font-size: .95rem; }
.fmt-cifras { display: flex; gap: var(--e4); flex-wrap: wrap; font-size: .84rem;
  font-variant-numeric: tabular-nums; margin-bottom: var(--e3); color: var(--tinta-2); }
.fmt-cifras b { font-family: var(--g-mono); font-size: 1rem; color: var(--tinta); }
/* Los distintivos —«Recomendado», «No cabe»— van en la FILA y no en el detalle: son
   justamente lo que decide cuál abrir. En el detalle no los vería nadie hasta después de
   elegir, que es tarde. «Cabe bien» no se enseña: es lo normal, y decirlo en las cuatro
   filas es tinta que no cambia ninguna decisión. */
.fmt-n { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Rótulo de sección dentro de una hoja. Mismo tipo de letra que el del detalle de un
   formato: son la misma idea —decir de qué va el bloque que viene— en dos sitios. */
.hoja-rot { font-family: var(--g-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3);
  padding: var(--e3) var(--e3) 4px; }

/* ─── Los tres niveles de la columna del evento ───────────────────────────────
   El rótulo solo existe para quien organiza y solo donde la navegación es una COLUMNA.
   En la tira horizontal (<1024px) no cabe, y por debajo de 900px la columna entera
   desaparece y manda la barra de abajo. Para una familia la lista se queda plana, que
   es lo correcto: no está montando nada. */
/* `flex-shrink:0` como en `.nav-btn`: en la tira horizontal los hijos directos de
   `.lat-nav` ahora son los GRUPOS, y si se encogen la tira deja de scrollear y aprieta
   los botones hasta partirles el texto. */
.lat-grupo { display: flex; gap: 2px; flex-shrink: 0; }
.lat-rot { display: none; }
@media (min-width: 1024px) {
  .lat-grupo { flex-direction: column; }
  body.is-admin .lat-rot {
    display: block; margin: var(--e3) 0 4px; padding: 0 var(--e3);
    font-family: var(--g-mono); font-size: .62rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.38);
  }
  body.is-admin .lat-rot:first-child { margin-top: 0; }
}

/* ═══ §19 · FALTAS EN LA CONSOLA ──────────────────────────────────────────────
   El teclado numérico NO es el camino principal: en un partido las faltas se reparten
   entre ocho o diez dorsales, así que a partir del primer cuarto casi todo es repetir a
   alguien que ya está. Los que ya tienen falta salen arriba y de un toque; el teclado es
   para el primero de cada uno. */
.fl-capa { position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(0,0,0,.72); align-items: flex-end; justify-content: center; }
.fl-capa.abierta { display: flex; }
@media (min-width: 720px) { .fl-capa { align-items: center; } }

.fl { width: 100%; max-width: 420px; background: var(--papel);
  border: 1px solid var(--linea); border-radius: var(--r) var(--r) 0 0;
  padding: var(--e4); display: grid; gap: var(--e3);
  padding-bottom: calc(var(--e4) + env(safe-area-inset-bottom)); }
@media (min-width: 720px) { .fl { border-radius: var(--r); } }

.fl-cab { display: flex; align-items: center; gap: var(--e3); }
.fl-cab b { font-size: 1.05rem; }
.fl-eq { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem;
  padding: 3px 10px; border-radius: var(--r-full); border-left: 4px solid var(--eq, #5b6070);
  background: var(--hundido); }
.fl-cab .sp { flex: 1; }

.fl-rapidos { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-d { position: relative; min-width: 52px; min-height: 48px; padding: 0 10px;
  border: 1px solid var(--linea); border-radius: var(--r-sm); background: var(--hundido);
  color: var(--tinta); font: 700 1.15rem/1 var(--g-mono); cursor: pointer; }
.fl-d i { position: absolute; top: 3px; right: 5px; font-style: normal;
  font-family: var(--g-sans); font-size: .62rem; font-weight: 800; color: var(--tinta-2); }
/* Cuatro personales: una más y sale. Cinco: fuera. Se avisa ANTES, porque una mesa que se
   entera al quinto toque ya dejó jugar a alguien que no podía. */
.fl-d.casi { border-color: var(--alerta); color: var(--alerta); }
.fl-d.fuera { border-color: var(--error); color: var(--error); opacity: .75; }

.fl-pantalla { text-align: center; font: 800 2.2rem/1 var(--g-mono); letter-spacing: .06em;
  padding: var(--e2); background: var(--hundido); border-radius: var(--r-sm); min-height: 52px; }
.fl-pantalla.vacia { color: var(--tinta-3); }

.fl-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fl-pad button { min-height: 56px; border: 1px solid var(--linea); border-radius: var(--r-sm);
  background: var(--hundido); color: var(--tinta); font: 700 1.35rem/1 var(--g-mono); cursor: pointer; }
.fl-pad button:active { background: var(--linea); }
.fl-pad .fl-ok { background: var(--marca); border-color: var(--marca); color: #fff;
  font-family: var(--g-sans); font-size: 1rem; }
.fl-pad .fl-ok:disabled { opacity: .4; cursor: not-allowed; }

.fl-pie { display: flex; gap: var(--e2); }
.fl-pie button { flex: 1; min-height: 44px; border: 1px solid var(--linea); border-radius: var(--r-sm);
  background: none; color: var(--tinta-2); font: 600 .85rem var(--g-sans); cursor: pointer; }
.fl-pie button:disabled { opacity: .35; cursor: not-allowed; }

/* El contador en el marcador de la consola. En bonus se enseña la palabra, no un número
   más: «5» no le dice nada a nadie a media tarde, «BONUS» sí. */
.cn-faltas { display: block; margin-top: 4px; font: 700 .68rem/1 var(--g-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.cn-faltas.casi  { color: var(--alerta); }
.cn-faltas.bonus { color: var(--error); }
/* El bonus en la pantalla del pabellón: se lee a veinte metros o no sirve de nada. */
.ar-bonus { display: inline-block; margin-top: clamp(4px, 1vh, 12px);
  padding: clamp(2px, .6vh, 7px) clamp(8px, 2cqw, 20px); border-radius: var(--r-full);
  background: var(--error); color: #fff;
  font: 800 clamp(11px, min(2.6vh, 5cqw), 34px)/1 var(--g-sans);
  letter-spacing: .12em; text-transform: uppercase; }