/* Inicio. Los colores, las tipografías y la barra salen de marca.css; aquí solo lo propio de
   esta pantalla.

   EL HERO ES EL DEL MUNDIAL, portado con sus medidas: la tarjeta con el degradado desde arriba
   a la izquierda, el reloj de tarjetas con su línea de plegado y sus pivotes, y los dos
   botones. Lo que cambia respecto de allí es que las tipografías y los oros vienen de
   marca.css en vez de estar escritos a mano, y que no lleva marca de agua. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  /* La disposición (columna, centrada) y el fondo salen de marca.css. */
  font-size: 15px;
}

/* CHAMPIONS — el resplandor + estructura de estadio vive en `marca.css` (`body.tema-champions`),
   compartido por TODA la app, no solo aquí (movido el 1-sep-2026: al principio estaba solo en
   Inicio, y Jepi pidió que fuera igual en cualquier pantalla).
   El resto de Inicio ya hereda solo: `.partido` y `.alerta` pintan su fondo con
   `var(--panel)`, que marca.css ya aclara sobre azul para este tema, y la mayoria del texto
   pinta con `var(--crema)`/`var(--crema-suave)`, que marca.css ya puso en blanco. Lo de aqui
   abajo es SOLO lo que no sale de esos dos tokens:
     - `.hero` y `.flip-cara` tienen su fondo escrito a mano (no `var(--panel)`), asi que no
       heredan solos.
     - `partido-cuando`/`partido-minuto`/`alertas-titulo`/`alerta-simbolo` pintan con
       `var(--oro)`/`var(--oro-claro)`, que a proposito NO cambia con el tema (el acento de
       marca se queda dorado) — pero aqui es tipografia informativa sobre el panel, no el
       acento, y Jepi pidio "toda blanca" el 1-sep-2026. */
body.tema-champions .hero {
  /* dos capas de imagen (un color plano SOLO puede ir en la ultima posicion del shorthand
     `background`, asi que `var(--panel)` se envuelve en un gradiente de un color) + el color
     de fondo de verdad al final */
  background:
    radial-gradient(120% 120% at 5% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(var(--panel), var(--panel)),
    var(--negro);
  border-color: rgba(255, 255, 255, 0.14);
}
body.tema-champions .flip-cara {
  /* mismo azul que ya se aprobo en la muestra de Inicio, mas claro arriba para que la caja
     lea como una tarjeta y no como un bloque plano */
  background: linear-gradient(180deg, #2c5bb8 0%, #17398c 100%);
  border-color: rgba(255, 255, 255, 0.18);
}
body.tema-champions .partido-cuando,
body.tema-champions .partido-minuto,
body.tema-champions .alertas-titulo,
body.tema-champions .alerta-simbolo {
  color: var(--crema);
}

.app { width: 100%; max-width: var(--ancho-app); padding-bottom: 24px; }

/* ── EL HERO ───────────────────────────────────────────────────────────────────────── */
.hero {
  margin: 16px 16px 0;
  padding: 20px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  /* La luz entra por arriba a la izquierda, como en el Mundial: da volumen sin meter color. */
  background:
    radial-gradient(120% 120% at 5% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 58%),
    /* token-aparte: coincide en valor con `--tinta` y NO es lo mismo. `--tinta` es el texto
       sobre oro; esto es la base OPACA del degradado del hero, que tiene que serlo porque
       lleva capas encima. Usar `var(--tinta)` aquí ataría dos cosas que no tienen por qué
       moverse juntas: el día que el texto sobre oro cambie, este fondo cambiaría con él. */
    #0a0a0a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* La etiqueta pequeña de arriba. Es un dato —qué jornada, qué estamos mirando—, así que va en
   la monoespaciada, muy pequeña y muy espaciada.

   LOS CUATRO RÓTULOS DEL HERO usan `--crema-suave` desde el 11-ago-2026, y antes eran blancos
   con alfa a mano (.42, .38, .28 y .28). Medido: daban entre 2,42:1 y 4,06:1 sobre el fondo del
   hero, y WCAG AA pide 4,5:1. El de 2,42 a 7 px no se leía en la calle. Con el token dan
   4,68:1 y además siguen a la marca: eran blanco puro, y el texto de esta app es crema. */
.hero-etiqueta {
  display: block;
  position: relative;
  z-index: 1;
  margin-bottom: 5px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--crema-suave);
}

/* El titular. Es EL rótulo de la pantalla: Bebas, enorme, y con la línea muy apretada para que
   dos líneas se lean como un bloque. */
.hero-titulo {
  display: block;
  position: relative;
  z-index: 1;
  margin-bottom: 13px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(34px, 9.5vw, 42px);
  letter-spacing: 0.02em;
  line-height: 0.88;
  color: var(--crema);
}

.hero-cuenta-label {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 7px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--crema-suave);
}

/* LA COMPETICIÓN DE LA TARJETA (regla de producto, punto 5, 4-sep-2026). Con dos señales a la
   vez —una jornada EN JUEGO y el DRAFT ABIERTO de la siguiente, de dos formatos distintos— cada
   tarjeta tiene que decir de qué habla, independiente de qué tema lleve el resto de la página:
   con formatos distintos el tema global se queda neutral (ver `[data-champions]` más abajo y
   `temaDeInicio` en el servidor), y aun así cada tarjeta se reconoce sola. */
.hero-competicion {
  display: block;
  position: relative;
  z-index: 1;
  margin-bottom: 3px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro-claro);
}

/* EL ACENTO DE CHAMPIONS, POR TARJETA, no por `<body>`. Mismo azul que ya usa
   `body.tema-champions .hero`/`.flip-cara` más abajo, pero aplicado con `data-champions="1"` —
   que manda `pintarBloques` en `inicio-ui.mjs`— para que la tarjeta de Champions se reconozca
   sola aunque el tema global de la página no haya podido decidirse por ninguna de las dos
   señales (regla de producto, punto 6).

   LITERALES, NO `var(--panel)`/`var(--negro)` A PROPÓSITO. Esas variables solo valen azul DENTRO
   de `body.tema-champions` (más abajo en este fichero); fuera de esa clase —que es EXACTAMENTE
   el caso que esta regla existe para cubrir, cuando el tema global se queda neutral— siguen
   siendo las del tema oscuro de siempre, y la tarjeta salía sin acento aunque `data-champions`
   dijera "1". Verificado a simple vista el 4-sep-2026 con Champions en juego + Superliga con el
   draft abierto: la tarjeta de Champions no llevaba el marco azul. Los valores son los mismos
   que `body.tema-champions` (`#041c4a`/`#122c72`), copiados aquí porque tienen que sobrevivir
   sin esa clase puesta. */
.hero[data-champions="1"] {
  background:
    radial-gradient(120% 120% at 5% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 58%),
    /* token-aparte: mismo valor que --panel en su variante azul, pero tiene que seguir azul SIN
       `body.tema-champions` puesto — es justo el caso (tema global neutral) que esta regla existe
       para cubrir. */
    linear-gradient(#122c72, #122c72),
    /* token-aparte: mismo motivo, para --negro. */
    #041c4a;
  border-color: rgba(255, 255, 255, 0.14);
}
.hero[data-champions="1"] .flip-cara {
  background: linear-gradient(180deg, #2c5bb8 0%, #17398c 100%);
  border-color: rgba(255, 255, 255, 0.18);
}

/* LA SEGUNDA TARJETA (regla de producto, punto 3, 4-sep-2026): misma anatomía que la primera,
   algo más pequeña porque acompaña en vez de protagonizar —igual que un botón "fantasma"
   acompaña a uno "principal"—. Con una sola señal real se queda `hidden` desde el HTML y no
   ocupa sitio (regla de producto, punto 9). */
.hero-secundario {
  margin-top: 12px;
  padding: 16px 16px 14px;
}
.hero-secundario .hero-titulo {
  font-size: clamp(24px, 7vw, 30px);
}
.hero-secundario .flip-cara {
  width: 64px;
  height: 40px;
}

/* ── LA OTRA CARA DEL HERO: TUS NÚMEROS ────────────────────────────────────────────────
   El hero lleva SIEMPRE dos cosas —el reloj y tus cifras— y lo que cambia con el ciclo es
   cuál va delante (decisión de Jepi, 12-ago-2026). Quién manda lo dice el servidor y llega
   en `data-manda`; aquí solo se le da tamaño a cada papel.

   Por eso esto se resuelve con UNA regla y su variante, y no ocultando nada: lo de detrás
   sigue viéndose, en voz baja. Un `hidden` aquí sería perder la mitad del hero. */
.hero-numeros {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--crema-suave);
}

/* Cuando mandan tus números: al frente, grandes, y el reloj se queda de fondo. */
.hero[data-manda="tus-numeros"] .hero-numeros {
  font-size: 30px;
  letter-spacing: 0.4px;
  color: var(--crema);
}

.hero[data-manda="tus-numeros"] .hero-reloj {
  opacity: 0.55;
  transform: scale(0.72);
  transform-origin: center top;
}

/* ── EL RELOJ DE TARJETAS ──────────────────────────────────────────────────────────── */
.hero-reloj {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.flip { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.flip-cara {
  width: 88px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: linear-gradient(180deg, #252525 0%, #101010 100%);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 38px;
  letter-spacing: 2px;
  line-height: 1;
  color: var(--crema);
  position: relative;
}

/* La línea de plegado por la mitad. Es lo que hace que parezca un reloj de tarjetas y no tres
   cajas con números. */
.flip-cara::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.62);
  pointer-events: none;
}

.flip-rotulo {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 7px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--crema-suave);
}

/* Los dos puntos entre tarjeta y tarjeta: los pivotes del reloj. */
.flip-sep {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 5px 20px;
  align-self: center;
}
.flip-sep::before,
.flip-sep::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

/* ── LOS BOTONES ───────────────────────────────────────────────────────────────────── */
.hero-botones { display: flex; gap: 8px; position: relative; z-index: 1; }

.hero-btn {
  flex: 1;
  display: block;
  padding: 11px 0;
  border-radius: 12px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.hero-btn-principal { background: var(--crema); color: var(--tinta); border: none; }
.hero-btn-principal:active { opacity: 0.85; }
.hero-btn-fantasma {
  background: transparent;
  color: var(--crema);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.hero-btn-fantasma:active { opacity: 0.7; }

.hero-pie {
  position: relative;
  z-index: 1;
  margin: 7px 0 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 7px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--crema-suave);
}

/* ── HERO EN AMENAZA: HAY ALGO QUE HACER Y SE ACABA ────────────────────────────────
   El tono NO es decoración, y NO se decide aquí: el servidor dice si hay amenaza y esta hoja
   decide que la amenaza se pinta en oro. Neutro es que no hay nada que hacer, solo esperar o
   mirar. Se distingue de un vistazo, sin leer.

   El rojo no se usa aquí ni cuando queda poco: en DIVIETO el rojo es semántica de juego
   (química nula, peligro), y gastarlo en un reloj lo desgasta donde sí significa algo. */
.hero[data-tono="amenaza"] .hero-titulo { color: var(--oro); }
.hero[data-tono="amenaza"] .flip-cara::after {
  background: color-mix(in srgb, var(--oro) 15%, transparent);
}
.hero[data-tono="amenaza"] .flip-sep::before,
.hero[data-tono="amenaza"] .flip-sep::after {
  background: color-mix(in srgb, var(--oro) 25%, transparent);
}
.hero[data-tono="amenaza"] .hero-btn-principal { background: var(--oro); color: var(--tinta); }
.hero[data-tono="amenaza"] .hero-btn-fantasma {
  color: var(--oro);
  border-color: color-mix(in srgb, var(--oro) 50%, transparent);
}

/* ── LOS MANIQUÍS ──────────────────────────────────────────────────────────────────
   Debajo del hero, y solo cuando no hay nada urgente. Quien decide cuáles salen es el
   servidor; aquí solo se les da forma. */
/* ── BLOQUE 1: LOS PARTIDOS, EN SCROLL HORIZONTAL ──────────────────────────────────────
   Como en el Mundial. La tira se sale del ancho a propósito: se ve media tarjeta cortada por
   el borde, que es lo que dice "esto sigue" sin necesidad de flechas ni de puntitos.

   Los márgenes negativos + el padding hacen que la tira empiece pegada al borde de la app y
   que la última tarjeta no quede lamiendo el canto. `scroll-snap` para que cada arrastre deje
   una tarjeta encuadrada en vez de a medias. */
.partidos { margin-top: 18px; }

.partidos-titulo {
  margin: 0 12px 8px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--crema-suave);
  text-transform: uppercase;
}

.partidos-tira {
  display: flex;
  gap: 8px;
  padding: 0 12px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sin esto, en móvil el gesto horizontal arrastra la página entera. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.partidos-tira::-webkit-scrollbar { display: none; }

/* UNA FILA POR PARTIDO: escudo, hora, escudo. Sin nombres (decisión de Jepi, 12-ago-2026).
   Los escudos ya dicen quién juega —son la marca de cada club— y el nombre solo añadía ruido en
   una tira que se lee de un vistazo. El nombre sigue en el `alt` y el `title` de cada escudo. */
.partido {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--panel);
}

.partido-cuando {
  font-family: "Bebas Neue", Impact, sans-serif; /* es un dato: día y hora */
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--oro);
  white-space: nowrap;
}

/* EL MARCADOR, una vez el partido ha empezado o terminado (Jepi, 1-sep-2026). Mismo hueco que
   ocupaba la hora: la ficha no cambia de tamaño según lo que le toque enseñar. */
.partido-marcador {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--crema);
  white-space: nowrap;
}
/* TERMINADO, más apagado: es historia, no algo que mirar ahora mismo. */
.partido-finished .partido-marcador { color: var(--crema-suave); }

/* EN JUEGO: el mismo lenguaje que ya usa el marcador de Jornada (punto verde, pulso discreto) —
   "esto se está moviendo", no una alarma. */
.partido-en-vivo { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.partido-en-vivo .partido-marcador { animation: partido-pulso 1.6s ease-in-out infinite; }
.partido-minuto {
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--oro-claro);
  white-space: nowrap;
}
.partido-minuto::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  margin-right: 3px;
  vertical-align: middle;
  animation: partido-punto 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .partido-en-vivo .partido-marcador,
  .partido-minuto::before { animation: none; }
}
@keyframes partido-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes partido-punto {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  50% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0); }
}

.partido-escudo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }

/* ── BLOQUE 2: LA CINTA BURSÁTIL ───────────────────────────────────────────────────────
   Los 20 que más se han movido, en cartas, con el indicador arriba a la derecha. Es una TIRA,
   no un bloque: se desliza igual que la de partidos y se lee de un vistazo. */
.cinta { margin-top: 20px; }

.cinta-titulo {
  margin: 0 12px 8px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--crema-suave);
  text-transform: uppercase;
}

.cinta-tira {
  display: flex;
  gap: 10px;
  padding: 0 12px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cinta-tira::-webkit-scrollbar { display: none; }

/* EL ANCHO DE LA CARTA LO PONE QUIEN LA COLOCA. `.carta` solo declara su proporción
   (aspect-ratio) y se deja medir por fuera: el campo del draft le da 65px y el selector 200px.
   Sin esta línea la carta colapsa a ancho cero y en la cinta solo se veían los indicadores
   flotando en fila, que es exactamente lo que pasó la primera vez. */
.cinta-carta { position: relative; flex: 0 0 auto; scroll-snap-align: start; width: 78px; }
.cinta-carta .carta { width: 78px; }

/* ARRIBA A LA DERECHA, en su propia pastilla — la misma forma que ya usa `.slot-puntos` en el
   campo (campo.css): fondo sólido, borde del color que toca, esquinas redondeadas. Antes era
   texto suelto con sombra sobre la carta, y contra un fondo claro de la carta se leía mal por
   mucho contraste que le echara la sombra: la pastilla no depende de lo que haya debajo. */
.cinta-indicador {
  position: absolute;
  /* PEGADA A LA ESQUINA DE VERDAD, no volando por fuera (Jepi, 1-sep-2026, dos veces: primero
     "en la curva de la esquina", luego "revisa bien la carta y su forma"). La carta NO es un
     rectángulo de esquina redondeada —esa lectura era de `.carta__racha-capsula`, una pieza
     interna sin relación— es un ESCUDO: la esquina superior derecha corta en diagonal hacia
     dentro, y bastante: medido a píxel contra `mini-oro-brillante.webp`, el lado derecho no
     llega a ser vertical hasta ~10,5% de la altura de la carta. Un desplazamiento negativo ahí
     deja la pastilla flotando en el hueco transparente que dibuja ese corte, sin nada debajo.
     `.carta__estado` —el aviso de lesión/duda, el otro indicador que ya cuelga de esta MISMA
     forma de carta— resuelve esto sin volar por fuera: `top:0; right:0`, pegado del todo.
     Mismo patrón aquí, ya probado contra esta silueta exacta. */
  top: 0;
  right: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0 3px;
  border-radius: 5px;
  background: var(--negro);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 10px;
  /* Bebas Neue solo tiene un peso real (400): 800 se sintetizaba grueso de más, y sin nada se
     quedaba demasiado fino (Jepi, 1-sep-2026, las dos veces). 600 es el punto intermedio: el
     navegador sigue sintetizando el grosor, pero menos agresivo. */
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.cinta-indicador.sube { color: var(--quimica-verde); border: 1px solid var(--quimica-verde); }
.cinta-indicador.baja { color: var(--quimica-rojo); border: 1px solid var(--quimica-rojo); }

/* SI LA CARTA YA LLEVA EL AVISO DE LESIÓN/DUDA, LA PASTILLA SE BAJA — no se pisan.
   Pasa de verdad: Gavi, jornada del 1-sep-2026, con duda Y overall movido a la vez. Las dos
   viven en la MISMA esquina a propósito (ver el comentario de arriba), así que cuando coinciden
   se apilan en vez de solaparse. 22px es la altura de `.carta__estado` en esta carta de 78px
   (24cqw ≈ 19px) más un hueco pequeño; se deja en píxeles, como el resto de `.cinta-indicador`,
   no en cqw como `.carta__estado` —son cajas de coordenadas distintas: esta pastilla es hija de
   `.cinta-carta`, no de `.carta`, aunque midan casi lo mismo. */
.cinta-carta:has(.carta__estado) .cinta-indicador { top: 22px; }

/* LA FLECHA ES UN TRIÁNGULO DIBUJADO, NO UN CARÁCTER. El glifo ↑/↓ se probó dos veces —de
   tamaño normal y ya encogido— y las dos se veía descentrado, porque cada fuente coloca ese
   carácter en un sitio distinto de su caja y ninguna alineación de texto puede corregir eso
   (Jepi, 1-sep-2026). Un triángulo es geometría, no tipografía: `align-items: center` en la
   pastilla lo centra de verdad contra el número, siempre. */
.cinta-indicador-flecha {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 2.5px solid transparent;
  border-right: 2.5px solid transparent;
  margin-right: 1px;
}
.cinta-indicador.sube .cinta-indicador-flecha { border-bottom: 4px solid var(--quimica-verde); }
.cinta-indicador.baja .cinta-indicador-flecha { border-top: 4px solid var(--quimica-rojo); }

.cinta-pie {
  margin: 8px 12px 0;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--crema-suave);
}

/* ── BLOQUE 3: ALERTAS FANTASY ─────────────────────────────────────────────────────────
   Qué está eligiendo la gente. Rejilla 2×2 como en el Mundial: son cuatro respuestas a cuatro
   preguntas distintas, y en columna se leerían como una lista —que es justo lo que el Inicio no
   debe ser—. */
.alertas { margin-top: 22px; }

.alertas-titulo {
  margin: 0 12px 10px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 4px;
  color: color-mix(in srgb, var(--oro) 70%, transparent);
  text-transform: uppercase;
}

.alertas-rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 12px;
}

/* La tarjeta ES un enlace a su apartado de Análisis. */
.alerta {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 10px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--panel);
  text-align: center;
}

/* La cabecera: la insignia de línea y el rótulo, en la misma fila. */
.alerta-cabecera { display: flex; align-items: center; justify-content: center; gap: 6px; }

.alerta-rotulo {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--crema-suave);
}

/* Alto fijo para que las cuatro tarjetas queden a la misma altura aunque una lleve carta, otra
   un escudo y otra solo texto. Sin esto la rejilla queda dentada. */
.alerta-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  margin: 2px 0;
}
.alerta-visual .carta { width: 50px; }
.alerta-escudo { max-width: 52px; max-height: 52px; object-fit: contain; }

/* La bandera va con marco: son 4x3 y sobre negro, sin borde, las de fondo claro se derraman y
   las oscuras desaparecen. El borde las convierte en un objeto con forma. */
.alerta-bandera {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border: 1px solid var(--borde);
  border-radius: 4px;
}
.alerta-simbolo {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--oro-claro);
}

.alerta-nombre {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--crema);
}

.alerta-dato { font-size: 11px; line-height: 1.35; color: var(--crema-suave); }

.alertas-pie {
  margin: 10px 12px 0;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--crema-suave);
}

.maniquis { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.maniqui {
  margin: 0 16px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--panel);
}

.maniqui-rotulo {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 22px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--crema);
}

.maniqui-texto {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--crema-suave);
}

/* La acción discreta: para lo que se puede mirar, no para lo que hay que hacer. Si todo fuera
   un botón grande, ninguno significaría nada. */
.maniqui-accion {
  display: inline-block;
  margin-top: 12px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--oro);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--oro) 40%, transparent);
}

/* Lo secundario: está, pero no compite. */
.maniqui.menor { padding: 12px 16px; }
.maniqui.menor .maniqui-rotulo { font-size: 16px; color: var(--crema-suave); }