/* Marca DIVIETO 26/27 — fuente ÚNICA de color y tipografía. Cualquier pantalla la carga antes
   que su propia hoja; ningún css de pantalla vuelve a declarar una fuente ni a reescribir estos
   valores.

   El lenguaje viene del Mundial, que funcionó: mismos oros, mismas tipografías. Lo capturado
   y por qué, en docs/DISENO_VISUAL.md. El fondo es NEGRO en toda la app.

   Regla dura: verde/naranja/rojo están RESERVADOS a semántica de juego (química, peligro).
   Nunca de adorno. El resto de la interfaz vive en negro, crema y oro.
   Detalle y motivos en docs/DRAFT_MUNDIAL_ANATOMIA.md §7. */

/* ── TIPOGRAFÍA ────────────────────────────────────────────────────────────────────
   Vendoreadas, sin llamar a Google Fonts: una pantalla no puede quedarse esperando a
   un tercero para dibujar un nombre. Estaban declaradas en cartas.css, que solo cargan
   tres páginas — así Liga, Jornada y Admin salían con la fuente del sistema. Viven aquí
   porque la marca es de toda la app, no de una pantalla. */
@font-face {
  font-family: "Bebas Neue";
  src: url("/assets@f08561b48e/fonts/bebas-neue.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets@f08561b48e/fonts/barlow-condensed.woff2") format("woff2");
  font-display: swap;
}
/* AQUÍ VIVÍA JETBRAINS MONO, y se retiró el 14-ago-2026.
   Estaba para "lo que es un dato y no una palabra": códigos, ids y cifras que se comparan. El
   motivo real era alinear dígitos, y eso lo dan igual los números de Bebas —que tienen el mismo
   ancho— más las columnas de ancho fijo que ya llevaban las tablas. Lo que aportaba de más era
   un aire de máquina de escribir que no pega con nada del resto (Jepi: "rompen la estética").
   Se va la declaración Y el fichero: 21 KB menos en la primera carga de cada pantalla.
   El `pre` de las herramientas de desarrollo se queda en la monoespaciada DEL SISTEMA — ahí
   alinear un JSON sí sirve, y no cuesta una descarga. */

:root {
  /* Fondo: NEGRO en toda la app, decidido el 5-ago-2026.
     Aquí vivía un azul noche heredado del Mundial con la idea de que el oro respirase
     mejor encima. En la práctica ninguna pantalla lo usó, así que la regla existía sin que
     nadie la cumpliera. Se retiró el azul y manda el negro.

     Y el 6-ago se acabó de quitar de donde quedaba: `--panel` seguía siendo azul y se
     colaba en cada caja de la app. NO SE TRABAJA CON AZUL hasta que Jepi lo diga. */
  --negro: #000;

  /* Superficie elevada: tarjetas y paneles sobre el negro.
     SIN AZUL. Aqui habia un rgba(6, 15, 38) heredado del Mundial que se colaba en cada caja
     de la app —el panel de acceso, las tarjetas de Liga, los bloques— y desde el 5-ago el
     fondo es negro. Se despega del fondo ACLARANDO, no tintando: sobre negro, un blanco al
     4,5% se lee como una superficie por encima sin meter color ninguno.
     El azul no vuelve hasta que Jepi lo diga. */
  --panel: rgba(255, 255, 255, 0.045);
  /* El borde de toda caja de la app: el oro al 10 %. Estaba escrito a mano —`rgba(200,168,75,.1)`—
     y es el MISMO fallo que el barrido persigue por las pantallas, en el sitio donde mas duele:
     el dia que el oro cambie, el borde de la app entera se queda con el oro viejo. Aqui abajo
     `--oro` todavia no esta declarado y da igual: un `var()` se resuelve al USARSE, no al leerse. */
  --borde: color-mix(in srgb, var(--oro) 10%, transparent);

  --crema: #f0ede6;
  /* Texto secundario. La alfa subió de .4 a .5 el 11-ago-2026 por CONTRASTE, no por gusto:
     a .4 daba 3,29:1 sobre negro y WCAG AA pide 4,5:1 para texto normal. A .5 da 4,68:1.

     No era teórico. Este token tiene ~64 usos y TODOS son `color:` —o sea texto—, y 33 de
     ellos a 10, 11 o 12 px: es el texto secundario de media app, en el tamaño donde peor se
     lee, en un móvil que se usa en la calle. Bajarlo otra vez es volver a ese fallo.

     Era `rgba(240,237,230,.5)`, el unico derivado de la crema que seguia escrito a mano
     mientras los tres de abajo ya salian de `color-mix`. Con 64 usos, era el que mas caro
     salia: cambiar `--crema` habria movido el texto principal de la app y dejado el
     secundario con la crema vieja. Mismo color, ahora atado. */
  --crema-suave: color-mix(in srgb, var(--crema) 50%, transparent);
  --oro: #c8a84b;
  --oro-claro: #f0cc60;
  /* Texto sobre oro. Casi negro, pero no del todo: sobre un fondo dorado el negro puro
     corta demasiado. Neutro, sin tinte — antes era #040d1f, que era azul. */
  --tinta: #0a0a0a;
  --rojo: #e05252;

  /* Derivados que antes cada pantalla se escribia a mano en rgba(). Escritos asi, la paleta
     vivia en dos sitios: cambiar la crema obligaba a buscar sus rgba por todas las hojas.
     Con color-mix salen del color de verdad y siguen a la marca solos. */
  --crema-tenue: color-mix(in srgb, var(--crema) 28%, transparent);
  --crema-apenas: color-mix(in srgb, var(--crema) 18%, transparent);
  --rojo-borde: color-mix(in srgb, var(--rojo) 45%, transparent);
  --rojo-fondo: color-mix(in srgb, var(--rojo) 10%, transparent);

  /* AVISO: algo que hay que saber, pero que no es un error ni pide hacer nada. Hoy lo usa la
     jornada dividida. Azul y no oro a propósito: el oro ya dice "estás viendo el equipo de otro",
     y los dos avisos pueden salir a la vez en la misma pantalla. */
  --aviso: #5b8ec4;
  --aviso-borde: color-mix(in srgb, var(--aviso) 55%, transparent);
  --aviso-fondo: color-mix(in srgb, var(--aviso) 12%, transparent);

  /* Química: los tres tramos del dominio y nada más.
     Ojo al nombre: el tramo nulo se llama `gray` en el contrato pero se PINTA ROJO —
     rojo es "aquí no hay química". El gris queda para la conexión potencial. */
  --quimica-verde: #2dd55e;
  --quimica-naranja: #fba733;
  --quimica-rojo: #f05555;
  --quimica-potencial: rgba(255, 255, 255, 0.22);

  /* LOS COLORES DE LAS LÍNEAS (decisión de Jepi, 12-ago-2026). Portería, defensa, medio y
     delantera, para las insignias PT/DF/MC/DL.

     Esto convive con la regla de arriba —verde/naranja/rojo reservados a la química— y se
     decidió a sabiendas: aquí el color tampoco es adorno, dice la LÍNEA. Se avisó de que un
     delantero rojo y "sin química" pueden competir si algún día estas insignias llegan al
     Draft, y Jepi lo dio por bueno.

     Son tokens PROPIOS y no `var(--quimica-verde)` a propósito: significan cosas distintas, así
     que tienen que poder cambiar por separado. Atarlos sería que retocar la química moviera el
     color de los centrocampistas. */
  /* LOS TRAMOS DE PUNTOS, portados del Mundial (Jepi, 12-ago-2026). Cinco y no tres: con once
     jugadores de un golpe, distinguir "buen partido" de "partidazo" es información real.

       >= 10  partidazo      >= 6  buen partido      >= 1  algo hizo
        == 0  jugó y nada     < 0  restó

     ⚠️ EL AZUL VUELVE, Y SOLO PARA ESTO. Arriba está escrito que no se trabaja con azul hasta
     que Jepi lo diga: lo dijo el 12-ago para el tramo alto, porque es el color que ese tramo
     tenía en el Mundial y la escala ya estaba aprendida. No es permiso para el resto de la app:
     el fondo, los paneles y los bordes siguen sin azul. */
  --pts-alto: #3b82f6;
  --pts-bueno: #22c55e;
  --pts-algo: #f59e0b;
  --pts-cero: #888;
  --pts-negativo: #ef4444;

  --pos-pt: #f2c94c;
  --pos-df: #4a90d9;
  --pos-mc: #2dbd5a;
  /* token-aparte: coincide en valor con `--rojo` y NO es lo mismo. `--rojo` es "algo va mal"
     —un error, un aviso—; esto es la línea de delantera. Atarlos haría que el día que el rojo de
     los errores se retoque, los delanteros cambiasen de color con él. */
  --pos-dl: #e05252;

  /* Medidas del móvil, tomadas del Mundial. La app vive en una columna estrecha y
     centrada: en pantalla grande no se estira, se queda como un teléfono. */
  --ancho-app: 430px;
  /* 56 Y NO 64. Decía 64 y la cabecera medía 56: nadie los ató nunca, porque este token tenía un
     único consumidor —la tapa de carga, que empieza justo debajo de la cabecera— y ocho píxeles
     de más no se ven contra un fondo negro.
     Se veían cuando por ahí pasaba algo con color: al cargar no hay view model todavía, así que
     la banda de carril se pinta "desconocida" (#2a2620) y sus ocho píxeles de arriba asomaban por
     encima de la tapa como una raya marrón bajo la cabecera. Lo vio Jepi el 14-ago-2026.
     Ahora la cabecera SALE de este token, así que no pueden volver a separarse. */
  --alto-cabecera: 56px;
  --alto-barra: 64px;

  /* ── EL COLCHÓN DE ABAJO, Y POR QUÉ `safe-area-inset-bottom` NO LO DABA ────────────
     La barra quedaba pegada al borde de la pantalla, encima de la banda donde iOS
     escucha el gesto de subir para salir: pulsar Jornada te invitaba a cerrar DIVIETO
     (Jepi, 14-ago-2026, en iPhone).

     Y la causa no era el CSS de aquí. `env(safe-area-inset-bottom)` SOLO devuelve el
     hueco real si la página declara `viewport-fit=cover` en su meta de viewport, y
     ninguna de las nuestras lo hace. Sin eso, iOS contesta CERO y el `padding` de abajo
     se quedaba en nada — parecía que el hueco estaba contemplado y no lo estaba.

     Se arregla con un MÍNIMO en vez de con `viewport-fit=cover` a propósito: esa
     bandera hace que el contenido pase también por debajo del notch de arriba, y aquí
     nadie mira `safe-area-inset-top`. Arreglar el pie a cambio de arriesgar la cabecera
     de todas las pantallas, sin un iPhone delante para comprobarlo, no compensa.

     Con `max()`: si algún día se pone `viewport-fit=cover`, se respeta el hueco de iOS
     tal cual; mientras tanto, y en cualquier móvil que conteste cero, los botones nunca
     tocan el borde. Si sigue quedándose corto es este número y nada más. */
  --colchon-barra: max(env(safe-area-inset-bottom, 0px), 22px);
}

/* CHAMPIONS — preparado, todavía sin activar (1-sep-2026).
   Arriba dice tres veces "NO SE TRABAJA CON AZUL hasta que Jepi lo diga": esto es Jepi
   diciéndolo, para Champions, y por eso vive en una clase aparte y NO toca el `:root` — Liga
   sigue siendo negro puro, exactamente igual que hoy, en cualquier pantalla que no lleve esta
   clase en el `body`.
   Solo tres tokens: `--negro` y `--panel` (todo lo que ya usa `var(--panel)` para "superficie
   elevada" se aclara sobre azul en vez de sobre negro, sin tocar una sola hoja de pantalla) y
   `--crema` a blanco puro (pedido explícito: "la tipografía tiene que ser toda blanca"; con
   `--crema-suave` derivándose de él por `color-mix` no hace falta tocarlo aparte).
   Lo que NO cambia, a propósito (decidido con Jepi el 1-sep-2026):
     - química/puntos (verde/naranja/rojo) y las líneas PT/DF/MC/DL: son semántica de juego,
       "reservados... nunca de adorno" (comentario de arriba), no decorado de competición.
     - `--oro`/`--oro-claro`: el acento de marca se queda dorado sobre el azul nuevo — es la
       misma combinación que ya llevan los marcos de carta Champions (oro/plata/bronce sobre
       fondo azul), así que acento y cartas hablan el mismo idioma.
   El azul de fondo es el mismo que se validó en las cartas Champions (`app/assets/cartas/
   champions-*.webp`) y en la muestra de Inicio: no es un azul inventado aparte.
   Nada de esto se ve hoy: ninguna pantalla añade `tema-champions` al `body` todavía — eso
   depende del mismo mecanismo de activación pendiente que las cartas (ver cartas.css). */
body.tema-champions {
  --negro: #041c4a;
  /* #1b4fd1 (probado el 1-sep-2026) salio "electrico", no "Champions" — Jepi lo corrigio en la
     misma sesion: mas oscuro, del mismo azul profundo y rico que ya tienen aprobado las cartas
     (el que se muestreo de champions-oro-brillante-encajado.png), no un azul de neon. */
  --panel: #122c72;
  /* #fdfdfd y no #fff a proposito: blanco puro coincide con el literal que usan las insignias
     de estado (lesion/duda/sancion en cartas.css y panel.css) para su CIRCULO DE FONDO, que no
     tiene nada que ver con el texto de la app y no puede empezar a seguir a `--crema` — el
     test de estilos-completos.test.mjs lo pilla por coincidir el literal, no por relacion real. */
  --crema: #fdfdfd;

  /* El resplandor cian-blanco de esquina + la estructura fina de arcos y vigas cruzadas
     (inspirada en la distribucion del "starball" de la UEFA, pero sin la estrella — Jepi pidio
     explicitamente no llevarla). Guardado como VARIABLE y no repetido a mano: hay mas de un
     sitio (el `body`, y `.picker` del Draft, que pinta su propio fondo solido encima y tapaba
     el de la pagina — lo encontro Jepi el 1-sep-2026) que necesita este mismo fondo entero, y
     copiar un `data:` de este tamaño en cada hoja que lo necesite es la clase de duplicado que
     se desincroniza el dia que alguien lo retoque en un sitio y se olvide del otro. */
  --fondo-champions-imagen:
    radial-gradient(55% 60% at 14% 6%, rgba(210, 255, 245, 0.42) 0%, rgba(120, 210, 255, 0.24) 30%, transparent 65%),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGFmZmZmIiBzdG9wLW9wYWNpdHk9IjAuOCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0iIzhmZDhmZiIgc3RvcC1vcGFjaXR5PSIwLjQ1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNkN2JmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCN0KSIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgICA8cGF0aCBkPSJNIC0xMDAgNjIwIFEgNDAwIDM4MCA5MDAgNTIwIFQgMTc1MCA0MjAiLz4KICAgIDxwYXRoIGQ9Ik0gLTEwMCA3NjAgUSA0NTAgNTYwIDEwMDAgNjgwIFQgMTc1MCA2MDAiIHN0cm9rZS13aWR0aD0iMS42IiBvcGFjaXR5PSIwLjYiLz4KICAgIDxwYXRoIGQ9Ik0gLTUwIDMwMCBRIDM1MCA2MCA4NTAgMTkwIFQgMTY1MCAxMjAiIHN0cm9rZS13aWR0aD0iMS40IiBvcGFjaXR5PSIwLjUiLz4KICAgIDxwYXRoIGQ9Ik0gNjAgNDAgTCA3NjAgODYwIiBzdHJva2Utd2lkdGg9IjEuNSIgb3BhY2l0eT0iMC41Ii8+CiAgICA8cGF0aCBkPSJNIDE1ODAgNjAgTCA3MjAgOTAwIiBzdHJva2Utd2lkdGg9IjEuNSIgb3BhY2l0eT0iMC40NSIvPgogICAgPHBhdGggZD0iTSAxMjAgMjAwIEwgNDgwIDYwIiBzdHJva2Utd2lkdGg9IjEuOCIgb3BhY2l0eT0iMC42Ii8+CiAgICA8cGF0aCBkPSJNIDQ4MCA2MCBMIDkwMCAyNDAiIHN0cm9rZS13aWR0aD0iMS44IiBvcGFjaXR5PSIwLjU1Ii8+CiAgPC9nPgo8L3N2Zz4K");
  background-image: var(--fondo-champions-imagen);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, fixed;
}

/* LO QUE ESTÁ OCULTO, NO SE VE. Y no depende de que nadie se acuerde.

   El navegador trae `[hidden] { display: none }`, pero es una regla de elemento y CUALQUIER
   `display` que se le ponga a una clase la gana. `.campo { display: flex }` bastaba para que
   el atributo `hidden` no hiciera absolutamente nada: el JS ocultaba el campo del nombre de
   mánager, el CSS lo desoía, y salía siempre — también al entrar, donde no pinta nada.

   Antes de esto había CUATRO reglas escritas a mano —`.acceso-error[hidden]`, `.modal[hidden]`,
   `.dv-menu[hidden]`, `.dv-menu-fuera[hidden]`—, una por cada vez que alguien pisó el fallo y
   lo tapó donde le dolía. La quinta se olvidó, y ese olvido es el fallo. Se dice UNA vez, para
   todo, y ya no hay nada que recordar.

   El `!important` es el que hace que sea de raíz: sin él, la siguiente clase con `display`
   vuelve a ganar y estamos igual. Ver AGENTS.md § De raíz, nunca un parche. */
[hidden] { display: none !important; }

/* ── BASE ──────────────────────────────────────────────────────────────────────────
   Tipografía de toda la app, y son DOS. Barlow Condensed para lo que se lee en párrafo, y
   Bebas Neue para rótulos, títulos y CIFRAS —sus dígitos van a la par, así que una columna de
   puntos se lee de un vistazo—. No hay una tercera: la monoespaciada se retiró. */


/* La app se apila EN COLUMNA: el header arriba y el contenido debajo, los dos centrados.
   Cada pantalla declaraba por su cuenta `display:flex; justify-content:center` sin decir
   la dirección, así que el eje era el de por defecto —fila— y el header se plantaba como
   una columna al lado del contenido en vez de arriba. Se dice aquí una vez y ninguna
   pantalla lo repite. */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--negro);
  color: var(--crema);
  font-family: "Barlow Condensed", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── SPLASH DE ENTRADA ─────────────────────────────────────────────────────────────
   La marca a pantalla completa al abrir la app. Animación portada del Mundial, curva
   incluida. Va por encima de la tapa de carga (z-index 999) porque es lo primero que se
   ve: primero la marca, y cuando se va, la pantalla cargando o ya cargada.

   VIENE EN EL HTML, no la monta el JavaScript, y por eso NO PARPADEA. Un módulo es diferido
   por definición: el navegador pinta la pantalla y luego lo ejecuta, así que la marca caía un
   instante DESPUÉS de verse el fondo. Ahora la mete el servidor en cada página
   (`app/preparar-pagina.mjs`) y forma parte del primer pintado.

   Apagada salvo que el `<html>` traiga `data-splash`, que lo pone un guion bloqueante del
   `<head>` cuando toca enseñarla: primera pantalla de la pestaña y sin `prefers-reduced-motion`.
   Al revés —encendida por defecto y apagada por JavaScript— volveríamos al parpadeo, solo que
   con la marca saliendo donde no debía.

   No hay que quitarla al terminar: la animación acaba en opacidad 0 y `pointer-events: none`
   hace que no se coma ningún toque, ni durante ni después. */
.dv-splash { display: none; }
:root[data-splash] .dv-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--negro);
  pointer-events: none;
  /* CHAMPIONS — mismo caso que `.picker`/`.cargando`: fondo solido propio, a pantalla
     completa, que taparia el resplandor+lineas de `body.tema-champions` de mas arriba. Es lo
     PRIMERO que se ve al abrir la app, asi que si algo no llevaba el tema era esto. */
  background-image: var(--fondo-champions-imagen);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  /* EL TELÓN SE LEVANTA. Y esto no es un detalle: antes la animación estaba SOLO en el logo,
     así que el logo se desvanecía y este fondo negro se quedaba tapando la pantalla PARA
     SIEMPRE. La app entera se veía en negro después de la entrada.
     Termina en `visibility: hidden`, no solo en opacidad 0: así deja de estar de verdad. */
  animation: dv-splash-telon 1.8s ease forwards;
}
.dv-splash img {
  width: min(260px, 65vw);
  height: auto;
  animation: dv-splash-entrada 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes dv-splash-entrada {
  0%   { opacity: 0; transform: scale(0.82); }
  35%  { opacity: 1; transform: scale(1); }
  72%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}
@keyframes dv-splash-telon {
  0%, 80% { opacity: 1; visibility: visible; }
  100%    { opacity: 0; visibility: hidden; }
}

/* Cinturón y tirantes: el guion del <head> ya no pone `data-splash` con esta preferencia
   puesta, pero si alguna vez llegara encendida de otro sitio, aquí no se mueve nada. */
@media (prefers-reduced-motion: reduce) {
  :root[data-splash] .dv-splash { display: none; }
  .dv-splash img { animation: none; }
}

/* ── HEADER DE DIVIETO ─────────────────────────────────────────────────────────────
   Va en TODAS las pantallas del juego, siempre igual. Es la marca de la casa y no se
   negocia por pantalla.

   Se monta con dos piezas en vez de con el PNG entero (`header-divieto.webp`, que se
   conserva como referencia del original): en el original la X va incrustada en la
   imagen, y una X dibujada no se puede pulsar, ni recibe foco, ni tiene area tactil.
   Como ahi vive el menu de usuario, tiene que ser un boton de verdad. Compuesto se ve
   igual —mismas proporciones que el original, 780x112— y ademas se adapta al ancho.

   El fondo del original es rgb(0,0,0) opaco, el mismo `--negro` de la app, asi que las
   piezas recortadas encajan sin costura. */
.dv-header {
  position: sticky;
  top: 0;
  z-index: 300;
  /* Del mismo ancho que el contenido: la app entera se queda como un teléfono aunque la
     pantalla sea enorme, y un header estirado de pared a pared rompería eso. */
  width: 100%;
  max-width: var(--ancho-app);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Del token, no del número: la tapa de carga se coloca justo debajo de la cabecera usando ese
     mismo valor. Escritos por separado se desincronizaron —64 contra 56— y la tapa dejaba una
     rendija de ocho píxeles. */
  height: var(--alto-cabecera);
  padding: 0 14px;
  background: var(--negro);
  border-bottom: 1px solid var(--borde);
}

.dv-header-marca { display: flex; align-items: center; text-decoration: none; }
/* 28px de alto = la misma proporcion que el wordmark tiene en el header original. */
.dv-header-marca img { height: 28px; width: auto; display: block; }

/* Agrupa la campana y la X para que las dos vivan pegadas a la derecha: el header reparte solo
   DOS hijos con `space-between` (la marca y este grupo), no tres. */
.dv-header-derecha { display: flex; align-items: center; gap: 2px; }

/* ── LA CAMPANA DE AVISOS ─────────────────────────────────────────────────────────
   Blanca = avisos desactivados en este dispositivo. Dorada = activados. La pinta
   dv-campana-avisos.mjs mirando Notification.permission y la marca propia de activos. Se puede
   pulsar: notificaciones-permiso.mjs pide confirmación antes de activar o desactivar — nunca
   actúa al primer toque, está demasiado cerca de la X como para arriesgarse a un roce. */
.dv-header-campana {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.dv-header-campana svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--crema-tenue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.15s ease;
}
.dv-header-campana--activa svg { stroke: var(--oro-claro); }
.dv-header-campana:hover svg { stroke: var(--oro); }
.dv-header-campana--activa:hover svg { stroke: var(--oro-claro); }
.dv-header-campana:focus { outline: none; }
.dv-header-campana:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; border-radius: 6px; }

/* La X: 44px de area tactil aunque el dibujo mida 22, que es el minimo que se puede
   pulsar con el pulgar sin fallar. */
.dv-header-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px; /* el aire lo pone el area tactil, no el borde */
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.dv-header-menu img { height: 22px; width: auto; display: block; transition: transform 0.15s ease; }
.dv-header-menu:hover img { transform: scale(1.08); }
.dv-header-menu[aria-expanded="true"] img { transform: rotate(90deg); }

/* ── Menú de usuario ───────────────────────────────────────────────────────────────
   Cuelga de la X. Lo que todavía no tiene a dónde ir se ve, pero se ve que no se puede
   abrir: mismo criterio que los accesos de Liga. */
/* ── EL MENÚ SIGUE AL HEADER, ESTÉS DONDE ESTÉS ────────────────────────────────────

   Iba en `position: absolute`, y el menú es HERMANO del header, no hijo: así que ese
   `top: 52px` se medía desde lo alto del DOCUMENTO, no de la pantalla. Con la página sin
   desplazar cuadraba y parecía correcto; en cuanto bajabas un poco, pulsar la X abría el menú
   allá arriba, fuera de la vista, y la app se quedaba como colgada — el botón respondía y no
   pasaba nada (Jepi, 14-ago-2026).

   El header ya era `sticky`, así que el que no seguía era solo el menú.

   `fixed` lo ancla a la PANTALLA, que es lo que hace falta. Y el `right` deja de ser un número
   suelto: la app es una columna centrada de 430px, así que pegarlo al borde derecho de la
   ventana lo mandaría lejísimos de la X en un monitor. La cuenta lo deja siempre a 10px del
   borde de la columna, y en un móvil —donde la columna ES la ventana— sale ese mismo 10px.
   Es la misma cuenta que usa la burbuja de Liga: si un día cambia `--ancho-app`, las dos se
   mueven solas. */
.dv-menu {
  position: fixed;
  top: 52px;
  right: max(10px, calc(50vw - var(--ancho-app) / 2 + 10px));
  z-index: 320;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--panel);
  backdrop-filter: blur(8px);
}
.dv-menu-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--crema);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
/* Coincide en valor con `--borde` y NO se referencia a proposito: aquel es el filete de una
   caja y este el fondo de un item enfocado. Mismo numero, dos papeles. */
.dv-menu-item:hover { background: color-mix(in srgb, var(--oro) 10%, transparent); }
/* AL ABRIR EL MENÚ SE ENFOCA EL PRIMER BOTÓN QUE SE PUEDA PULSAR, para poder recorrerlo con el
   teclado. Eso saca el recuadro de foco del navegador —azul, y ajeno a la marca— encima de
   "Cerrar sesión" nada más abrir, con el dedo o con el ratón, que es cuando NO hace falta.
   Apareció el 14-ago-2026 al enchufar el botón: hasta entonces no había ningún item habilitado
   al que enfocar, así que el foco no iba a ninguna parte y no se veía nada.
   `:focus-visible` es exactamente esta distinción: el navegador solo lo aplica cuando la
   navegación es de teclado. Quien llega con el dedo no ve recuadro; quien tabula, sí — y en oro,
   que es de la casa. */
.dv-menu-item:focus { outline: none; }
.dv-menu-item:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--oro) 10%, transparent);
}
.dv-menu-item[disabled] { opacity: 0.4; cursor: default; }
.dv-menu-item[disabled]:hover { background: none; }
.dv-menu-sep { height: 1px; margin: 5px 8px; background: var(--borde); }
/* Cerrar sesión es lo único que saca de la app: se separa y se dice en rojo. */
.dv-menu-item.salir { color: var(--rojo); }

/* Capa para cerrar tocando fuera, sin robar el scroll. */
.dv-menu-fuera { position: fixed; inset: 0; z-index: 310; }

/* ── EL AVISO DE ACTIVAR NOTIFICACIONES ───────────────────────────────────────────
   Por encima de TODO, splash incluido (z-index 1000): es lo primero que se pregunta y no puede
   quedar tapado por nada, ni siquiera por la entrada de marca. Lo monta
   aviso-activar-notificaciones.mjs desde dv-app.mjs, así que puede aparecer en cualquier
   pantalla — no tiene HTML propio, se construye entero desde JavaScript. */
.avisos-modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}
.avisos-modal-caja {
  width: 100%;
  max-width: 360px;
  padding: 26px 22px 22px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--negro);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.avisos-modal-titulo {
  margin: 0 0 10px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 26px;
  letter-spacing: 1.5px;
  color: var(--oro);
}
.avisos-modal-texto {
  margin: 0 0 20px;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--crema-suave);
}
.avisos-modal-error {
  margin: 0 0 14px;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rojo);
}
.avisos-modal-ahora-no {
  margin-top: 12px;
  padding: 8px;
  border: none;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--crema-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ── LA BARRA ──────────────────────────────────────────────────────────────────────
   Cinco pestañas y ni una más (docs/DISEÑO_APP.md §1). Fija abajo, del mismo ancho que
   la app, y separada del borde por `--colchon-barra` — el porqué de que no baste el
   `env()` de iOS está donde se declara.

   ICONO ARRIBA Y NOMBRE DEBAJO desde el 14-ago-2026, como en el Mundial. Aquí ponía que
   iba "solo texto, sin iconos, porque una iconografía inventada desentonaría": los
   iconos ya no son inventados, son los del Mundial, que es de donde viene el lenguaje
   visual de todo lo demás. */
.dv-barra {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  width: 100%;
  max-width: var(--ancho-app);
  display: flex;
  align-items: stretch;
  height: calc(var(--alto-barra) + var(--colchon-barra));
  padding-bottom: var(--colchon-barra);
  background: var(--negro);
  border-top: 1px solid var(--borde);
}

.dv-barra-item {
  flex: 1;
  display: flex;
  /* EL ICONO ENCIMA Y EL NOMBRE DEBAJO, como en el Mundial. En columna y no en fila porque en
     375px cinco pestañas con icono al lado del texto no caben sin recortar palabras. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--crema-suave);
  /* El filete de la pestaña activa se reserva SIEMPRE, aunque sea transparente: si
     apareciera solo al activarse, el texto bailaría 2px al cambiar de pestaña. */
  border-top: 2px solid transparent;
  margin-top: -1px;
}
.dv-barra-item:hover { color: var(--crema); }
.dv-barra-item.activa { color: var(--oro-claro); border-top-color: var(--oro-claro); }
.dv-barra-item.apagada { opacity: 0.35; cursor: default; }
.dv-barra-item.apagada:hover { color: var(--crema-suave); }

/* EL ICONO SE TIÑE SOLO. Va con `currentColor`, así que hereda el color de la pestaña —tenue,
   crema al pasar por encima, oro cuando está activa— y no hacen falta dos juegos de iconos ni
   una regla por estado. Trazo y no relleno: es lo que hace que eso funcione.

   `stroke-width` en 1.8 y no en 2: a 20px un trazo de 2 empasta la copa y la lupa. */
.dv-barra-icono {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* El nombre, un punto más pequeño que el icono para que mande el dibujo. */
.dv-barra-texto { line-height: 1; }

/* Hueco para que la barra no tape el final del contenido. Va en el body porque la barra
   es de la app: si lo pusiera cada pantalla, la primera que se escribiera sin acordarse
   tendría el último bloque debajo de la barra. */
body { padding-bottom: calc(var(--alto-barra) + var(--colchon-barra)); }

/* ── BLOQUES ───────────────────────────────────────────────────────────────────────
   La unidad de composición de la app: un título en oro con su filete y lo que cuelga
   debajo. Lo usan Jornada, Liga y Admin.

   Vivían en `jornada-ui.css`, que solo carga Jornada. Liga y Admin escribían
   `class="bloque"` once veces entre las dos y no recibían NADA: sin margen, sin título
   en oro, sin filete. De ahí que se vieran a medio hacer. Están aquí porque el bloque es
   de la marca, no de una pantalla. */
.bloque { margin: 18px 12px 0; }
.bloque-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--oro);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borde);
}
.bloque-nota {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--crema-suave);
  text-transform: none;
}

/* Jerarquía. Por defecto todos los bloques pesan lo mismo, que es lo correcto cuando
   son hermanos; estas dos variantes son para cuando NO lo son. */

/* El bloque al que vienes: en caja, para que se lea antes que el resto. */
.bloque.principal {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--oro) 28%, transparent);
  border-radius: 12px;
  background: var(--panel);
}
.bloque.principal > .bloque-titulo { color: var(--oro-claro); }

/* Una nota al pie no es un bloque más: se dice y se aparta. */
.bloque.menor { margin-top: 22px; opacity: 0.7; }
.bloque.menor .pista { margin: 0; }
.bloque.menor > .bloque-titulo {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--crema-suave);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}


/* ── PIEZAS COMPARTIDAS ────────────────────────────────────────────────────────────
   Lo que TODAS las pantallas tienen por ser de la misma app: la tapa de carga, la
   marca de carril, la cabecera de contexto, los avisos y la caja de herramientas.

   Estaban COPIADAS IDENTICAS en tres y cuatro hojas. No es una molestia estetica: ya
   habia mordido dos veces. `.bloque` vivia solo en jornada-ui.css y Liga y Admin lo
   usaban sin recibir nada; y los dos DOM falsos de los smokes se separaron hasta que
   uno se quedo sin `addEventListener`. Lo que se copia se desincroniza, y se descubre
   tarde.

   Aqui solo esta lo que era IDENTICO. Donde una pantalla decia algo propio —el `.dev`
   del draft, el `.app` de cada una— se ha quedado en su hoja: eso no es duplicacion,
   es una decision de esa pantalla.
   Ver AGENTS.md: de raiz, nunca un parche. */

/* ── LA LÍNEA DE UN DESPLEGABLE DE DETALLE ─────────────────────────────────────────
   Una fila con su etiqueta a un lado y su dato al otro, separada de la siguiente. La usan
   Jornada —el desglose de puntos de una carta— y Liga —lo que se abre bajo una fila de la
   clasificación—, y vivía SOLO en `jornada-ui.css`: en Liga esas tres líneas salían sin
   separación ni reparto, pegadas unas a otras. Es el fallo de `.bloque` otra vez, y esta vez
   lo cazó el test en lugar de una captura (15-ago-2026).

   Las variantes se quedan en Jornada: `.quimica` y `.total` son suyas, y una pieza compartida
   no tiene por qué cargar con lo que solo pasa en una pantalla. */
.detalle-linea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.detalle-linea:last-child { border-bottom: none; }

/* ── LA TAPA DE CARGA ──────────────────────────────────────────────────────────────
   TAPA EL CONTENIDO, NO LA APP.

   Existe por un motivo bueno: una clasificación a medias se lee como una clasificación, así
   que mientras no está entera no se enseña. Pero estaba puesta a `inset: 0`, es decir tapando
   la pantalla ENTERA — header y barra de pestañas incluidos—, y esos dos ya vienen pintados
   desde el primer instante.

   Resultado: cada cambio de pestaña parecía que la app arrancaba de cero. Lo que se veía era
   negro con un spinner, cuando debajo ya estaba el header, la barra, y el esqueleto de la
   pantalla con sus guiones puestos.

   Ahora empieza bajo el header y acaba sobre la barra. Se sigue sin enseñar media
   clasificación, y a la vez la app se ve entera desde el principio: solo su contenido está
   esperando. Es lo que de verdad pasa. */
/* LA TAPA DE CARGA ES UNA CORTINA DE PROBADOR, Y NACE PUESTA.

   Está desde el PRIMER PINTADO y se abre cuando la pantalla dice que está lista. Entre medias
   no se ve nada: ni un esqueleto con guiones, ni una pantalla rellenándose a trozos.

   AQUÍ ESTUVO EL FALLO QUE COSTÓ MEDIA TARDE. Le puse cuatro décimas de cortesía —"si carga
   rápido, que no se vea"— y eso invierte el orden: la pantalla aparece primero y la cortina cae
   después. Una cortina que llega tarde no informa de nada, convierte una espera en un parpadeo,
   y es lo que Jepi describió cuatro veces seguidas.

   Si carga rápido, la cortina dura poco. Eso está bien. Lo que no puede es llegar tarde.

   Tapa de header a barra, no la app entera: el header y las pestañas no se han movido y no hay
   por qué esconderlos. Lo que está cambiando es el contenido, y es lo único que se tapa. */
.cargando {position: fixed;
  top: var(--alto-cabecera);
  bottom: calc(var(--alto-barra) + var(--colchon-barra));
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--negro);
  /* CHAMPIONS — mismo caso que `.dv-splash`/`.picker`: tapa de carga con fondo solido propio,
     a pantalla completa, mientras la pantalla espera su view model. Se ve en CADA pantalla con
     datos (Draft, Jornada, Liga…), a menudo antes que nada mas, asi que si esto se quedaba en
     negro plano el tema se notaria roto en el primer instante de cada visita. */
  background-image: var(--fondo-champions-imagen);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: opacity 0.2s ease;}
.cargando.oculto {opacity: 0; pointer-events: none;}
.cargando-spinner {width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--oro-claro) 18%, transparent);
  border-top-color: var(--oro-claro);
  animation: girar 0.8s linear infinite;}

/* LA ANIMACIÓN VA AQUÍ, con lo que la usa.
   Estaba definida en `draft-ui.css`, `jornada-ui.css` y `liga-ui.css` —tres copias— y en ninguna
   de las hojas comunes. La tapa de carga vive aquí y la usan TODAS las pantallas, así que en el
   Inicio, que solo carga `marca.css` e `inicio.css`, la animación no existía: el spinner se
   quedaba QUIETO y la pantalla parecía colgada. En las otras tres giraba por casualidad, porque
   cada una traía su propia copia.
   Una regla que se necesita en todas partes no puede vivir en tres sitios y faltar en el común. */
@keyframes girar { to { transform: rotate(360deg); } }
.cargando-texto {letter-spacing: 3px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);}

/* La marca de carril */
.lane-banner {padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;}
body.lane-desconocido .lane-banner {background: #2a2620; color: var(--crema-suave);}
body.lane-sandbox .lane-banner {color: var(--tinta);
  background: repeating-linear-gradient(45deg, var(--oro) 0 12px, #8f7226 12px 24px);}
body.lane-real .lane-banner {background: var(--crema); color: var(--tinta);}

/* La cabecera de contexto */
.cabecera {display: flex; align-items: center; gap: 10px; padding: 10px 12px;}
/* El texto de la cabecera: nombre arriba, subtítulo debajo. La usan las cuatro pantallas y
   no la definía ninguna hoja — funcionaba de milagro, porque dos divs se apilan solos.
   `min-width: 0` es lo que de verdad hacía falta: sin él, un nombre de liga largo NO se
   trunca dentro de un flex, empuja al resto y se sale de la pantalla. */
.cabecera-txt {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;}
.jornada-sub {font-size: 12px; color: var(--crema-suave); letter-spacing: 0.5px;}

/* Los avisos */
.aviso-box {margin: 0 12px 10px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  background: color-mix(in srgb, var(--oro) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--oro) 22%, transparent);}
.aviso-box .codigo {font-weight: 700; letter-spacing: 1px;}
.aviso-box ul {margin: 5px 0 0; padding-left: 17px; color: var(--crema-suave); font-size: 12px;}
/* El error va con EL rojo de la marca. Era `rgba(239,68,68,...)`, un rojo propio que no es
   `--rojo` (224,82,82) y que heredaban las cuatro pantallas que cargan esta hoja: el rojo de
   peligro de la app estaba dicho en dos sitios distintos. Decision de Jepi (11-ago-2026): manda
   `--rojo`. El borde reusa `--rojo-borde`, que ya era ese 45 %; el fondo se queda en su 9 %
   —`--rojo-fondo` es 10 %— porque esto es atar el color, no retocar la transparencia. */
.aviso-box.error {border-color: var(--rojo-borde); background: color-mix(in srgb, var(--rojo) 9%, transparent);}

/* El exito. Vivia en `draft-ui.css`, la hoja de UNA pantalla, siendo el modificador de una pieza
   que vive aqui: el aviso de exito del Draft salia verde y el de Admin —misma clase, sin poder
   recibir esta— salia en oro. Es el fallo de `.bloque` otra vez, y por eso se mueve.

   EL VERDE SE QUEDA COMO ESTABA, y no es descuido: `34,197,94` NO es `--quimica-verde`
   (`45,213,94`). Atarlos haria que el verde del JUEGO pintase un aviso de interfaz, y
   DISENO_VISUAL.md reserva verde/naranja/rojo a la quimica y al peligro. Que este aviso gaste
   verde sigue siendo discutible; el dia que se decida, se decide aqui y para toda la app. */
.aviso-box.ok {border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08);}

/* Herramientas de desarrollo.
   LA CAJA ENTERA VIVE AQUÍ. `.dev summary`, `.dev-fila` y los botones ya estaban, pero el
   contenedor, la etiqueta y el campo de texto estaban escritos TRES veces —draft-ui, jornada-ui
   y liga-ui— y en ninguna hoja común. Es el mismo patrón que este test persigue: una pieza
   compartida guardada en la hoja de una pantalla. La caja la retira `dv-app.mjs` en producción,
   así que tenerla aquí no la enseña a nadie de más. */
.dev {margin: 14px 12px 0; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px;}
.dev summary {font-size: 12px; letter-spacing: 1px; color: var(--crema-suave); cursor: pointer; text-transform: uppercase;}
.dev-fila {display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px;}
.dev-fila label {min-width: 68px; font-size: 12px; color: var(--crema-suave);}
.dev input[type="text"] {
  flex: 1 1 140px;
  min-width: 0;
  padding: 5px;
  border: 1px solid var(--borde);
  background: var(--negro);
  color: var(--crema);
  font: inherit;
  font-size: 16px; /* 16px o iOS hace zoom al enfocar */
}
.dev button {padding: 6px 10px;
  border: 1px solid var(--oro);
  background: var(--negro);
  color: var(--crema);
  font: inherit;
  font-size: 13px;
  cursor: pointer;}
.dev button:disabled {opacity: 0.45; cursor: not-allowed;}
.phase {font-size: 11px; letter-spacing: 1px; color: var(--oro); text-transform: uppercase;}

/* ── LA INSIGNIA DE LÍNEA: PT / DF / MC / DL ───────────────────────────────────────────
   Un círculo de color con las dos letras. Dice la línea sin gastar una frase en ella, y se
   reconoce sin leer.

   Vive en marca.css y no en la hoja de una pantalla porque va a hacer falta en más de una
   —hoy el Inicio, mañana Análisis—, que es exactamente el fallo que este proyecto ha repetido
   tres veces en un día: una pieza compartida guardada donde solo la ve quien la escribió. */
.alerta-insignia,
.pos-insignia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  /* Texto oscuro: los cuatro colores son claros y el negro sobre ellos se lee mejor que el blanco. */
  color: var(--tinta);
}
.pos-pt { background: var(--pos-pt); }
.pos-df { background: var(--pos-df); }
.pos-mc { background: var(--pos-mc); }
.pos-dl { background: var(--pos-dl); }

/* Sueltas compartidas */
.once-nombre {flex: 1; font-size: 14px; font-weight: 600; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.clasif-aviso {margin-top: 8px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--crema-suave);
  line-height: 1.5;}


/* ── BOTON PRINCIPAL ───────────────────────────────────────────────────────────────
   La accion de la pantalla: guardar el once, crear la liga, entrar. Uno por pantalla.

   Vivia en liga-ui.css, que solo cargan Liga y Admin. La pantalla de acceso lo usaba sin
   recibir nada, asi que el boton ENTRAR salia con la tipografia por defecto del navegador —
   una fuente que no es de la marca y que nadie habia elegido. Mismo fallo que .

   BEBAS, no Barlow: es un rotulo en mayusculas con espaciado, no texto que se lee. Cada
   tipografia para lo suyo. */
.btn-principal {
  width: 100%;
  padding: 13px 0;
  border: none;
  border-radius: 8px;
  background: var(--oro-claro);
  color: var(--tinta);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 19px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-principal:disabled {
  background: var(--crema-apenas);
  color: var(--crema-tenue);
  cursor: default;
}

/* Grano y rayas: la textura del Mundial. Casi invisibles a propósito —2.5% y 1%—, pero
   son la diferencia entre una pantalla plana y una que parece impresa. No interceptan
   el puntero ni tapan nada. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 5px,
    color-mix(in srgb, var(--oro) 1%, transparent) 5px,
    color-mix(in srgb, var(--oro) 1%, transparent) 6px
  );
}