/* 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 el `pintar()` de la tarjeta 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);
}

/* ── 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);
}

/* ── TU JORNADA EN DIRECTO ─────────────────────────────────────────────────────────
   Tira baja y rectangular, debajo del hero: tus puntos y tu quiniela, en dos celdas. Plana
   (`var(--panel)`, como `.partido`/`.alerta`) a propósito — el hero ya es la pieza con volumen
   de la pantalla, y esta tira es un dato de un vistazo, no una segunda tarjeta compitiendo por
   la atención.

   EL ACENTO DE CHAMPIONS, IGUAL QUE EN EL HERO (ver el comentario de `.hero[data-champions="1"]`
   más arriba): por bloque, con literales que sobreviven sin `body.tema-champions` puesto, para
   cuando el tema global se queda neutral con dos señales de formatos distintos a la vez. */
/* ── EL TORNEO DE DIVIETO: la tarjeta de inscripción ─────────────────────────────── */
.torneo-inscripcion {
  margin: 12px 16px 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--oro) 35%, transparent);
  border-radius: 16px;
  background: var(--panel);
  text-align: center;
}
/* La tarjeta "con gancho" (Jepi, 1-oct-2026). */
.torneo-inscripcion-titulo {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 24px;
  letter-spacing: 1.5px;
  color: var(--oro-claro);
}
.torneo-inscripcion-lema { font-size: 13px; color: var(--crema-suave); }
.torneo-inscripcion-plazas { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.torneo-inscripcion-barra {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--borde);
  overflow: hidden;
}
.torneo-inscripcion-relleno {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--oro), var(--oro-claro));
  transition: width 0.4s ease;
}
.torneo-inscripcion-cuenta { font-size: 13px; font-weight: 700; color: var(--crema); font-variant-numeric: tabular-nums; white-space: nowrap; }
.torneo-inscripcion-cierre { margin: 0; font-size: 13px; color: var(--crema-suave); font-variant-numeric: tabular-nums; }
.torneo-inscripcion-boton { margin-top: 8px; text-transform: uppercase; letter-spacing: 1px; }
.torneo-inscripcion-botones { display: flex; flex-direction: column; gap: 6px; }

/* CON CARTEL (Jepi, 4-oct-2026): el cartel arriba, de borde a borde, y debajo una franja negra que lo
   continúa —con la cinta amarilla y negra del precinto como costura— con la barra, el cierre y los
   dos botones EN PARALELO: INSCRIBIRSE en el amarillo de la cinta, INFORMACIÓN en gris. */
.torneo-inscripcion.con-cartel {
  padding: 0 0 14px;
  gap: 8px;
  overflow: hidden;
  background: #050505;
  border-color: color-mix(in srgb, #f5c518 55%, transparent);
}
.torneo-inscripcion-banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 480;
  object-fit: cover;
}
.con-cartel .torneo-inscripcion-banner {
  /* La costura: la cinta del precinto entre el cartel y los botones. */
  border-bottom: 5px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #f5c518 0 10px, var(--tinta) 10px 20px) 5;
}
.con-cartel .torneo-inscripcion-plazas,
.con-cartel .torneo-inscripcion-cierre,
.con-cartel .torneo-inscripcion-botones,
.con-cartel .aviso-box { margin-left: 14px; margin-right: 14px; }
.con-cartel .torneo-inscripcion-plazas { margin-top: 4px; }
.con-cartel .torneo-inscripcion-relleno { background: #f5c518; }
.con-cartel .torneo-inscripcion-botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.con-cartel .torneo-inscripcion-boton,
.con-cartel .torneo-inscripcion-info,
.con-cartel .torneo-inscripcion-dentro {
  margin: 0;
  min-height: 46px;
  border-radius: 10px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 19px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.con-cartel .torneo-inscripcion-boton {
  background: #f5c518;
  color: var(--tinta);
  border: none;
  box-shadow: 0 0 18px color-mix(in srgb, #f5c518 35%, transparent);
}
/* INFORMACIÓN en gris (Jepi, 4-oct-2026): el amarillo es solo para INSCRIBIRSE. */
.con-cartel .torneo-inscripcion-info {
  align-self: stretch;
  padding: 0 10px;
  border: 1.5px solid var(--crema-tenue);
  color: var(--crema-suave);
}
/* Ya inscrito: el sitio del botón lo ocupa el aviso, del mismo tamaño para que nada baile. */
.con-cartel .torneo-inscripcion-dentro {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1.5px solid color-mix(in srgb, #f5c518 45%, transparent);
  font-size: 16px;
  letter-spacing: 1.5px;
  line-height: 1.1;
}

.torneo-inscripcion-dentro { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--oro); font-weight: 600; }
/* INFORMACIÓN, con la misma tipografía que APUNTARME (Jepi, 1-oct-2026); menos peso visual. */
.torneo-inscripcion-info {
  margin-top: 4px;
  align-self: center;
  padding: 7px 18px;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--crema-suave);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 17px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
}
.torneo-inscripcion-info:focus-visible,
.torneo-info-cerrar:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* La ventana INFORMACIÓN, CENTRADA en la pantalla y con su propio scroll (Jepi, 1-oct-2026): la
   caja nunca es más alta que lo que se ve (dvh descuenta las barras del navegador del móvil), y lo
   que no cabe se desplaza dentro de ella sin arrastrar la página de detrás. */
.torneo-info {
  position: fixed;
  inset: 0;
  z-index: 500;
  padding: 16px;
  background: color-mix(in srgb, var(--negro) 82%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  overscroll-behavior: contain;
}
.torneo-info-caja {
  width: 100%;
  max-width: 430px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 14px 16px 22px;
  text-align: left;
}
.torneo-info-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.torneo-info-titulo { font-family: "Bebas Neue", Impact, sans-serif; font-size: 22px; letter-spacing: 1.5px; color: var(--oro-claro); }
.torneo-info-cerrar { background: none; border: none; color: var(--crema-suave); font-size: 20px; cursor: pointer; padding: 0 0 0 12px; }
.torneo-info-premio {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--oro) 35%, transparent);
  border-radius: 10px;
  color: var(--crema);
  font-weight: 600;
}
.torneo-info-sub { margin: 14px 0 6px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--oro); }
.torneo-info-rondas, .torneo-info-reglas { margin: 0; padding: 0; list-style: none; }
.torneo-info-ronda {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 13px;
  color: var(--crema);
}
.torneo-info-fecha, .torneo-info-competicion { color: var(--crema-suave); }
.torneo-info-final .torneo-info-nombre { color: var(--oro-claro); font-weight: 700; }
.torneo-info-regla {
  position: relative;
  padding: 6px 0 6px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--crema);
}
.torneo-info-regla::before { content: "·"; position: absolute; left: 2px; color: var(--oro); }
.torneo-info-entendido { width: 100%; margin-top: 14px; }

.tu-jornada {
  margin: 12px 16px 0;
  display: flex;
  border: 1px solid var(--borde);
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
}
.tu-jornada-celda {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 13px 10px;
}
.tu-jornada-celda + .tu-jornada-celda { border-left: 1px solid var(--borde); }

.tu-jornada-cifra {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 24px;
  letter-spacing: 0.5px;
  line-height: 1;
  color: var(--crema);
}
/* LA SEGUNDA LÍNEA DE CADA CELDA (diseño cerrado con Jepi, 9-sep-2026): un DATO ("5º", "de 10"),
   no una etiqueta fija, así que va sin mayúsculas forzadas ni el espaciado de letra de un rótulo.
   Sigue en `crema-suave`: es información de apoyo, la cifra grande de arriba es la que manda. */
.tu-jornada-detalle {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--crema-suave);
}

.tu-jornada[data-champions="1"] {
  /* token-aparte: mismo valor que `--panel` en su variante azul, literal por el mismo motivo que en el hero:
     tiene que seguir azul sin `body.tema-champions` puesto. */
  background: #122c72;
  border-color: rgba(255, 255, 255, 0.14);
}
.tu-jornada[data-champions="1"] .tu-jornada-celda + .tu-jornada-celda {
  border-left-color: rgba(255, 255, 255, 0.18);
}

/* ── 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);
}

/* ── LA LIGA GENERAL EN PEQUEÑO (Jepi, 1-oct-2026) ──────────────────────────────────────
   El primero y tu entorno, con los mismos datos que la pantalla de Liga. Sustituye a los
   maniquís "Tus ligas" y "La jornada". */
.general-inicio {
  margin: 14px 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--panel);
}
.general-inicio-titulo {
  margin: 0 0 8px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--crema-suave);
  text-transform: uppercase;
}
.general-inicio-filas { list-style: none; margin: 0; padding: 0; }
.general-fila {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--borde);
  font-size: 14px;
  color: var(--crema);
}
.general-fila:first-child { border-top: none; }
/* Entre el primero y tu entorno hay gente: se dice con tres puntos, sin enseñarla. */
.general-fila.tras-hueco { border-top: none; position: relative; margin-top: 14px; }
.general-fila.tras-hueco::before {
  content: "···";
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--crema-suave);
  letter-spacing: 4px;
}
.general-puesto { font-family: "Bebas Neue", Impact, sans-serif; font-size: 18px; color: var(--crema-suave); }
.general-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.general-puntos { font-variant-numeric: tabular-nums; color: var(--crema-suave); }
.general-fila.es-tu .general-puesto,
.general-fila.es-tu .general-nombre,
.general-fila.es-tu .general-puntos { color: var(--oro); font-weight: 600; }
.general-inicio-ver {
  display: inline-block;
  margin-top: 10px;
  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);
}