/* MatchDial — hoja de estilos única, sin dependencias.

   La tipografía (Space Grotesk, licencia OFL) está alojada en el propio
   proyecto, no servida desde Google. Cargarla desde fonts.gstatic.com
   enviaría la IP de cada visitante a Google, algo que ya se ha declarado
   incompatible con el RGPD. Son 40 KB en total. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  /* Nombres como Beşiktaş o Śląsk caen fuera del latin básico. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hoja de estilos única, sin dependencias.
   Paleta en variables: el tema claro vive en :root y el oscuro solo redefine
   los tokens, para que no haya ningún color definido en un único sitio. */

:root {
  --bg: #e8ebee;
  --surface: #f4f6f8;
  --surface-2: #d9dee4;
  /* Las tarjetas de partido se quedan en blanco puro a propósito: destacan
     sobre el fondo teñido y es donde se lee el dato que importa. */
  --card: #ffffff;
  --border: #c8cfd7;
  --border-strong: #a7b2bf;
  --text: #111820;
  --text-soft: #5a6472;
  /* Estos dos tonos se midieron contra los tres fondos del modo claro
     (tarjeta #ffffff, barra #f4f6f8 y cuerpo #e8ebee). Los anteriores
     —#87919f y #06b6d4— se quedaban entre 2,03 y 3,19 frente al 4,5
     que exige la WCAG AA; ahora el peor caso es 4,71 y 5,08. Si se
     aclaran, vuelven a incumplir: el fondo gris del cuerpo es el que
     manda. El modo oscuro ya cumplía (4,76 y 11,48) y no se toca. */
  --text-faint: #5f6876;
  --accent: #0f172a;
  --accent-2: #0c6b85;
  --accent-soft: #d7e9ee;
  --accent-grad: linear-gradient(100deg, #0f172a 0%, #164e63 55%, #06b6d4 100%);

  --free: #0b7a4b;
  --free-bg: #d9f3e6;
  --free-border: #93dcbb;
  --freemium: #8a5800;
  --freemium-bg: #fdf1dc;
  --freemium-border: #ecd3a0;
  --paid: #55606e;
  --paid-bg: #eceff2;
  --paid-border: #ccd3da;
  --warn: #9a3412;
  --warn-bg: #fdeee7;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06);
  --shadow-lift: 0 6px 22px rgba(6, 182, 212, .22);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: 'Space Grotesk', var(--sans);
}



/* Cabecera: franja con el degradado de marca. Al ser oscura, el nombre va en
   blanco (el degradado del acento empieza en casi negro y la mitad del texto
   desaparecería) y las pastillas de idioma pasan a blanco translúcido. */
:root {
  --day-on: #0e7490;
  /* Oscuro de punta a punta. El gradiente anterior terminaba en cian claro
     (#0891b2) y ahi el nombre caia a 3,68:1 y el lema a 2,62:1, con el
     selector de idioma encima. Si se vuelve a aclarar el extremo, hay que
     medir el punto mas claro, que es el que manda. */
  --header-bg: linear-gradient(110deg, #0a1b26 0%, #0f3d4d 50%, #14556a 100%);
  --header-sub: rgba(255, 255, 255, .72);
  --header-chip: rgba(255, 255, 255, .12);
  --header-chip-border: rgba(255, 255, 255, .2);
  --header-chip-on: rgba(255, 255, 255, .24);
  --brand-grad: linear-gradient(100deg, #ffffff 0%, #ffffff 100%);
}

/* El logo lleva por dentro el mismo degradado oscuro que la cabecera, así que
   necesita algo que lo despegue. Un halo difuso lo consigue sin la línea dura
   de un borde: una insinuación de contorno más un resplandor suave. */
:root {
  --brand-mark-shadow:
    0 0 0 1px rgba(255, 255, 255, .22),
    0 0 10px rgba(255, 255, 255, .22);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Modo oscuro ----------

   Va DOS VECES a propósito. La media query atiende al ajuste del sistema,
   que es lo que usa el visitante; el atributo, a ?tema=oscuro, que sirve para
   revisar el diseño sin tocar los ajustes del ordenador. CSS no deja combinar
   las dos condiciones en un solo bloque, así que las dos copias tienen que
   decir lo mismo: validate.py lo comprueba y falla si se separan.

   Los selectores llevan :root delante para ganar por especificidad y no por
   orden: así este bloque vive aquí arriba aunque .site-header se defina más
   abajo con border-bottom: 0. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --bg: #0d1117;
    --surface: #151a21;
    --surface-2: #1c222b;
    /* En oscuro la tarjeta no puede ser blanca; se separa del fondo
       aclarándola, para conservar el mismo contraste relativo. */
    --card: #1c222b;
    --border: #28303a;
    --border-strong: #3a434f;
    --text: #e9edf2;
    --text-soft: #a5aeba;
    --text-faint: #848d99;
    --accent: #4fd8ef;
    --accent-2: #8ae9f7;
    --accent-soft: #10303a;
    --accent-grad: linear-gradient(100deg, #164e63 0%, #4fd8ef 55%, #8ae9f7 100%);

    --free: #58e0a3;
    --free-bg: #0f3a2a;
    --free-border: #2f7d5a;
    --freemium: #e8bd6d;
    --freemium-bg: #33280f;
    --freemium-border: #6b5424;
    --paid: #aeb7c2;
    --paid-bg: #1e242d;
    --paid-border: #2f3845;
    --warn: #f0a68a;
    --warn-bg: #3a2018;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lift: 0 6px 22px rgba(0, 0, 0, .5);
  }

  :root:not([data-theme="claro"]) .site-header { border-bottom: 1px solid #39485a; }
  :root:not([data-theme="claro"]) .sport-chip[aria-pressed="true"] { color: #0b1016; }
  :root:not([data-theme="claro"]) .sport-chip[aria-pressed="true"] .sport-icon { filter: brightness(0); }
}

/* La copia para ?tema=oscuro. Misma lista, misma letra. */
:root[data-theme="oscuro"] {
  --bg: #0d1117;
  --surface: #151a21;
  --surface-2: #1c222b;
  /* En oscuro la tarjeta no puede ser blanca; se separa del fondo
     aclarándola, para conservar el mismo contraste relativo. */
  --card: #1c222b;
  --border: #28303a;
  --border-strong: #3a434f;
  --text: #e9edf2;
  --text-soft: #a5aeba;
  --text-faint: #848d99;
  --accent: #4fd8ef;
  --accent-2: #8ae9f7;
  --accent-soft: #10303a;
  --accent-grad: linear-gradient(100deg, #164e63 0%, #4fd8ef 55%, #8ae9f7 100%);

  --free: #58e0a3;
  --free-bg: #0f3a2a;
  --free-border: #2f7d5a;
  --freemium: #e8bd6d;
  --freemium-bg: #33280f;
  --freemium-border: #6b5424;
  --paid: #aeb7c2;
  --paid-bg: #1e242d;
  --paid-border: #2f3845;
  --warn: #f0a68a;
  --warn-bg: #3a2018;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lift: 0 6px 22px rgba(0, 0, 0, .5);
}

:root[data-theme="oscuro"] .site-header { border-bottom: 1px solid #39485a; }
:root[data-theme="oscuro"] .sport-chip[aria-pressed="true"] { color: #0b1016; }
:root[data-theme="oscuro"] .sport-chip[aria-pressed="true"] .sport-icon { filter: brightness(0); }

/* ---------- Cabecera ---------- */

.site-header {
  background: var(--header-bg);
  border-bottom: 0;
  position: relative;
  font-family: var(--display);
}
/* En claro la cabecera destaca sola contra el cuerpo gris. En oscuro arranca en
   #0a1b26 y la barra de controles es #151a21: 1,00:1, el mismo color, y los dos
   bloques se leen como una sola mancha. Un filo la delimita sin tocar el
   gradiente, que es lo que mantiene el texto por encima de 5:1. Tiene que ir
   DESPUÉS de la regla de arriba o el "border-bottom: 0" lo anula. */
/* Sin filo de color: la propia franja oscura ya separa cabecera y página. */

.header-inner {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding-top: 22px; padding-bottom: 20px;
}

.brand {
  display: flex; gap: 13px; align-items: center;
  text-decoration: none; color: inherit; border-radius: 14px;
}
.brand:hover .brand-name { filter: brightness(1.12); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.04); }
.brand:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }

.brand-mark {
  flex: 0 0 auto; width: 48px; height: 48px; display: block;
  border-radius: 27%;
  box-shadow: var(--brand-mark-shadow);
  transition: transform .18s ease;
}
.brand-text { display: block; min-width: 0; }
.brand-name {
  margin: 0; font-size: 29px; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.05;
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.brand-sub {
  display: block; margin: 2px 0 0;
  color: var(--header-sub); font-size: 13.5px;
}

/* En las paginas generadas la marca es secundaria: el h1 lo ocupa el titulo
   de la pagina ("Donde ver X en Y"), no el nombre del sitio. */
.brand-compact .brand-mark { width: 40px; height: 40px; }
.brand-compact .brand-name { font-size: 21px; }

@media (prefers-reduced-motion: reduce) {
  .brand-mark { transition: none; }
  .brand:hover .brand-mark { transform: none; }
}

/* Selector de idioma: banderas, no nombres. */
.lang-switch {
  display: flex; gap: 4px; padding: 4px;
  background: var(--header-chip); border: 1px solid var(--header-chip-border);
  border-radius: 999px;
}
.lang-flag {
  line-height: 1; cursor: pointer;
  width: 38px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; opacity: .5;
  transition: opacity .15s, background .15s;
}
.lang-flag img {
  display: block; width: 24px; height: 16px; border-radius: 2px;
  /* Un filo tenue para que el blanco de las banderas no se funda con la
     cabecera clara ni se recorte contra la oscura. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.lang-flag:hover { opacity: .72; }
/* En la aplicación son botones con aria-pressed; en las páginas generadas no
   hay JavaScript y son enlaces a la otra versión, que marcan la activa con
   aria-current. Mismo aspecto en los dos sitios. */
.lang-flag[aria-pressed="true"],
.lang-flag[aria-current="true"] {
  opacity: .85; background: var(--header-chip-on);
  border-color: var(--header-chip-border); box-shadow: var(--shadow);
}

.coverage-hint { flex: 1 0 100%; }
.coverage-hint { margin: 9px 0 0; font-size: 12px; color: var(--text-faint); }
.coverage-hint[hidden] { display: none; }
.coverage-hint[data-level="sparse"] { color: var(--warn); }

/* ---------- Controles ---------- */

.controls {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}

.days {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin;
  /* overflow-x: auto recorta también en vertical: sin este relleno, el salto
     del ratón y la sombra del día activo salen cortados. */
  padding: 4px 0 6px;
}

.day-tab {
  flex: 0 0 auto; cursor: pointer; font: inherit;
  padding: 6px 13px; border-radius: 999px;
  transition: transform .12s;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-soft);
  /* El recuento va al lado del día, no debajo: apilados, la pestaña medía 48px
     y la barra fija ocupaba demasiado al desplazar. */
  display: flex; align-items: baseline; gap: 6px; line-height: 1.25;
}
.day-tab strong { font-size: 13px; color: var(--text); font-weight: 600; }
.day-tab span { font-size: 11px; }
/* El recuento corto solo entra en móvil; aquí sobra. */
.day-tab .day-count-short { display: none; }
.day-tab[aria-selected="true"] {
  background: var(--day-on); border-color: var(--day-on); color: #fff;
}
.day-tab[aria-selected="true"] strong { color: #fff; }
.day-tab:not([aria-selected="true"]):hover { transform: translateY(-1px); }
.day-tab[data-empty="true"]:not([aria-selected="true"]) { opacity: .4; }

.filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 11px; }
.search-wrap { flex: 0 1 230px; min-width: 150px; }
.search-wrap input {
  width: 100%; font: inherit; font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}

.toggle { display: flex; gap: 7px; align-items: center; font-size: 13px; cursor: pointer; white-space: nowrap; }

.country-pick { display: flex; gap: 7px; align-items: center; margin-left: auto; }
.country-pick label {
  font-size: 11px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.country-flag { display: flex; align-items: center; }
.country-flag img {
  display: block; width: 22px; height: 15px; border-radius: 2px;
  /* Filo tenue: las banderas con blanco se funden con el fondo claro. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

.country-pick select {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  cursor: pointer;
}
.country-pick select:hover { border-color: var(--accent-2); }
.toggle input { width: 16px; height: 16px; accent-color: var(--free); }

.ghost-btn {
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 7px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
}
.ghost-btn:hover { background: var(--surface-2); }

.count-badge {
  display: inline-block; margin-left: 4px; padding: 1px 6px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700;
}

.sports-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: flex-start; justify-content: space-between; margin-top: 10px;
}
.sports { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.sport-chip {
  font: inherit; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft);
}
.sport-chip .sport-icon { flex: 0 0 auto; display: block; width: 13px; height: 13px; }
.sports-more {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 4px 4px; border: 0; background: none;
  color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px;
}
.sports-more:hover { color: var(--accent); }

.sport-chip[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700;
}
/* El icono va en <img>, que no hereda color: sobre el chip marcado se queda
   gris oscuro y desaparece. El filtro lo lleva al color del texto. */
.sport-chip[aria-pressed="true"] .sport-icon { filter: brightness(0) invert(1); }

/* En oscuro el acento es cian claro: el blanco encima daba 1,69:1, por debajo
   del 4,5:1 exigible. Con tinta oscura sube a 11,3:1, y el icono la acompaña
   sin invertir. */

/* ---------- Panel de competiciones ---------- */

.panel {
  margin-top: 12px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.panel-actions { display: flex; gap: 6px; align-items: center; }

.panel-close {
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 7px 4px; margin-left: auto;
  border: 0; background: none; color: var(--text-soft);
}
.panel-close:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

/* El desplazamiento vive en el envoltorio: si se limita la altura del propio
   bloque multicolumna, las columnas sobrantes se van hacia el lado en vez de
   hacia abajo. */
.competition-scroll { margin-top: 12px; max-height: 46vh; overflow-y: auto; }

.competition-groups {
  column-width: 220px;
  column-gap: 28px;
}
/* Los grupos SÍ pueden partirse entre columnas. Si se les prohíbe, el bloque
   de Fútbol (43 competiciones, más de 2000px) obliga a que todas las columnas
   midan lo mismo que él y el reparto se arruina. Partiéndose, cada columna se
   llena hasta arriba y la siguiente empieza justo donde acaba la anterior. */
.competition-group { margin-bottom: 16px; }

/* Lo que no debe partirse nunca: una casilla por la mitad, ni un título
   suelto al pie de una columna sin nada debajo. */
.competition-group label {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}
.competition-group h3 {
  -webkit-column-break-after: avoid;
  break-after: avoid;
}
.competition-group h3 {
  margin: 0 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-faint);
}
.competition-group label {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 13px; padding: 2px 0; cursor: pointer;
}
.competition-group input { margin-top: 3px; accent-color: var(--accent); }

/* ---------- Estado de carga ---------- */

.status {
  display: flex; gap: 9px; align-items: center;
  margin: 18px 0; font-size: 13px; color: var(--text-soft);
}
.status[hidden] { display: none; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* ---------- Resultados ---------- */

.day-block { margin: 22px 0 28px; }
/* Con anuncio de cabecera encima, el margen se reduce porque el propio
   anuncio ya aporta el suyo: sin esto suman 38px y el titular queda a la
   deriva. Sin anuncio manda el margen normal del bloque. */
.con-anuncio-top .day-block:first-child { margin-top: 8px; }
.day-heading {
  display: flex; gap: 9px; align-items: baseline;
  margin: 0 0 11px; padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.day-heading h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.day-heading h2::first-letter { text-transform: uppercase; }
.day-heading .n { font-size: 12px; color: var(--text-faint); }

.event {
  display: grid;
  /* El bloque "cómo verlo" cede ancho al nombre del partido: con 300px se
     partían en dos líneas 6 de los 16 títulos de un día normal; con 240, uno. */
  grid-template-columns: 74px minmax(0, 1fr) minmax(0, 240px);
  gap: 14px; align-items: start;
  padding: 15px 16px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: box-shadow .15s, transform .15s;
}
.event:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.event[data-state="in"] { border-left: 4px solid var(--free); }
.event[data-state="post"] { opacity: .62; }

.event-time { font-variant-numeric: tabular-nums; }
.event-time .hm { font-size: 18px; font-weight: 800; letter-spacing: -.025em; }
.event-time .live {
  display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  color: var(--free); background: var(--free-bg);
  border: 1px solid var(--free-border); border-radius: 4px; padding: 0 4px;
}
.event-time .done { font-size: 11px; color: var(--text-faint); }

.event-meta { min-width: 0; }
.event-league {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: .05em;
}
.event-league .sport-tag { color: var(--text-faint); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Ancho fijo aunque no haya bandera: así el nombre de la competición empieza
   siempre en la misma columna, tenga icono o no. Alto igual al cuerpo de la
   línea (11px), y el ancho sale de la proporción 3:2 de los archivos. */
.comp-home {
  flex: 0 0 auto; width: 16.5px; height: 11px;
  display: flex; align-items: center; justify-content: center;
}
.comp-home .comp-flag {
  display: block; width: 16.5px; height: 11px; border-radius: 1.5px;
  /* Filo tenue: las banderas con blanco se funden con el fondo de la tarjeta. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

.event-league .sport-icon { flex: 0 0 auto; display: block; width: 14px; height: 14px; }
.event-title { margin: 4px 0 0; font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.event-title .vs { color: var(--text-faint); font-weight: 400; margin: 0 5px; }
.event-sub { margin: 3px 0 0; font-size: 12px; color: var(--text-faint); }

/* ---------- Bloque de retransmisión ---------- */

.watch { min-width: 0; }
.watch-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint); margin-bottom: 5px;
}
.watch-list { display: flex; flex-direction: column; gap: 5px; }

.option {
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
  padding: 6px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--paid-border); background: var(--paid-bg);
  font-size: 13px; text-decoration: none; color: var(--text);
}
a.option:hover { border-color: var(--border-strong); }
.option[data-access="free"] { background: var(--free-bg); border-color: var(--free-border); }
.option[data-access="freemium"] { background: var(--freemium-bg); border-color: var(--freemium-border); }

.option-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.option-tag {
  margin-left: auto; flex: 0 0 auto;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--paid);
}
.option[data-access="free"] .option-tag { color: var(--free); }
.option[data-access="freemium"] .option-tag { color: var(--freemium); }
.option-note { display: block; width: 100%; font-size: 11px; color: var(--text-soft); font-weight: 400; }

.watch-empty {
  font-size: 12px; color: var(--warn);
  background: var(--warn-bg); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); padding: 7px 9px;
}
.option[data-confidence="low"] .option-name::after {
  content: '?'; margin-left: 3px; font-size: 10px; vertical-align: super;
  color: var(--warn); font-weight: 700;
}

/* ---------- Páginas estáticas generadas (tools/pages.py) ---------- */

.crumbs {
  padding-top: 12px; padding-bottom: 12px;
  font-size: 12px; color: var(--text-faint);
  border-bottom: 1px solid var(--border);
}
.crumbs a { color: var(--text-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

.static-page { padding-top: 22px; padding-bottom: 32px; max-width: 760px; }
.static-page h1 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; letter-spacing: -.015em; }
.static-page h2 {
  margin: 26px 0 10px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint);
}
.static-page .lead { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: var(--text-soft); }

/* Las preguntas no son epígrafes de sección: van en caja alta y tamaño de
   lectura, no en versalitas como el resto de h2 de estas páginas. */
.static-page .faq-q {
  margin: 24px 0 6px; font-size: 16px; font-weight: 700;
  text-transform: none; letter-spacing: -.01em; color: var(--text);
}
.static-page .faq-q + p { margin: 0; max-width: 72ch; }
.static-page .when { margin: 0; font-size: 16px; font-weight: 600; }
.static-page .muted { color: var(--text-soft); font-size: 14px; }
.static-page .tz-note { margin: 10px 0 0; font-size: 12px; color: var(--text-faint); }
.static-page .watch-list { max-width: 520px; }

/* Textos legales: párrafos largos y listas de puntos. */
.static-page .legal-list {
  margin: 0 0 2px; padding-left: 20px; max-width: 72ch;
  font-size: 14px; line-height: 1.6; color: var(--text-soft);
}
.static-page .legal-list li { margin: 3px 0; }
/* Los huecos por rellenar van marcados: deben cantar antes de publicar. */
.static-page mark.hueco { background: var(--warn-bg); color: var(--warn); padding: 0 3px; }

/* Los párrafos de las páginas fijas, a medida de lectura. */
.static-page h2 + p { margin: 0 0 2px; max-width: 72ch; line-height: 1.6; }
.api-figures {
  margin: 10px 0 0; padding: 10px 12px; font-size: 13.5px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  color: var(--text-soft);
}

/* ---------- Formularios de las páginas fijas ----------

   HTML puro, sin JavaScript: estas páginas no cargan la aplicación. */
.form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 18px; margin-top: 14px; max-width: 620px;
}
.form-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.form-field > span { font-weight: 600; color: var(--text-soft); }
.form-field em { font-style: normal; font-weight: 400; color: var(--text-faint); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.form-field textarea { resize: vertical; min-height: 96px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--accent-2); outline-offset: 1px; border-color: transparent;
}
/* Ocupa toda la fila, haya una o dos columnas. */
.form-wide { grid-column: 1 / -1; }

.form-consent {
  grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; line-height: 1.45; color: var(--text-soft);
}
.form-consent input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }
.form-consent a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.form-consent a:hover { color: var(--accent); }

.form-actions { grid-column: 1 / -1; }
.form-send {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 10px 20px; border: 0; border-radius: 999px;
  background: var(--accent-grad); color: #fff;
}
.form-send:hover:not(:disabled) { filter: brightness(1.08); }

.form-feedback {
  grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.5;
}
.form-feedback[data-tone="error"] { color: var(--warn); }
.form-feedback[data-tone="ok"] { color: var(--free); font-weight: 500; }

/* En las páginas fijas no hay agenda que mirar: el regreso es un enlace de
   texto, no un botón que compita con el formulario. */
.back-link { margin: 30px 0 0; font-size: 14px; }
.back-link a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.back-link a:hover { color: var(--accent); }

.event-list, .link-list { list-style: none; margin: 0; padding: 0; }

.event-list li { border-bottom: 1px solid var(--border); }
.event-list a {
  display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline;
  padding: 11px 2px; text-decoration: none; color: var(--text);
}
.event-list a:hover { background: var(--surface-2); }
.event-list strong { font-size: 15px; font-weight: 600; }
.event-list span { font-size: 13px; color: var(--text-soft); }

.link-list li { padding: 2px 0; }
.link-list a { font-size: 14px; color: var(--accent); text-decoration: none; }
.link-list a:hover { text-decoration: underline; }
.link-list.cols { columns: 2; column-gap: 28px; }

.back-to-app { margin: 30px 0 0; }
.back-to-app a { display: inline-block; text-decoration: none; }

@media (max-width: 560px) {
  .static-page h1 { font-size: 20px; }
  .link-list.cols { columns: 1; }
}

/* ---------- Publicidad ---------- */

/* Los huecos reservan altura antes de que cargue el anuncio: si no, la página
   pega un salto al aparecer y eso penaliza (es el CLS que mide Google). */
.ad-slot {
  display: block; margin: 16px 0; overflow: hidden;
  text-align: center;
}
.ad-slot[data-kind="inFeed"] { margin: 12px 0; }

/* ---------- Columna lateral ----------

   Una sola columna por defecto: el lateral solo aparece cuando sobra ancho de
   verdad. El <aside> se queda vacío por debajo de 1100px —no se pinta nada
   dentro— así que no hay nada que ocultar. */
.layout { display: block; }
.ad-rail { display: none; }

@media (min-width: 1100px) {
  /* Dos columnas SOLO si ui.js ha pintado el anuncio lateral. Con la
     publicidad apagada no hay nada que poner ahí y la lista usa todo el ancho. */
  .layout.con-lateral {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px;
    /* Sin "align-items: start": con esa alineación el <aside> se encoge a la
       altura del anuncio y el sticky de dentro se queda sin recorrido por el
       que acompañar al desplazamiento. Estirado, recorre toda la lista. */
  }
  .con-lateral .ad-rail { display: block; }
  .con-lateral .ad-rail .ad-slot {
    /* Acompaña el desplazamiento. El desplazamiento vertical se detiene a la
       altura de la barra de controles, que es fija y mide 156px: sin ese
       margen el anuncio se metería debajo. */
    position: sticky; top: 172px; margin: 0;
  }
  .con-lateral .ad-rail .ad-slot[data-preview],
  .con-lateral .ad-rail .ad-slot[data-placeholder] { min-height: 600px; }
}

/* Solo en ?ads=preview: caja marcada para ver dónde caerían. */
.ad-slot[data-preview] {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text-faint);
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
}

/* Hueco reservado mientras no hay anuncio contratado: deja ver la maqueta
   real sin cargar nada de Google. */
.ad-slot[data-placeholder] {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border); border-radius: var(--radius);
  background: repeating-linear-gradient(
    135deg, var(--surface-2), var(--surface-2) 10px,
    transparent 10px, transparent 20px);
  color: var(--text-faint); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .09em; font-weight: 600;
}

.news-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  display: inline-flex; align-items: center;
  padding: 12px 20px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .01em; text-decoration: none;
  background: var(--accent-grad); color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  transition: transform .15s, box-shadow .15s, opacity .2s;
}
.news-float:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .34); }
.news-float[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .news-float { transition: none; }
  .news-float:hover { transform: none; }
}

@media (max-width: 560px) {
  .news-float { right: 12px; bottom: 12px; padding: 11px 16px; font-size: 12px; }
}

/* ---------- Boletín semanal ---------- */

.newsletter {
  margin-top: 40px; padding: 26px 0;
  background: var(--surface); border-top: 1px solid var(--border);
}
.newsletter[hidden] { display: none; }

.newsletter-inner {
  display: grid; gap: 18px 36px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
}

.newsletter-copy h2 { margin: 0 0 5px; font-size: 17px; letter-spacing: -.01em; }
.newsletter-copy p { margin: 0; font-size: 13px; color: var(--text-soft); max-width: 46ch; }

.newsletter-row { display: flex; gap: 7px; }
.newsletter-row input {
  flex: 1 1 auto; min-width: 0; font: inherit; padding: 9px 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
}
.news-btn {
  flex: 0 0 auto; font: inherit; font-weight: 700; cursor: pointer;
  padding: 10px 18px; border-radius: 999px;
  border: 0; background: var(--accent-grad); color: #fff;
  box-shadow: var(--shadow-lift);
}
.news-btn:hover:not(:disabled) { filter: brightness(1.08); }
.news-btn:disabled { opacity: .6; cursor: progress; }

.news-consent {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 10px; font-size: 12px; color: var(--text-soft); cursor: pointer;
}
.news-consent input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }

.news-consent a { color: var(--accent-2); }

/* Paso 2: elección de deportes */
.news-sports-title { margin: 0 0 9px; font-size: 13px; font-weight: 600; }
.news-sports {
  display: grid; gap: 4px 14px; margin-bottom: 13px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.news-sport {
  display: flex; gap: 7px; align-items: center;
  font-size: 13px; cursor: pointer;
}
.news-sport input { flex: 0 0 auto; accent-color: var(--accent-2); }

.news-actions { display: flex; gap: 6px; align-items: center; }
.news-back {
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 10px 10px; border: 0; background: none; color: var(--text-soft);
}
.news-back:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

.news-feedback { margin: 9px 0 0; font-size: 12.5px; min-height: 1.2em; }
/* Vacío no ocupa: con su hueco reservado, la sección tenía 50px de aire
   debajo del botón frente a 27 por arriba y se veía descentrada. */
.news-feedback:empty { display: none; }
.news-feedback[data-tone="ok"] { color: var(--free); font-weight: 500; }
.news-feedback[data-tone="error"] { color: var(--warn); }
.news-feedback[data-tone="info"] { color: var(--text-faint); }

@media (max-width: 720px) {
  .newsletter-inner { grid-template-columns: 1fr; }
}

/* ---------- Vacíos y pie ---------- */

.empty {
  text-align: center; padding: 48px 20px; color: var(--text-soft);
  background: var(--card); border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.empty h2 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
.empty p { margin: 0; font-size: 13px; }

.site-footer {
  margin-top: 40px; padding: 34px 0 26px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
/* El boletín entrega directamente en el pie: sin el margen quedaba una banda
   del fondo del cuerpo entre dos secciones que deben leerse como una sola.
   El margen se conserva cuando el boletín está oculto y cuando el pie sigue al
   contenido, que es el caso de las páginas generadas. */
.newsletter:not([hidden]) + .site-footer { margin-top: 0; }

.footer-cols {
  display: grid; gap: 22px 32px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.footer-col h3 {
  margin: 0 0 9px; font: 700 13px/1.3 var(--display);
  color: var(--text); letter-spacing: -.01em;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { padding: 3px 0; }
.footer-col a {
  font-size: 13px; color: var(--text-soft); text-decoration: none;
}
.footer-col a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

.footer-bar {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
/* Ojo: aquí va background-IMAGE y no el atajo background. El atajo reinicia
   background-clip y el nombre se pintaría como un rectángulo de color en vez
   de recortarse sobre el texto. */
.footer-bar .brand-name { background-image: var(--accent-grad); }

.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-nav a {
  font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none;
}
.footer-nav a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

.footer-legal {
  margin: 18px 0 0; font-size: 12px; line-height: 1.55;
  color: var(--text-faint);
}

@media (max-width: 560px) {
  .footer-bar { flex-direction: column; align-items: flex-start; }
  /* Cinco columnas apiladas de una en una dejaban un pie de pantalla y media.
     A dos columnas cabe sin que el enlace mas largo se parta. */
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
}

/* ---------- Móvil ---------- */

@media (max-width: 720px) {
  /* Solo el número: con la palabra entera, los siete días medían 945px y
     había que arrastrar 610 para llegar al domingo. */
  .day-tab .day-count { display: none; }
  .day-tab .day-count-short { display: inline; }

  .event { grid-template-columns: 68px minmax(0, 1fr); }
  .watch { grid-column: 1 / -1; padding-top: 4px; border-top: 1px dashed var(--border); }
  .header-inner { align-items: flex-start; }
}

/* ---------- Impresión ----------

   Lo que se imprime es la agenda, no la aplicación: fuera los controles, los
   anuncios, el boletín y la navegación del pie, que en papel no sirven para
   nada y se comen media hoja.

   El selector incluye :root[data-theme] para que, si alguien imprime con el
   sistema en oscuro o con ?tema=oscuro, no salga texto claro sobre blanco: los
   navegadores no imprimen fondos por defecto y la hoja saldría en blanco. Va
   al final del archivo y gana por orden a las dos copias del modo oscuro.
   NO escribir aquí :root[data-theme="oscuro"] literal: validate.py busca esa
   cadena para comparar las copias del tema y se le colarían estas reglas. */
@media print {
  :root, :root[data-theme] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --card: #ffffff;
    --border: #bbbbbb;
    --border-strong: #999999;
    --text: #000000;
    --text-soft: #333333;
    --text-faint: #555555;
    --accent: #000000;
    --accent-2: #000000;
    --accent-soft: #eeeeee;
    --free: #000000;
    --free-bg: #ffffff;
    --free-border: #777777;
    --freemium: #000000;
    --freemium-bg: #ffffff;
    --freemium-border: #777777;
    --paid: #333333;
    --paid-bg: #ffffff;
    --paid-border: #999999;
    --warn: #000000;
    --warn-bg: #ffffff;
    --shadow: none;
    --shadow-lift: none;
  }

  /* Nada de esto tiene sentido en papel. */
  nav.controls,
  .lang-switch,
  .crumbs,
  .ad-slot,
  .ad-rail,
  .newsletter,
  .news-float,
  .footer-cols,
  .footer-nav,
  .back-to-app,
  .back-link,
  .status { display: none !important; }

  body { background: #ffffff; }

  /* La cabecera lleva un degradado oscuro que el navegador no imprime: sin
     esto, el nombre saldría en blanco sobre blanco. */
  .site-header {
    background: none; border-bottom: 1px solid #000000;
    padding: 0 0 8px; margin-bottom: 14px;
  }
  .brand-name {
    background: none; color: #000000;
    -webkit-text-fill-color: #000000;
  }
  .brand-sub { color: #333333; }
  .brand-mark { width: 32px; height: 32px; }

  /* Sin la columna del anuncio, la lista ocupa el ancho de la hoja. */
  .layout { display: block; }
  .shell { max-width: none; padding: 0; }

  /* Una tarjeta partida entre dos hojas es ilegible. */
  .event {
    break-inside: avoid; box-shadow: none; border: 1px solid #999999;
    /* La tercera columna en porcentaje: con los 240px fijos de pantalla, al
       ensancharse a la hoja entera queda un vacío entre el partido y el canal. */
    grid-template-columns: 64px minmax(0, 1fr) 34%;
    padding: 10px 12px; margin-bottom: 6px;
  }
  .day-heading { break-after: avoid; }
  .option { border-color: #999999; }

  a { text-decoration: none; color: #000000; }

  /* El aviso de derechos sí se imprime: es la advertencia de que el dato puede
     haber cambiado, y en papel envejece más rápido que en pantalla. */
  .site-footer {
    margin-top: 16px; padding: 10px 0 0;
    border-top: 1px solid #000000; background: none;
  }
  .footer-bar { display: none; }
  .footer-legal { color: #333333; }
}