/* ═════════════════════════════════════════════════════════════════════════════
   sistema.css — Sistema visual de GRID.

   Reemplaza por completo al styles.css anterior. Nada de aquí hereda de aquel.

   MARCO OSCURO, CONTENIDO CLARO
   La estructura —barra superior, columna lateral, pantalla de acceso— va en
   court-navy. El trabajo del día —tablas, marcadores, formularios— va sobre
   papel. Es una decisión medida, no una estética: esta herramienta se usa de pie,
   en una cancha y al sol, y bajo luz directa el brillo lava los negros y el texto
   de un tema oscuro desaparece. Lo que hay que leer bajo el sol se queda en claro;
   lo que solo hay que reconocer de un vistazo —dónde estoy, cómo vuelvo— se lleva
   el marco oscuro, que además es lo que hace que la plataforma se lea como una
   plataforma y no como una página suelta.

   REGLAS
   · Color de marca solo en acentos y acciones; el fondo es papel.
   · Nada que se toque mide menos de 44px.
   · Los números de marcador y hora van tabulares para que las tablas no bailen.
   · Ningún estado se comunica solo con color: siempre color + palabra o forma.
   · Un solo verde, un solo ámbar, un solo rojo de estado — el rojo de marca NO es
     el rojo de error.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Antioquia Courtside ──────────────────────────────────────────────────
     Sistema de diseño definido en Stitch («Basketball Fixture Hub»). Sustituye a
     los tokens anteriores. Dos anclas de marca:
       · court-navy  #0A1B2C — estructura, jerarquía, cabeceras. NO es fondo de app.
       · hoop-red    #E31B23 — acción y urgencia. Es acento, no relleno general.
     Modo claro, pensado para leerse en un polideportivo o al aire libre.        */

  /* Marca */
  --marca:#E31B23;                  /* hoop-red · decoración y fondos de acción */
  --sobre-marca:#FFFFFF;            /* texto ENCIMA de --marca; lo recalcula app.js */
  --marca-osc:#C41219;              /* rojo para TEXTO sobre claro (4,9:1) */
  --marca-osc-2:#9E0E14;            /* hover de botón primario */
  --marca-clara:#FF8A8E;            /* rojo legible sobre el navy */
  --marca-suave:#FDECEC;
  --azul:#3B82F6;                   /* info-blue · relleno y marcas */
  --azul-osc:#1D4ED8;               /* azul para TEXTO sobre claro (6,7:1) */
  --azul-suave:#EFF6FF;
  --marino:#0A1B2C;                 /* court-navy */

  /* Superficies · escala tonal, sin sombras pesadas */
  --papel:#FFFFFF;                  /* surface-container-lowest */
  --fondo:#F7F9FB;                  /* surface / background */
  --hundido:#F2F4F6;                /* surface-container-low */
  --hundido-2:#ECEEF0;              /* surface-container */

  /* Tinta */
  --tinta:#191C1E;                  /* on-surface */
  --tinta-2:#44474C;                /* on-surface-variant */
  --tinta-3:#5C6169;                /* apoyo — 5,4:1 sobre blanco */
  --linea:#E2E8F0;                  /* border-subtle: el borde SUSTITUYE a la sombra */
  --linea-fuerte:#C4C6CD;           /* outline-variant */

  /* Estados */
  --ok:#10B981;                     /* success-green · relleno y puntos */
  --ok-tx:#0A6B4A;                  /* verde para TEXTO sobre claro (5,3:1) */
  --ok-bg:#E7F8F1;   --ok-linea:#9FE3C9;
  --alerta:#8A5A00; --alerta-bg:#FEF6E7; --alerta-linea:#F5D48A; /* warning-amber */
  --error:#BA1A1A; --error-bg:#FFDAD6; --error-linea:#F3AFA9;
  --vivo:#E31B23;                   /* «en vivo» es el rojo de marca */

  /* Formas · 8px de base, píldora para metadatos */
  --r-sm:4px; --r:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
  /* Se conservan los nombres por compatibilidad, pero la elevación real son bordes. */
  --sombra:0 1px 2px rgba(10,27,44,.04);
  --sombra-alta:0 8px 30px rgba(10,27,44,.12);
  --sombra-activa:0 4px 12px rgba(10,27,44,.10);

  /* Ritmo · base 8 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;
  --toque:44px;
  /* El sistema define un contenedor de 1280. Con la navegación lateral, 1280 dejaba una
     franja muerta de 350px a cada lado en un monitor de escritorio y la tabla de
     posiciones se cortaba dentro de tarjetas estrechas: la pantalla sobraba y el dato
     no cabía a la vez. El marco incluye la columna lateral; el contenido se queda con
     el resto y por eso sigue leyéndose sin renglones interminables. */
  /* Alto REAL de la barra: 64 de contenido + 3 del filo rojo. Se usa como referencia
     para pegar la columna lateral. Con 64 a secas, la columna terminaba 3px por debajo
     del borde de la ventana y el botón «Nueva jornada» quedaba medio cortado. */
  --barra:67px; --barra-sm:59px;
  --ancho:1680px;                   /* container-max, columna lateral incluida */
  --lateral:236px;

  /* Tipografía · Montserrat titula, Inter informa */
  --f-titulo:'Montserrat',system-ui,sans-serif;
  --f-texto:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-texto);
  background:var(--fondo); color:var(--tinta);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
a{color:var(--azul-osc);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:var(--r-sm)}
img{max-width:100%;display:block}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--e5)}
.oculto{display:none!important}

/* ── Barra superior ─────────────────────────────────────────────────────── */
/* El marco oscuro del diseño. Lleva la marca de la PLATAFORMA y los destinos de fuera
   de un evento: Inicio, Torneos y —con sesión— Panel. Dentro de un evento la navegación
   baja a la columna lateral, porque allí hay seis secciones y aquí solo hacen falta tres.

   Sobre el marino, los grises de texto del tema claro no valen: `--tinta-3` sobre
   #0A1B2C da 2,4:1. Los tonos de esta zona son propios y están medidos. */
.barra{
  position:sticky;top:0;z-index:60;background:var(--marino);color:#fff;
  border-bottom:3px solid var(--marca);
}
.barra-in{display:flex;align-items:center;gap:var(--e3);min-height:64px;
  max-width:var(--ancho);margin:0 auto;padding:var(--e2) var(--e5)}
.marca{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.01em;
  line-height:1.1;flex-shrink:0;min-height:var(--toque);text-decoration:none}
.marca:hover{text-decoration:none}
/* GRID como logotipo: la plataforma tiene nombre propio y neutro, y el club es quien la
   usa. Por eso la sigla manda y el nombre del club va al lado, no al revés.

   Va por MÁSCARA y no por <img>: dentro de un <img> el SVG es un documento aparte y
   `currentColor` no cruza esa frontera —las letras salían negras sobre el marino—. Con
   `mask` el color lo pone el CSS, así que el MISMO archivo sirve blanco en la barra
   oscura y marino en el manual. Un solo asset que sobrescribir. */
.marca-sigla{display:block;width:88px;height:40px;flex-shrink:0;
  background:currentColor;color:#fff;
  -webkit-mask:url(img/grid-logo.svg) left center/contain no-repeat;
          mask:url(img/grid-logo.svg) left center/contain no-repeat}
/* Si el navegador no entiende `mask`, la caja quedaría vacía y la marca desaparecería.
   Con esto sale el texto «GRID» de respaldo, que es peor pero se lee. */
@supports not ((-webkit-mask:url(#x)) or (mask:url(#x))){
  .marca-sigla{background:none;font-family:var(--f-titulo);font-weight:800;font-size:1.6rem;
    letter-spacing:.06em;width:auto;height:auto}
  .marca-sigla::after{content:"GRID"}
}
.marca .tx{display:flex;flex-direction:column;justify-content:center}
.marca .tx b{font-size:.92rem;color:#fff;text-transform:none;letter-spacing:-.01em}
/* `#9FB2C9` y no `--tinta-3`: sobre el marino ese gris da 2,4:1 y este es 6,6:1. Un color
   de texto se elige contra SU fondo, y este fondo no es el papel del resto de la app. */
.marca .tx > span{display:block;font-size:.66rem;color:#9FB2C9;text-transform:uppercase;
  letter-spacing:.14em;font-weight:700}
.barra-sp{flex:1}
.barra-quien{font-size:.85rem;color:#C3D0E0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:22ch}
/* En celular el nombre de quien entró se va: entre el logotipo, tres destinos y el botón
   de salir no cabe, y era lo que empujaba la barra 52px fuera de la pantalla en un
   iPhone SE. La sesión ya se ve por el botón «Salir», así que no se pierde información. */
@media (max-width:700px){ .barra-quien{display:none} }
/* Pantallas de 320px (iPhone SE de primera generación y similares). El logotipo, tres
   destinos y «Salir» sumaban 343px con los rellenos normales: 10px de scroll horizontal.
   Se aprieta el marco, no se quita nada. */
@media (max-width:360px){
  .barra-in{padding:var(--e2) var(--e3);gap:var(--e2)}
  .marca-sigla{width:58px;height:27px}
  .barra-nav{margin-left:0;gap:0}
  .ruta-btn{padding:0 var(--e2)}
  .btn-sm{padding:0 var(--e2)}
}

/* Destinos de fuera del evento. En celular se quedan solo los iconos: con tres botones
   y la marca, las palabras no caben en 390px y la barra se partía en dos renglones. */
.barra-nav{display:flex;align-items:center;gap:2px;margin-left:var(--e4)}
.ruta-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;font:inherit;
  font-family:var(--f-texto);font-weight:600;font-size:.88rem;color:#C3D0E0;cursor:pointer;
  min-height:var(--toque);padding:0 var(--e3);border-radius:var(--r-sm);white-space:nowrap;
  transition:background .15s,color .15s}
.ruta-btn:hover{background:rgba(255,255,255,.09);color:#fff}
.ruta-btn.active{background:rgba(227,27,35,.18);color:#fff}
.ruta-btn.active .fi{color:var(--marca-clara)}
@media (max-width:860px){
  .barra-nav{margin-left:var(--e2)}
  .ruta-btn span{display:none}
  .ruta-btn{padding:0 var(--e3)}
  .marca .tx{display:none}
}

/* ── Iconos ─────────────────────────────────────────────────────────────── */
/* UIcons entra por una fuente de iconos: el glifo hereda el color y el tamaño del texto,
   así que un icono nunca se queda de un color que no contrasta. Todos son decorativos y
   van con su palabra al lado; si el CDN no responde, no se pierde ninguna información. */
.fi{display:inline-flex;align-items:center;justify-content:center;line-height:0;
  flex-shrink:0;font-size:1em}
.btn .fi{font-size:.95em}

/* ── Navegación: columna lateral en escritorio, tira horizontal en celular ─ */
.marco{max-width:var(--ancho);margin:0 auto}
.marco-cue{min-width:0}
/* La columna es marco, así que va oscura como la barra. Es además lo que separa de un
   vistazo «estoy DENTRO de un evento» de la portada, donde no existe. */
.lateral{background:var(--marino);color:#fff}
.lat-cab{display:none}
.lat-arte{display:none}
.lat-eye{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  color:var(--marca-clara)}
.lat-nom{font-family:var(--f-titulo);font-weight:700;font-size:.98rem;color:#fff;
  line-height:1.25;margin-top:2px;overflow-wrap:anywhere}
.lat-nav{display:flex}
.lat-pie{display:none}
.lat-cifras{display:none}
.lat-sub{font-size:.78rem;color:#9FB2C9;margin-top:3px;line-height:1.4}
.lat-chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:var(--e2)}
.lat-chips .chip{font-size:.62rem;padding:3px 8px}
/* Volver a la lista. Es el ÚNICO camino de vuelta desde dentro de un evento ahora que
   no hay cabecera, así que va arriba del todo y con alto de dedo. */
.lat-volver{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.10);
  border:0;color:#C3D0E0;font:inherit;font-size:.76rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;cursor:pointer;min-height:36px;padding:0 var(--e3);border-radius:var(--r-full);
  margin-bottom:var(--e3)}
.lat-volver:hover{background:rgba(255,255,255,.18);color:#fff}
.lat-cifra b{display:block;font-family:var(--f-titulo);font-weight:700;font-size:1.25rem;
  line-height:1.1;color:#fff;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
/* «En juego» / «Borrador» no son números: con el tamaño de cifra se salían de su casilla.
   Se encogen por contenido, sin tocar los tres que sí son cifras. */
#stEstado{font-size:.95rem;letter-spacing:-.01em}
.lat-cifra span{font-size:.6rem;text-transform:uppercase;letter-spacing:.09em;color:#9FB2C9;
  font-weight:700}

.nav-btn{display:flex;align-items:center;gap:10px;background:none;border:0;font:inherit;
  font-family:var(--f-texto);font-weight:600;font-size:.84rem;text-transform:uppercase;
  letter-spacing:.05em;color:#C3D0E0;cursor:pointer;white-space:nowrap;
  min-height:var(--toque);padding:0 var(--e3);transition:color .15s,background .15s,border-color .15s}
.nav-btn .fi{font-size:1.05rem;color:#8FA3BC;transition:color .15s}
.nav-btn:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-btn:hover .fi{color:#fff}
.nav-btn.active{color:#fff;font-weight:700;background:rgba(227,27,35,.20)}
.nav-btn.active .fi{color:var(--marca-clara)}

/* Celular y tableta en vertical: tira horizontal pegada bajo la barra, con el filo rojo
   debajo del activo. Una columna lateral en 390px se comería media pantalla. */
@media (max-width:1023px){
  .lateral{position:sticky;top:var(--barra);z-index:50;-webkit-overflow-scrolling:touch}
  /* Sin cabecera aparte, en celular el nombre del evento tiene que salir AQUÍ o no sale
     en ningún sitio: se entra por un enlace y no se sabe ni a qué jornada llegaste. Va
     compacto y en horizontal, no como el bloque centrado del escritorio. */
  .lat-cab{display:flex;align-items:center;gap:var(--e3);text-align:left;flex-wrap:wrap;
    padding:var(--e3) var(--e4)}
  .lat-logo{width:36px;height:36px;border-radius:50%;background:#fff;padding:2px;
    object-fit:contain;flex-shrink:0;margin:0}
  .lat-cab .lat-eye,.lat-cab .lat-sub{display:none}
  .lat-nom{font-size:1rem;flex:1;min-width:120px;margin:0}
  .lat-chips{margin:0;justify-content:flex-start}
  .lat-volver{margin:0;order:-1}
  /* La tira scrollea, los botones NO se encogen. Con `min-width:max-content` la tira
     medía 657px y, al no poder encogerse, empujaba la PÁGINA entera: scroll horizontal
     en todo el sitio por debajo de 600px. El contenedor es el que scrollea; lo que no
     debe encogerse se dice en los hijos. */
  .lat-nav{gap:2px;padding:0 var(--e3);overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .lat-nav::-webkit-scrollbar{display:none}
  .nav-btn{flex-shrink:0}
  .nav-btn{border-bottom:3px solid transparent}
  .nav-btn.active{border-bottom-color:var(--marca)}
}

/* Escritorio: columna a la izquierda. Se queda pegada al hacer scroll, así que se puede
   saltar de Horario a Clasificación sin volver arriba —que es lo que hace la mesa cada
   pocos minutos—. El activo lleva el filo rojo a la IZQUIERDA, como pide el sistema. */
@media (min-width:1024px){
  /* Columna COMPLETA: pegada al borde, de la barra al fondo de la pantalla y sin
     esquinas redondeadas. Antes era una tarjeta flotando con margen, así que se leía
     como «un cuadro más» en vez de como la estructura de la aplicación. */
  .marco{display:flex;align-items:flex-start;gap:0;padding:0;max-width:none}
  .lateral{width:var(--lateral);flex-shrink:0;position:sticky;top:var(--barra);
    height:calc(100dvh - var(--barra));overflow-y:auto;
    display:flex;flex-direction:column}
  .marco-cue{flex:1;min-width:0;padding:0 var(--e5)}
  .marco-cue .contenedor{max-width:1440px;padding:0}
  .lat-cab{display:block;padding:var(--e4);border-bottom:1px solid rgba(255,255,255,.12);text-align:center}
  .lat-cifras{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.10);
    border-top:1px solid rgba(255,255,255,.12);margin-top:var(--e2)}
  .lat-cifra{background:var(--marino);padding:var(--e3) var(--e2);text-align:center}
  .lat-logo{width:56px;height:56px;margin:0 auto var(--e2);border-radius:50%;
    background:#fff;padding:3px;object-fit:contain}
  .lat-nom{text-align:center}
  /* El lema va DESPUÉS de la navegación y antes del botón, como el diseño. `margin-top:auto`
     lo empuja al fondo cuando sobra alto, y `min-height:0` deja que se encoja en una
     pantalla baja en vez de empujar «Nueva jornada» fuera de la columna. */
  .lat-arte{display:block;margin-top:auto;padding:var(--e4) var(--e5) var(--e2);min-height:0}
  /* El arte es marino sobre transparente: sobre la columna oscura desaparecía. El filtro
     lo convierte en una silueta blanca, que es como se usa una marca sobre fondo oscuro.
     Sin esto quedaba una mancha ilegible en la que no se distinguía el lema. */
  .lat-arte img{width:100%;max-width:150px;margin:0 auto;opacity:.8;
    filter:brightness(0) invert(1)}
  .lat-nav{flex-direction:column;gap:2px;padding:var(--e2)}
  .nav-btn{width:100%;justify-content:flex-start;border-left:3px solid transparent;
    border-radius:0 var(--r-sm) var(--r-sm) 0;padding:0 var(--e3);text-transform:none;
    font-size:.9rem;letter-spacing:0}
  .nav-btn.active{border-left-color:var(--marca)}
  .lat-pie{padding:var(--e3);border-top:1px solid rgba(255,255,255,.12);
    position:sticky;bottom:0;background:var(--marino);flex-shrink:0}
  .lat-pie .btn{width:100%}
  body.is-admin .lat-pie{display:block}
}

/* Lo del staff está OCULTO por defecto y solo aparece con sesión abierta.
   La regla vive aquí, no en JavaScript: antes la ocultaba `setAdmin()`, pero a esa
   función solo se la llamaba SI había sesión, así que a una familia no se la llamaba
   nunca y el Tablero le quedaba a la vista. Siendo CSS es correcto desde el primer
   pintado, sin parpadeo y sin depender de en qué orden corran los scripts.
   (Lo que hay detrás ya estaba protegido: el API responde 403 sin sesión.) */
.admin-only{display:none}
body.is-admin .admin-only{display:revert}
/* `revert` devuelve el valor que trae el navegador para la etiqueta —`inline-block` en un
   <button>—, NO el que le pone esta hoja. Con la navegación en flex, «Tablero» era el
   único botón que no era flex: el icono se le pegaba a la palabra sin separación y, en
   escritorio, no se alineaba con los otros cuatro. Hay que decir el display bueno. */
body.is-admin .nav-btn.admin-only{display:flex}
/* Y lo MISMO acaba de pasar con «Panel» en la barra de arriba: `revert` lo devolvía a
   `inline-block` y el icono quedaba pegado a la palabra, sin la separación de flex. Cada
   familia de botones necesita que se le diga su display; no basta con arreglar una. */
body.is-admin .ruta-btn.admin-only{display:inline-flex}
/* Por nivel. Es cortesía visual —quitar botones que igual iban a dar 403—, NO el candado:
   el candado vive en el servidor, porque el nivel llega en un JSON del navegador. */
.solo-admin{display:none}
body.nivel-admin .solo-admin{display:revert}
body.nivel-admin .nav-btn.solo-admin{display:flex}
body.nivel-admin .ruta-btn.solo-admin{display:inline-flex}

/* Interruptor de «esto se ve o no se ve». Con palabra al lado, nunca solo el color. */
.interruptor{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  min-height:var(--toque);padding:0 4px}
.interruptor input{width:18px;height:18px;min-height:0;flex-shrink:0;accent-color:var(--marca);cursor:pointer}
.tarjeta-cab .interruptor{color:#fff}
/* Apagado: se ve que existe pero que no está publicado. Rayado, no solo gris: el gris
   solo se confunde con «deshabilitado» y aquí significa otra cosa. */
.tarjeta.apagada .tarjeta-cab{background:var(--tinta-3)}
.tarjeta.apagada .tarjeta-cue{background:repeating-linear-gradient(135deg,
  var(--papel) 0 12px, var(--hundido) 12px 24px)}
.panel{display:none;padding:var(--e5) 0 var(--e7)}
.panel.active{display:block}

/* ── Pie ────────────────────────────────────────────────────────────────── */
/* `pie-sitio`, no `pie`: las tarjetas de la portada ya usan `.pie` para su renglón de
   abajo, y un nombre compartido les metía 48px de relleno y el texto centrado. */
.pie-sitio{padding-top:var(--e5);padding-bottom:var(--e7);color:var(--tinta-3);
  font-size:.82rem;text-align:center}
.pie-sitio a{font-weight:700;display:inline-flex;align-items:center;gap:6px;
  min-height:var(--toque);padding:0 10px}
.pie-sitio .pt{opacity:.4}

/* ── Títulos de sección ─────────────────────────────────────────────────── */
.s-eye{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  color:var(--marca-osc);margin-bottom:2px}
.s-title{font-family:var(--f-titulo);font-weight:700;
  font-size:1.5rem;letter-spacing:-.01em;color:var(--marino);margin-bottom:var(--e4)}
.s-sub{color:var(--tinta-2);font-size:.92rem;margin:-10px 0 var(--e4)}

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
/* Borde de 1px en vez de sombra: el sistema evita sombras profundas para mantener un
   aspecto nítido y «rápido». La profundidad se hace con capas tonales, no con blur. */
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  margin-bottom:var(--e4);overflow:hidden}
/* Cabecera en court-navy: separa de un vistazo «de qué grupo es esto» del contenido,
   que es lo que pide una mesa leyendo dos o tres grupos a la vez. */
.tarjeta-cab{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  padding:var(--e3) var(--e4);background:var(--marino);color:#fff}
.tarjeta-cab h3{font-family:var(--f-titulo);font-size:1rem;font-weight:700;color:#fff;
  letter-spacing:-.01em}
.tarjeta-cab .chip,
.tarjeta-cab .chip-ok,
.tarjeta-cab .chip-azul,
.tarjeta-cab .chip-alerta,
.tarjeta-cab .chip-marca{background:#26364A;color:#FFFFFF;border-color:transparent}
.tarjeta-cab .chip-ok{background:#12503C;color:#B8F3DC}
.tarjeta-cab .chip-azul{background:#1E3A5F;color:#CFE3FF}
.tarjeta-cab .sp{flex:1}
.tarjeta-cue{padding:var(--e4)}
/* Con el contenedor ancho, un párrafo suelto llegaba a los 150 caracteres por renglón y
   el ojo perdía la línea al volver. Las tablas y las rejillas sí usan todo el ancho. */
.tarjeta-cue>p,.tarjeta-cue>ul,.s-sub{max-width:78ch}
.tarjeta-pie{padding:var(--e3) var(--e4);background:var(--hundido);
  border-top:1px solid var(--linea);display:flex;gap:var(--e2);flex-wrap:wrap}

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-weight:700;font-size:.9rem;line-height:1;cursor:pointer;
  min-height:var(--toque);padding:0 var(--e4);border-radius:var(--r-sm);
  border:1.5px solid transparent;transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primario{background:var(--marca-osc);color:#fff}   /* blanco sobre #FF1D25 = 3,85:1 */
.btn-primario:hover:not(:disabled){background:var(--marca-osc-2)}
/* Fondo `--azul-osc`, no `--azul`: blanco sobre #3B82F6 da 3,68:1 y estos botones llevan
   texto normal, que necesita 4,5. Es el mismo error de siempre —un color de relleno no es
   un color de texto, y aquí el relleno DECIDE el del texto—. Sobre #1D4ED8 sube a 8,1:1. */
.btn-secundario{background:var(--azul-osc);color:#fff}
.btn-secundario:hover:not(:disabled){background:#1739A8}
.btn-plano{background:var(--papel);color:var(--tinta);border-color:var(--linea-fuerte)}
.btn-plano:hover:not(:disabled){background:var(--hundido)}
.btn-peligro{background:var(--papel);color:var(--error);border-color:var(--error-linea)}
.btn-peligro:hover:not(:disabled){background:var(--error-bg)}
/* 44px, no 36: la regla de arriba de este archivo dice que nada que se toque
   baja de 44px, y estos botones —Entrar, ← Eventos, Imprimir— son de barra,
   que es donde peor se apunta con el pulgar y de pie. */
.btn-sm{min-height:var(--toque);font-size:.82rem;padding:0 var(--e3)}
.btn-icono{min-width:36px;min-height:36px;padding:0;border-radius:var(--r-sm);
  background:none;border:1px solid var(--linea);color:var(--tinta-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}
.btn-icono:hover{background:var(--hundido);color:var(--tinta)}
.btn-icono.peligro:hover{background:var(--error-bg);color:var(--error);border-color:var(--error-linea)}

/* ── Campos ─────────────────────────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:5px}
.campo>label,.etiqueta{font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--tinta-2)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--tinta);background:var(--papel);
  border:1.5px solid var(--linea-fuerte);border-radius:var(--r-sm);padding:9px 12px;
  min-height:var(--toque);width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--azul);outline-offset:1px;
  border-color:var(--azul)}
select{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--tinta-2) 50%),linear-gradient(135deg,var(--tinta-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--e3)}
.rejilla .ancho{grid-column:1/-1}

/* ── Distintivos ────────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:var(--r-full);
  background:var(--hundido);color:var(--tinta-2);white-space:nowrap}
.chip-ok{background:var(--ok-bg);color:var(--ok-tx)}
.chip-alerta{background:var(--alerta-bg);color:var(--alerta)}
.chip-error{background:var(--error-bg);color:var(--error)}
.chip-marca{background:var(--marca-suave);color:var(--marca-osc)}
.chip-azul{background:var(--azul-suave);color:var(--azul-osc)}
.chip-vivo{background:var(--error-bg);color:var(--marca-osc-2)}
.chip-vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vivo);
  animation:latido 1.4s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}
.punto{width:11px;height:11px;border-radius:50%;display:inline-block;flex-shrink:0;
  border:1.5px solid rgba(16,28,54,.18)}
/* Un distintivo que además es botón (el atajo a las reglas del grupo). Tiene alto de dedo
   sin engordar la cabecera: se toca el área, no solo las letras. */
.chip-btn{border:1px solid transparent;cursor:pointer;font-family:inherit;
  min-height:32px;padding:4px 12px}
.tarjeta-cab .chip-btn{background:#26364A;color:#fff;border-color:rgba(255,255,255,.22)}
.tarjeta-cab .chip-btn:hover{background:#33475F}

/* ── Reglas por grupo ───────────────────────────────────────────────────── */
/* Cada grupo, su tabla de puntos. En paralelo, no apiladas: la gracia de la pestaña es
   comparar «en Avanzada el triple vale 3, en Desarrollo vale 2» sin hacer memoria. */
.reglas-grid{display:grid;gap:var(--e4);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.reglas-caja{border:1px solid var(--linea);border-radius:var(--r);padding:var(--e3);
  background:var(--hundido)}
.reglas-caja .tabla-caja{background:var(--papel)}
.reglas-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);
  margin-bottom:var(--e2);flex-wrap:wrap}
.reglas-cab b{font-family:var(--f-titulo);font-size:.98rem;color:var(--marino)}

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.aviso{display:flex;gap:10px;align-items:flex-start;padding:var(--e3) var(--e4);
  border-radius:var(--r-sm);border:1px solid;font-size:.9rem;margin-bottom:var(--e3)}
.aviso b{font-weight:800}
.aviso .fi{font-size:1.05rem;margin-top:3px}
.aviso-info{background:var(--azul-suave);border-color:#B9D4F0;color:#0A3E77}
.aviso-ok{background:var(--ok-bg);border-color:var(--ok-linea);color:var(--ok)}
.aviso-alerta{background:var(--alerta-bg);border-color:var(--alerta-linea);color:var(--alerta)}
.aviso-error{background:var(--error-bg);border-color:var(--error-linea);color:var(--error)}

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.tabla-caja{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);
  border:1px solid var(--linea);background:var(--papel)}
table{width:100%;border-collapse:collapse}
thead th{background:var(--hundido);color:var(--tinta-2);font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;text-align:left;padding:10px var(--e3);
  border-bottom:1px solid var(--linea);white-space:nowrap}
tbody td{padding:11px var(--e3);border-top:1px solid var(--linea);vertical-align:middle}
tbody tr:hover td{background:#FAFCFF}
.num{font-variant-numeric:tabular-nums;text-align:right}
.destacar td{background:var(--ok-bg)!important}

/* ── Estado vacío ───────────────────────────────────────────────────────── */
.vacio{text-align:center;padding:var(--e7) var(--e4);color:var(--tinta-2)}
.vacio .ico{font-size:2rem;margin-bottom:var(--e2);opacity:.5}
.vacio .t{font-weight:800;color:var(--tinta);margin-bottom:4px;font-size:1.05rem}
.vacio .s{font-size:.9rem;max-width:46ch;margin:0 auto}
.vacio-mini{padding:var(--e4);text-align:center;color:var(--tinta-3);font-size:.9rem;
  background:var(--hundido);border-radius:var(--r-sm)}

/* ── Portada: presentación + herramientas + eventos ─────────────────────── */
.portada{display:grid;grid-template-columns:1fr;gap:var(--e5);align-items:center;
  margin-bottom:var(--e6)}
.portada-tx .chip{margin-bottom:var(--e3)}
.portada-tx h2{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.9rem,5vw,3.2rem);line-height:1.08;color:var(--marino)}
.portada-tx h2 em{font-style:normal;color:var(--marca-osc)}
.portada-tx p{margin-top:var(--e3);color:var(--tinta-2);font-size:1rem;max-width:52ch}
.portada-btns{display:flex;gap:var(--e2);flex-wrap:wrap;margin-top:var(--e5)}
.portada-marca{display:none}
.portada-tit{font-family:var(--f-titulo);font-weight:700;font-size:1.3rem;color:var(--marino);
  margin-bottom:var(--e4);display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  scroll-margin-top:88px}
.portada-lema{margin:var(--e7) auto 0;max-width:210px;opacity:.9}

/* ── WE/ME · los cuatro pilares del Club ────────────────────────────────────
   Va sobre el marino porque es lo que ancla la marca en la portada: la plataforma se
   llama GRID y es neutra, pero nació aquí y se nota. Es la única franja oscura del
   contenido, y a propósito: es para leer una vez, no para trabajar sobre ella. */
.weme{background:var(--marino);color:#fff;border-radius:var(--r-lg);padding:var(--e6) var(--e5);
  margin-bottom:var(--e6)}
.weme-cab{max-width:62ch;margin-bottom:var(--e5)}
.weme-cab h3{font-family:var(--f-titulo);font-weight:800;font-size:clamp(1.4rem,3.4vw,2.1rem);
  letter-spacing:-.02em;line-height:1.1;margin:var(--e3) 0 var(--e2);text-transform:uppercase}
.weme-cab p{color:#B7C6D9;font-size:.95rem}
.weme-cab p b{color:#fff}
.weme-grid{display:grid;gap:var(--e4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.weme-p{border-top:3px solid var(--marca);padding-top:var(--e3);min-width:0}
.weme-l{display:block;font-family:var(--f-titulo);font-weight:800;font-size:2.4rem;line-height:1;
  color:var(--marca-clara);margin-bottom:6px}
.weme-p b{display:block;font-size:.95rem;margin-bottom:4px}
/* `#B7C6D9` y no `--tinta-3`: sobre el marino ese gris da 2,4:1 y este 8,3:1. */
.weme-p p{font-size:.88rem;color:#B7C6D9;line-height:1.55}
.weme-pie{margin-top:var(--e6);display:flex;justify-content:center}
.weme-pie img{max-width:180px;filter:brightness(0) invert(1);opacity:.85}
@media (max-width:560px){ .weme{padding:var(--e5) var(--e4);border-radius:var(--r)} }

.herramientas{display:grid;gap:var(--e4);margin-bottom:var(--e6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.herr{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:var(--e4)}
.herr-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:var(--r);background:var(--marca-suave);color:var(--marca-osc);
  font-size:1.1rem;margin-bottom:var(--e3)}
.herr h3{font-family:var(--f-titulo);font-weight:700;font-size:1.05rem;color:var(--marino);
  margin-bottom:6px}
.herr p{font-size:.9rem;color:var(--tinta-2)}

@media (min-width:900px){
  .portada{grid-template-columns:1.35fr .65fr}
  /* El escudo solo entra cuando hay sitio de verdad: por debajo de 900px robaba el ancho
     del titular y lo partía en cuatro renglones. */
  .portada-marca{display:block}
  .portada-marca img{width:100%;max-width:260px;margin-left:auto}
}

/* ── Tarjetas de evento ─────────────────────────────────────────────────── */
.eventos{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--e4)}
.evento{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra);padding:var(--e4);cursor:pointer;text-align:left;
  border-left:5px solid var(--marca);transition:transform .15s,box-shadow .15s;width:100%;
  font:inherit;color:inherit;display:block}
.evento:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.evento h3{font-size:1.08rem;font-weight:800;color:var(--marino);margin:var(--e2) 0 4px;
  line-height:1.25}
.evento .meta{font-size:.86rem;color:var(--tinta-2)}
.evento .pie{margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--linea);
  display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap;font-size:.8rem;color:var(--tinta-3)}
.evento.borrador{border-left-color:var(--alerta)}
.evento.finalizado{border-left-color:var(--tinta-3)}
.evento .marcas{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ── Partidos ───────────────────────────────────────────────────────────── */
/* Una sola columna, siempre. Las filas son renglones completos —cuándo, equipos y
   marcador—, así que repartirlas en varias columnas rompería justo lo que las hace
   útiles: leer la columna de horas de arriba abajo. */
.partidos{display:grid;grid-template-columns:1fr;gap:6px}
/* Rejilla de grupos: en escritorio corren en paralelo, que es como se juegan y como los
   lee la mesa. Apilados obligaban a bajar y subir para comparar dos que van a la vez.

   `auto-fit` en vez de dos saltos fijos: con puntos de corte medidos sobre la VENTANA, la
   misma pantalla daba una columna o dos según hubiera o no barra lateral, y con tres
   grupos quedaba un hueco del tamaño de una tarjeta. Midiendo el hueco disponible, la
   rejilla mete tantas columnas como quepan de 520px —el ancho al que la tabla de
   posiciones entra entera, con la columna Dif incluida— y reparte lo que sobre. */
.grupos{display:grid;gap:var(--e4);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr))}
.grupos .tarjeta{margin-bottom:0}
.grupos .partidos{grid-template-columns:1fr}   /* dentro de una columna, uno debajo de otro */
.m-card,.bk-match{background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r);padding:var(--e3);box-shadow:var(--sombra)}
.m-card.jugado,.bk-match.jugado{border-color:var(--ok-linea);background:#FBFEFC}
.m-card.envivo,.bk-match.envivo{border-color:var(--error-linea);box-shadow:0 0 0 3px var(--error-bg)}
.m-h{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;margin-bottom:var(--e2);
  font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-3)}
.m-h .sp{flex:1}
.m-er{display:flex;align-items:center;gap:var(--e2);padding:5px 0}
.m-nm{flex:1;font-weight:700;font-size:.96rem;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.m-er .score-in{width:68px;min-height:40px;text-align:center;font-weight:800;font-size:1.1rem;
  font-variant-numeric:tabular-nums;flex-shrink:0;padding:6px}
.m-marcador{font-family:var(--f-titulo);font-weight:700;font-size:1.2rem;font-variant-numeric:tabular-nums;
  color:var(--marino);flex-shrink:0}
.m-gana{color:var(--ok-tx)}
.m-pie{display:flex;gap:var(--e2);align-items:center;margin-top:var(--e2);
  padding-top:var(--e2);border-top:1px solid var(--linea)}
.m-estado{min-height:36px;font-size:.82rem;padding:4px 28px 4px 10px;width:auto;flex:1}
.m-seed{font-size:.8rem;color:var(--tinta-3);font-weight:700}

/* ── Llave ────────────────────────────────────────────────────────────────────
   Cada ronda es una columna y sus partidos se reparten a lo alto con
   `space-around`. Eso es lo que hace que la FINAL quede centrada justo en medio de
   las dos semifinales, en vez de pegada arriba al lado de la primera: las columnas
   miden lo mismo (`align-items:stretch`) y cada una distribuye lo suyo por igual.
   Con cuartos, semis y final el efecto encadena solo y el cuadro sale simétrico.   */
.llave{display:grid;gap:var(--e4);align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.llave-col{display:flex;flex-direction:column;min-width:0}
.llave-partidos{flex:1;display:grid;grid-auto-rows:1fr;gap:var(--e2);min-width:0;
  container-type:inline-size}
/* REJILLA con `grid-auto-rows:1fr`, no flex. Cada partido ocupa una casilla de igual
   alto y se centra dentro, así que el centro de la final ES la media de los dos de
   arriba: exacto, no aproximado.
   Con flex no lo era: `flex:1` reparte el espacio SOBRANTE, pero una tarjeta no encoge
   por debajo de su contenido, así que en cuanto un nombre ocupaba dos renglones esa
   casilla crecía, las dos semifinales dejaban de medir lo mismo y la final quedaba 5px
   desalineada. `1fr` iguala las filas por la más alta y arrastra la columna entera. */
.llave-partidos > *{flex:1;display:flex;flex-direction:column;justify-content:center}
.llave-col h4{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--tinta-3);margin-bottom:var(--e2)}
/* También en claro: era el otro resto marino. Un borde rojo grueso y el nombre en
   grande destacan igual sin volver al fondo oscuro. */
.campeon{background:var(--marca-suave);color:var(--marino);border:2px solid var(--marca);
  border-radius:var(--r);padding:var(--e5);text-align:center;margin-top:var(--e4)}
.campeon .et{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--marca-osc);
  font-weight:800}
.campeon .nm{font-family:var(--f-titulo);font-weight:800;font-size:2rem;letter-spacing:-.02em;text-transform:uppercase;
  line-height:1.1;margin-top:4px}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-fondo{position:fixed;inset:0;background:rgba(10,20,40,.55);backdrop-filter:blur(2px);
  display:none;align-items:flex-start;justify-content:center;z-index:1200;padding:var(--e4);
  overflow-y:auto}
.modal-fondo.open{display:flex}
.modal{background:var(--papel);border-radius:var(--r-lg);box-shadow:var(--sombra-alta);
  width:100%;max-width:640px;margin:auto;padding:var(--e5);color:var(--tinta)}
.modal h3{font-family:var(--f-titulo);font-weight:700;letter-spacing:-.01em;
  font-size:1.4rem;color:var(--marino);margin-bottom:6px}
.modal .pista{font-size:.92rem;color:var(--tinta-2);margin-bottom:var(--e4);line-height:1.55}
.modal .pista strong{color:var(--tinta)}
.modal-acciones{display:flex;gap:var(--e2);justify-content:flex-end;margin-top:var(--e5);
  flex-wrap:wrap}

/* ── Aviso flotante ─────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2000;
  background:var(--marino);color:#fff;padding:12px 20px;border-radius:var(--r-full);
  font-size:.9rem;font-weight:600;box-shadow:var(--sombra-alta);max-width:92vw;text-align:center}
.toast.error{background:var(--error)}
.toast.success{background:var(--ok)}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .cabecera-in{padding:var(--e4) var(--e4) var(--e3)}
  .cifras{gap:var(--e4)}
  .cifra b{font-size:1.35rem}
  .lateral{top:var(--barra-sm)}
  .barra-in{min-height:56px}
  /* Antes aquí decía `.marca span{display:none}`, de cuando la marca era un logo y un
     texto. Ahora la sigla GRID TAMBIÉN es un span, así que esa regla se llevaba por
     delante el nombre de la plataforma: en celular la barra quedaba con dos iconos
     sueltos y nada que dijera dónde estabas. El nombre del club sí se esconde —no cabe—,
     pero se selecciona por su clase, no por la etiqueta. */
  .marca .tx{display:none}
  .marca-sigla{width:70px;height:32px}
  .modal{padding:var(--e4);border-radius:var(--r)}
  .modal-acciones{position:sticky;bottom:0;background:var(--papel);margin:var(--e4) -16px -16px;
    padding:var(--e3) var(--e4);border-top:1px solid var(--linea)}
  .modal-acciones .btn{flex:1}
  .partidos{grid-template-columns:1fr}
  .eventos{grid-template-columns:1fr}
}

/* ── Impresión: la mesa de control trabaja en papel ─────────────────────── */
@media print{
  .barra,.lateral,.pie-sitio,.modal-fondo,.toast,.no-print,.btn,.tarjeta-pie{display:none!important}
  .marco{display:block;padding:0;max-width:none}
  .grupos{grid-template-columns:1fr}
  body{background:#fff}
  .panel{display:none!important}
  .panel.active{display:block!important}
  .tabla-caja{border:0;overflow:visible}
  thead th{background:#1a1a1a!important;color:#fff!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tarjeta{break-inside:avoid;box-shadow:none}
  a[href]::after{content:""}
}

/* ── Fila de partido ────────────────────────────────────────────────────────
   SIMÉTRICA alrededor del marcador: cuándo · local · MARCADOR · visitante · estado.
   El marcador estaba pegado al borde derecho, así que la fila se leía torcida —los dos
   equipos a un lado y el resultado al otro— y no había forma de saber de un vistazo qué
   número era de quién. Ahora está justo donde estaba el «vs», con los dos equipos
   apuntándolo: local alineado a la derecha y visitante a la izquierda.

   Las dos columnas de equipo son `minmax(0,1fr)` idénticas, así que el marcador cae
   EXACTAMENTE en el centro sin importar cuánto midan los nombres.

   El marcador es un BOTÓN porque abre el detalle: 44px de alto y foco visible. `data-pid`
   va en la fila y en el botón, que es lo que lee `app.js` al guardar.                */
.partidos{container-type:inline-size}
.banda{display:grid;align-items:center;gap:var(--e2) var(--e3);
  grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto;
  grid-template-areas:"cuando local score visita estado";
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:0 var(--e3) 0 0;min-height:58px;overflow:hidden}
.banda + .banda{margin-top:6px}

/* Cuándo. Números tabulares y ancho fijo para que la columna quede a plomo de fila a
   fila: con ancho automático, «9:00» y «15:30» desalineaban toda la lista. */
.banda-cuando{grid-area:cuando;width:78px;flex-shrink:0;line-height:1.15;
  padding:var(--e2) 0 var(--e2) var(--e3)}
.banda-cuando b{display:block;font-family:var(--f-titulo);font-weight:700;font-size:1rem;
  font-variant-numeric:tabular-nums;color:var(--marino)}
.banda-cuando span{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--tinta-3)}

/* Los dos equipos, en espejo. El local termina contra el marcador y el visitante
   empieza en él: eso es lo que hace que el resultado se lea «de A a B». */
.banda .eq{display:flex;align-items:center;gap:8px;min-width:0}
/* `flex-start` en los DOS, y el de la izquierda invertido con `row-reverse`. Con
   `row-reverse` el eje corre de derecha a izquierda, así que `flex-end` empaqueta al
   borde IZQUIERDO: los nombres se iban a las esquinas y el marcador quedaba solo en
   medio de un desierto. Con `flex-start` los dos equipos se arriman al marcador, que es
   lo que hace que se lea «Naranja 24 – 18 Rojo» de un tirón. */
.banda .eq.izq{grid-area:local;justify-content:flex-start;text-align:right;flex-direction:row-reverse}
.banda .eq.der{grid-area:visita;justify-content:flex-start;text-align:left}
.banda .tope{width:4px;height:22px;border-radius:2px;flex-shrink:0;display:block}
/* Los nombres se PARTEN por palabras, nunca se recortan: «Arepa con h…» y «Arepa de
   qu…» son dos equipos del mismo grupo y del mismo partido. `overflow-wrap` y NO
   `word-break`, que parte a mitad de palabra y en una columna estrecha dejaba una letra
   por renglón. Lo que evita que se llegue a eso es que la llave apile antes de
   estrujar la fila (ver el `@container` de abajo). */
.banda .nm{font-weight:700;font-size:.94rem;color:var(--marino);min-width:0;
  overflow-wrap:break-word;line-height:1.25}
.banda .nm.gana{color:var(--ok-tx)}
.banda .eq .gana-marca{color:var(--ok-tx);flex-shrink:0;font-size:.85rem}
.banda .seed{font-weight:700;color:var(--tinta-3);font-size:.88rem;font-style:italic;
  overflow-wrap:break-word}

.banda-estado{grid-area:estado;display:flex;align-items:center}
.banda-score{grid-area:score;font-family:var(--f-titulo);font-weight:700;font-size:1.05rem;
  min-width:96px;min-height:44px;flex-shrink:0;padding:0 var(--e3);border:0;cursor:pointer;
  border-radius:var(--r-sm);
  background:var(--marca-osc);color:#fff;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.banda-score:hover{background:var(--marca-osc-2)}
.banda-score.pendiente{background:var(--hundido);color:var(--tinta-2)}
/* Un partido en vivo todavía no tiene marcador, así que le tocaba también `.pendiente`:
   la regla de en-vivo le cambiaba el FONDO a rojo pero el color de texto seguía siendo el
   gris de pendiente, y quedaba en 1,98:1 —gris sobre rojo— justo en el partido que todo el
   mundo está mirando. Hay que decir los dos. */
.banda.envivo .banda-score{background:var(--marca-osc-2);color:#fff}

/* En vivo: filo rojo a la izquierda y la hora en rojo. Nunca SOLO el color: al lado va
   el distintivo «En vivo». */
.banda.envivo{border-left:3px solid var(--marca);box-shadow:var(--sombra-activa)}
.banda.envivo .banda-cuando b{color:var(--marca-osc)}
.banda.jugado{background:var(--papel)}
.banda-meta{font-size:.78rem;color:var(--tinta-3);font-weight:600;margin:4px 0 var(--e2);
  padding-left:var(--e3)}
.banda-wrap{min-width:0}

/* Estrecho. Se mide el CONTENEDOR, no la ventana: la misma fila es ancha en un grupo a
   pantalla completa y estrecha dentro de una columna de la llave, y una consulta por
   ventana no distingue esos dos casos. Eso es lo que dejaba los nombres partidos letra a
   letra dentro del cuadro de la llave en un monitor grande.
   Se apila: el cuándo y el marcador arriba, los dos equipos debajo. */
@container (max-width:460px){
  .banda{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"cuando score" "local score" "visita score" "estado score";
    padding:0;row-gap:2px}
  .banda-cuando{width:auto;display:flex;align-items:baseline;gap:8px;padding-top:var(--e2)}
  .banda-cuando span::before{content:"· "}
  .banda .eq.izq{justify-content:flex-start;text-align:left;flex-direction:row;padding-left:var(--e3)}
  .banda .eq.der{padding-left:var(--e3)}
  .banda-estado{padding:0 0 var(--e2) var(--e3)}
  .banda-score{align-self:stretch;min-height:100%;border-radius:0;min-width:84px}
}
/* Respaldo por ventana para navegadores sin `@container`. Hace lo mismo en celular,
   que es donde más duele; dentro de la llave se queda con la rejilla ancha, que es
   peor pero legible porque la llave ya apila a una sola columna a esos anchos. */
@supports not (container-type:inline-size){
  @media (max-width:560px){
    .banda{grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:"cuando score" "local score" "visita score" "estado score";
      padding:0;row-gap:2px}
    .banda-cuando{width:auto;display:flex;align-items:baseline;gap:8px;padding-top:var(--e2)}
    .banda .eq.izq{justify-content:flex-start;text-align:left;flex-direction:row;padding-left:var(--e3)}
    .banda .eq.der{padding-left:var(--e3)}
    .banda-score{align-self:stretch;border-radius:0;min-width:84px}
  }
}
/* ── Pantalla de acceso ─────────────────────────────────────────────────────
   Partida en dos: la marca sobre el marino a la izquierda y el formulario sobre papel
   a la derecha. Vive dentro de `#loginModal` porque `initAuth()` engancha sus campos en
   DOMContentLoaded; sacarla a una página aparte dejaría el acceso muerto.

   Sin pestañas de padres y sin «Regístrate aquí»: no hay cuentas de familia, y quien
   llega desde la grada ve resultados, horario y nóminas sin entrar. Un formulario de
   registro ahí solo manda a la gente a un callejón. */
.modal-acceso{max-width:900px;padding:0;overflow:hidden;display:grid;grid-template-columns:1fr}
.acc-marca{background:var(--marino);color:#fff;padding:var(--e6) var(--e5) var(--e5);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--e3)}
.acc-escudo{width:74px;height:74px;border-radius:50%;background:#fff;padding:4px;object-fit:contain}
.acc-sigla{font-family:var(--f-titulo);font-weight:800;font-size:2.1rem;letter-spacing:.05em;
  line-height:1}
.acc-lema{color:#B7C6D9;font-size:.9rem;max-width:26ch;line-height:1.5}
.acc-arte{display:none}
.acc-form{padding:var(--e5)}
.acc-google{width:100%;gap:10px}
/* La «G» va en un cuadro propio: sin la marca de Google no se reconoce el botón, y
   traerse su SVG desde un CDN externo rompería la pantalla de acceso el día que ese CDN
   falle. Cuando el club conecte su cuenta, aquí entra el botón oficial de Google. */
.acc-g{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:#fff;border:1px solid var(--linea-fuerte);
  /* No es el azul de Google (#4285F4): sobre blanco da 3,56:1 y esto es texto pequeño.
     Un tono más oscuro se sigue leyendo como «el azul de Google» y llega a 5,9:1. */
  font-family:var(--f-titulo);font-weight:800;font-size:.9rem;color:#1A5FCC;flex-shrink:0}
.acc-google:disabled{opacity:.55}
.acc-google-nota{font-size:.78rem;color:var(--tinta-3);margin-top:6px;text-align:center}
.acc-sep{display:flex;align-items:center;gap:12px;margin:var(--e4) 0;color:var(--tinta-3);
  font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.acc-sep::before,.acc-sep::after{content:"";flex:1;height:1px;background:var(--linea)}
.acc-entrar{width:100%;margin-top:var(--e4)}
.acc-cancelar{width:100%;margin-top:var(--e2)}
#logMsg:not(:empty){margin-top:var(--e3)}
.acc-pie{font-size:.8rem;color:var(--tinta-3);margin-top:var(--e4);line-height:1.5}
@media (min-width:760px){
  .modal-acceso{grid-template-columns:.82fr 1.18fr;max-height:none}
  .acc-marca{justify-content:center}
  /* Igual que en la columna: silueta blanca, o el lema no se lee sobre el marino. */
  .acc-arte{display:block;max-width:140px;margin-top:var(--e4);opacity:.8;
    filter:brightness(0) invert(1)}
  .acc-form{padding:var(--e6) var(--e6) var(--e5)}
}
/* En celular el panel oscuro se encoge: si ocupa media pantalla, el usuario abre el
   acceso y no ve ni un campo sin desplazarse. */
@media (max-width:759px){
  .acc-marca{padding:var(--e4) var(--e4) var(--e3);flex-direction:row;gap:var(--e3);text-align:left}
  .acc-escudo{width:44px;height:44px}
  .acc-sigla{font-size:1.4rem}
  .acc-lema{display:none}
}

/* ── Panel del staff ────────────────────────────────────────────────────────
   Es la pantalla a la que se llega al iniciar sesión: sus torneos, su gente, su marca y
   su vitrina. Tiene dirección propia (`#/panel`) a propósito — se puede compartir, se
   puede volver con el botón atrás y no es «la portada con otra cosa dentro». */
.panel-cab{display:flex;align-items:flex-end;gap:var(--e4);flex-wrap:wrap;
  margin-bottom:var(--e5);padding-bottom:var(--e4);border-bottom:1px solid var(--linea)}
.panel-cab .tx{flex:1;min-width:240px}
.panel-cab h2{font-family:var(--f-titulo);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;
  color:var(--marino);line-height:1.15}
.panel-cab p{color:var(--tinta-2);font-size:.92rem;margin-top:4px}
.sub-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--e5)}
.sub-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;
  font-size:.86rem;min-height:var(--toque);padding:0 var(--e4);border-radius:var(--r-full);
  border:1.5px solid var(--linea-fuerte);background:var(--papel);color:var(--tinta-2);
  cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.sub-btn:hover{background:var(--hundido);color:var(--tinta)}
.sub-btn.active{background:var(--marino);border-color:var(--marino);color:#fff}
.sub-btn.active .fi{color:var(--marca-clara)}
.sub-panel{display:none}
.sub-panel.active{display:block}

/* Enlace para compartir. Campo de solo lectura + botón: se copia de un toque y además
   se VE, que es lo que hace falta para pegarlo en un mensaje desde el celular. */
.enlace{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap}
.enlace input{flex:1;min-width:200px;font-size:.86rem;font-family:var(--f-texto);
  background:var(--hundido);color:var(--tinta-2)}
.enlace .btn{flex-shrink:0}

/* Cuadrícula de ajustes de marca: la muestra al lado de los campos, para ver el cambio
   sin guardar y sin salir. */
.marca-prev{display:flex;align-items:center;gap:var(--e3);padding:var(--e4);
  border-radius:var(--r);background:var(--marino);color:#fff;margin-bottom:var(--e4)}
.marca-prev img{width:52px;height:52px;border-radius:50%;background:#fff;padding:3px;
  object-fit:contain;flex-shrink:0}
.marca-prev .nm{font-family:var(--f-titulo);font-weight:800;font-size:1.1rem}
.marca-prev .mu{font-size:.76rem;color:#9FB2C9;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700}
.marca-prev .bolas{display:flex;gap:6px;margin-left:auto;flex-shrink:0}
.marca-prev .bola{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.5)}
input[type=color]{padding:4px;height:var(--toque);cursor:pointer}

/* Detalle del partido: mientras está abierto, el fondo NO se mueve. Sin esto, en
   celular se scrollea la página de atrás y al cerrar has perdido el sitio donde
   estabas —en una mesa de control eso es volver a buscar el partido a mano—. */
body:has(.modal-fondo.open){overflow:hidden}
.det-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:var(--e3)}
.det-eq{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);
  background:var(--hundido);margin-bottom:var(--e2)}
.det-eq .tope{width:30px;height:30px;border-radius:8px;flex-shrink:0;
  border:1px solid rgba(16,28,54,.14)}
.det-eq .nm{font-weight:800;flex:1;min-width:0}
.det-dato{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--linea);font-size:.9rem}
.det-dato b{color:var(--marino)}
.det-eq select,.det-eq input,#detEstado{min-height:var(--toque)}
.det-nomina{font-size:.86rem;color:var(--tinta-2);margin-top:4px;line-height:1.5}