/*
  La misma paleta que la app de escritorio, en CSS.

  Los valores están copiados de `quiniela/ui/tema/tokens.py` a propósito y hay
  un test que comprueba que siguen coincidiendo: si alguien cambia un color
  allí y no aquí, salta. Es la única forma de que las dos caras del proyecto
  sigan pareciendo la misma cosa.

  Pensado para el móvil primero: la peña va a mirar esto de pie, en el sofá o
  en el bar, no sentada delante de un monitor.
*/

:root {
  --fondo: #F7F6F3;
  --superficie: #FFFFFF;
  --superficie-suave: #F0EEE8;
  --borde: #E4E1DA;
  --borde-fuerte: #CFCABE;
  --texto: #14120F;
  --texto-suave: #5C574E;
  --texto-tenue: #8B857A;
  --acento: #8A6205;
  --acento-fondo: #F5EDD9;
  --bueno: #1F6B44;
  --bueno-fondo: #E2F0E7;
  --regular: #9A5B08;
  --regular-fondo: #FAEBD9;
  --malo: #A32D22;
  --malo-fondo: #F7E3E0;
  --signo-1: #1F5C8B;
  --signo-x: #6B655C;
  --signo-2: #8B3A62;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --e-xs: 4px; --e-sm: 8px; --e-md: 12px; --e-lg: 16px; --e-xl: 24px;

  --texto-fuente: "Segoe UI Variable Text", "Segoe UI", -apple-system,
                  BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --cifra-fuente: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #131211;
    --superficie: #1D1B18;
    --superficie-suave: #242220;
    --borde: #33302B;
    --borde-fuerte: #4A453D;
    --texto: #F2EFE9;
    --texto-suave: #B5AEA1;
    --texto-tenue: #857F74;
    --acento: #E0AC1F;
    --acento-fondo: #332A12;
    --bueno: #5FC08D;
    --bueno-fondo: #172A20;
    --regular: #E0A24A;
    --regular-fondo: #302213;
    --malo: #E8776A;
    --malo-fondo: #331C19;
    --signo-1: #6FB2E0;
    --signo-x: #A39C90;
    --signo-2: #D98BB4;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 var(--e-xl);
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--texto-fuente);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.envoltorio { max-width: 780px; margin: 0 auto; padding: 0 var(--e-md); }

/* ── Cabecera ─────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 10;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding: var(--e-md) 0;
  margin-bottom: var(--e-lg);
}
header .envoltorio { display: flex; align-items: baseline; gap: var(--e-sm);
                     flex-wrap: wrap; }
h1 { font-size: 1.1rem; margin: 0; font-weight: 700; }
.momento { font-size: .78rem; color: var(--texto-tenue); margin-left: auto;
           font-family: var(--cifra-fuente); }
.pulso {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bueno); display: inline-block;
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }

/* ── Tarjetas ─────────────────────────────────────────────── */
section {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: var(--e-lg);
  margin-bottom: var(--e-md);
}
h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-tenue); margin: 0 0 var(--e-md); font-weight: 700;
}
.nota { font-size: .8rem; color: var(--texto-tenue); margin: var(--e-sm) 0 0; }

/* ── Cifras de cabecera ───────────────────────────────────── */
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-sm); }
.cifra {
  background: var(--superficie-suave); border-radius: var(--r-md);
  padding: var(--e-md); text-align: center;
}
.cifra .rotulo { font-size: .66rem; text-transform: uppercase;
                 letter-spacing: .08em; color: var(--texto-tenue); }
.cifra .valor { font-family: var(--cifra-fuente); font-size: 1.15rem;
                font-weight: 700; margin-top: 2px; word-break: break-word; }
/* Cada cuántas veces acaba la jornada en esa cifra. Va debajo y en pequeño a
   propósito: acompaña al euro, no compite con él. */
.cifra .cuantas:not(:empty) {
  margin-top: 4px; font-family: var(--cifra-fuente); font-size: .68rem;
  color: var(--texto-tenue); white-space: nowrap;
}
.cifra.destacada { background: var(--acento-fondo); }
.cifra.destacada .valor { color: var(--acento); }
.cifra.destacada .cuantas { color: var(--acento); }
.cifra .valor.bueno { color: var(--bueno); }

/* ── Partidos ─────────────────────────────────────────────── */
/* ── La jornada, con todas las columnas ───────────────────── */
/*
  Catorce filas y cincuenta y seis columnas no caben en un móvil, así que la
  tabla se arrastra en horizontal y la parte que identifica el partido —número,
  equipos, marcador, resultado y la columna que más promete— se queda pegada a
  la izquierda con `position: sticky`. Es la única forma de que, al mirar la
  columna 40, se siga sabiendo de qué partido se está hablando.

  El fondo de esa parte fija tiene que ser opaco y del color de su fila: si
  fuera transparente, las celdas que pasan por debajo se leerían encima.
*/
.scroll-jornada {
  overflow-x: auto; overflow-y: hidden;
  /* Se sale del acolchado de la sección para ganar los pocos milímetros que
     hacen que quepa una columna más en el móvil. El acolchado NO va aquí: con
     `padding-left`, un elemento pegado con `left: 0` se queda en el borde de
     la caja y las celdas se ven pasar por debajo, a su izquierda. Se lo come
     el bloque fijo, que es quien tapa. */
  margin: 0 calc(-1 * var(--e-lg));
  overscroll-behavior-x: contain;
}
.jornada { min-width: max-content; padding-right: var(--e-lg); }

.fila { display: flex; align-items: stretch; border-bottom: 1px solid var(--borde); }
.fila:last-child { border-bottom: none; }
.fila > .fija {
  position: sticky; left: 0; z-index: 2;
  flex: 0 0 auto;
  background: var(--superficie);
  border-right: 1px solid var(--borde-fuerte);
  /* número · equipos · marcador · aciertan · resultado · la que más promete */
  display: grid;
  grid-template-columns: 1.4rem minmax(6.5rem, 11rem) 2.4rem 4.3rem 1.7rem 1.8rem;
  align-items: center; gap: var(--e-xs);
  padding: var(--e-xs) var(--e-sm) var(--e-xs) var(--e-lg);
}
.fila > .celdas { display: flex; align-items: stretch; padding-left: var(--e-xs); }

.fila .num { color: var(--texto-tenue); font-size: .78rem;
             font-family: var(--cifra-fuente); text-align: right; }
.fila .equipos { font-size: .82rem; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
.fila .marcador { font-family: var(--cifra-fuente); font-size: .8rem;
                  color: var(--texto-suave); text-align: center; }
.fila .signo {
  font-family: var(--cifra-fuente); font-weight: 700; font-size: .9rem;
  text-align: center; border-radius: var(--r-sm); padding: 1px 2px;
  /* El Pleno al 15 pone aquí «2-1» o «M-1», y sin esto rompía la fila en dos
     renglones y descuadraba la última línea de la tabla. */
  white-space: nowrap;
}
.fila .signo.pleno { font-size: .68rem; letter-spacing: -.02em; }
/* El color del signo: azul el 1, gris la X, granate el 2. Es como se lee una
   quiniela de un vistazo, y vale igual para el resultado y para las celdas. */
.signo-1 { color: var(--signo-1); }
.signo-X { color: var(--signo-x); }
.signo-2 { color: var(--signo-2); }
.cel.acierto.signo-1, .cel.acierto.signo-X, .cel.acierto.signo-2 { color: var(--bueno); }
.cel.fallo.signo-1, .cel.fallo.signo-X, .cel.fallo.signo-2 { color: var(--malo); }

.fila.jugando { background: var(--regular-fondo); }
.fila.jugando > .fija { background: var(--regular-fondo); }
.fila.jugando .marcador { color: var(--regular); font-weight: 700; }
.fila.pendiente .equipos { color: var(--texto-tenue); }

/* Una celda de las columnas jugadas. Estrechas a propósito: de su ancho
   depende cuántas se ven de un vistazo en un móvil. */
.cel {
  flex: 0 0 auto; width: 1.15rem; text-align: center;
  font-family: var(--cifra-fuente); font-size: .72rem;
  color: var(--texto-suave);
  /* De arriba abajo de la fila: la gracia de esto es poder barrer una columna
     con la vista, y con las fichas cortadas por la mitad eso no se puede. */
  display: flex; align-items: center; justify-content: center;
}
.cel.acierto { background: var(--bueno-fondo); color: var(--bueno); font-weight: 700; }
/* Apagado con color propio y no con `opacity`: la opacidad difumina el texto
   y su fondo a la vez, y dejaba las cifras pequeñas en 1,9:1 de contraste. */
.cel.fallo { background: var(--malo-fondo); color: var(--malo); }
.cel.decena { border-right: 1px solid var(--borde); }
.cel.numero { font-size: .62rem; color: var(--texto-tenue); }
/* La que más promete, repetida junto a los equipos para no perderla de vista. */
.cel.destacada {
  background: var(--acento-fondo); color: var(--acento); font-weight: 700;
  border-radius: var(--r-sm); width: auto;
}
.cel.destacada.acierto { background: var(--bueno-fondo); color: var(--bueno); }
.cel.destacada.fallo { background: var(--malo-fondo); color: var(--malo); }

.fila.cabecera { border-bottom: 1px solid var(--borde-fuerte); }
.fila.cabecera .equipos, .fila.cabecera .signo {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-tenue); font-weight: 700; font-family: var(--texto-fuente);
}
.fila.pie {
  border-top: 1px solid var(--borde-fuerte); border-bottom: none;
  background: var(--superficie-suave);
}
.fila.pie > .fija {
  background: var(--superficie-suave);
  /*
    La MISMA rejilla que las filas de datos, sin excepción. Con una propia
    —«minmax(15rem,1fr) 1.7rem»— el bloque fijo medía distinto, y como cada
    fila es un flex independiente nada iguala los dos anchos: las cifras del
    pie arrancaban seis columnas corridas de las que contaban. Un número
    creíble y falso justo debajo de la columna equivocada, que es lo contrario
    de la transparencia que se pedía. La etiqueta ocupa las cinco primeras
    celdas y la destacada se queda en la sexta, donde le toca.
  */
}
.fila.pie .etiqueta { grid-column: 1 / 6; }
.fila.pie .cel.destacada { grid-column: 6; }
.fila.pie .etiqueta { font-size: .62rem; text-transform: uppercase;
                      letter-spacing: .08em; color: var(--texto-tenue);
                      font-weight: 700; }
.fila.pie .cel { font-weight: 700; }
.fila.pie .cel.aspira { color: var(--bueno); }
.fila.pie .cel.muerta { color: var(--texto-tenue); font-weight: 400; }

.aciertan { font-size: .68rem; color: var(--texto-tenue);
            font-family: var(--cifra-fuente); text-align: right;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aciertan.muchas { color: var(--bueno); }

/* ── Barras ───────────────────────────────────────────────── */
.barra-fila { display: grid; grid-template-columns: 3.6rem 1fr 4.4rem;
              align-items: center; gap: var(--e-sm); margin-bottom: 3px; }
.barra-fila .et { font-size: .8rem; color: var(--texto-suave);
                  font-family: var(--cifra-fuente); text-align: right; }
.barra { height: 14px; background: var(--superficie-suave);
         border-radius: 7px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--acento);
             border-radius: 7px; transition: width .4s ease; }
/* Verde: la columna todavía puede cobrar. Marrón: ya no llega a 10. */
.barra-fila.aspira .barra > i { background: var(--bueno); }
.barra-fila.aspira .et { color: var(--bueno); }
.barra-fila.muerta .barra > i { background: var(--acento); opacity: .45; }
.barra-fila.muerta .et, .barra-fila.muerta .val { opacity: .55; }
.barra-fila .val { font-size: .8rem; font-family: var(--cifra-fuente);
                   color: var(--texto); }
@media (prefers-reduced-motion: reduce) { .barra > i { transition: none; } }

/* ── Desglose del premio ──────────────────────────────────── */
#desglose:not(:empty) {
  margin-top: var(--e-md); padding-top: var(--e-md);
  border-top: 1px solid var(--borde);
}
.titulo-desglose { font-size: .8rem; color: var(--texto-suave);
                   margin-bottom: var(--e-xs); }
.trozo { display: grid; grid-template-columns: 5.4rem 1fr auto;
         gap: var(--e-sm); align-items: baseline; padding: 2px 0;
         font-size: .84rem; }
.trozo .t-cat { color: var(--texto-suave); }
.trozo .t-col { color: var(--texto-tenue); font-family: var(--cifra-fuente);
                font-size: .78rem; }
.trozo .t-tot { font-family: var(--cifra-fuente); text-align: right; }
.trozo.suma { border-top: 1px solid var(--borde); margin-top: var(--e-xs);
              padding-top: var(--e-xs); font-weight: 700; }
.trozo.suma .t-tot { color: var(--acento); }

/* ── Tabla de categorías ──────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
     color: var(--texto-tenue); text-align: right; padding: 0 0 var(--e-xs);
     font-weight: 700; }
th:first-child, td:first-child { text-align: left; }
td { padding: var(--e-xs) 0; border-top: 1px solid var(--borde);
     text-align: right; font-family: var(--cifra-fuente); }
tr.muerta { opacity: .38; }
tr.muerta td:first-child::after { content: " ✕"; color: var(--malo); }

/* ── Columna ──────────────────────────────────────────────── */

/* ── Qué nos conviene ─────────────────────────────────────── */
.opcion { margin-bottom: var(--e-md); }
.opcion .titulo { font-size: .85rem; color: var(--texto-suave);
                  margin-bottom: var(--e-xs); }
.opcion .fila { display: grid; grid-template-columns: 1.8rem 1fr 5.5rem;
                align-items: center; gap: var(--e-sm); margin-bottom: 3px; }
.opcion .fila.mejor .barra > i { background: var(--bueno); }
.opcion .fila .s { font-family: var(--cifra-fuente); font-weight: 700;
                   text-align: center; }
.opcion .fila .p { font-family: var(--cifra-fuente); font-size: .8rem;
                   text-align: right; }
.opcion .fila.mejor .p { color: var(--bueno); font-weight: 700; }

/* ── Simulador ────────────────────────────────────────────── */
.simulador .fila { display: grid; grid-template-columns: 1fr auto;
                   align-items: center; gap: var(--e-sm);
                   padding: var(--e-xs) 0; border-bottom: 1px solid var(--borde); }
.grupo { display: inline-flex; border: 1px solid var(--borde-fuerte);
         border-radius: var(--r-md); overflow: hidden; }
.grupo button {
  font-family: var(--cifra-fuente); font-weight: 700; font-size: .85rem;
  border: none; background: var(--superficie); color: var(--texto-suave);
  padding: var(--e-xs) var(--e-md); cursor: pointer; min-width: 2.4rem;
}
.grupo button + button { border-left: 1px solid var(--borde); }
.grupo button.puesto { background: var(--acento); color: var(--superficie); }
@media (prefers-color-scheme: dark) {
  .grupo button.puesto { color: #1A1509; }
}
.acciones { display: flex; gap: var(--e-sm); margin-top: var(--e-md);
            flex-wrap: wrap; }
button.principal, button.secundario {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  border-radius: var(--r-md); padding: var(--e-sm) var(--e-lg);
  border: 1px solid var(--borde-fuerte); background: var(--superficie);
  color: var(--texto);
}
button.principal { background: var(--acento); border-color: var(--acento);
                   color: var(--superficie); }
@media (prefers-color-scheme: dark) {
  button.principal { color: #1A1509; }
}
button:disabled { opacity: .45; cursor: default; }
.avisando { background: var(--acento-fondo); border-color: var(--acento);
            color: var(--acento); }

/* ── Final ────────────────────────────────────────────────── */
.final { text-align: center; background: var(--acento-fondo);
         border-color: var(--acento); }
.final .premio { font-family: var(--cifra-fuente); font-size: 2rem;
                 font-weight: 700; color: var(--acento); margin: var(--e-sm) 0; }
.final .lema { font-size: 1.05rem; font-weight: 700; color: var(--texto); }

/* ── Simulando ────────────────────────────────────────────── */
body.simulando section:not(.simulador) { border-style: dashed; }
/* Un partido que no ha pasado, sólo supuesto: se marca para que no se confunda
   con un resultado de verdad. */
.fila.supuesto .marcador, .fila.supuesto .signo { font-style: italic; }
.fila.supuesto .signo { outline: 1px dashed var(--borde-fuerte); }
.aviso-simulacion {
  background: var(--regular-fondo); color: var(--regular);
  border: 1px solid var(--regular); border-radius: var(--r-md);
  padding: var(--e-sm) var(--e-md); font-size: .85rem;
  margin-bottom: var(--e-md); display: none;
}
body.simulando .aviso-simulacion { display: block; }

.cargando { text-align: center; color: var(--texto-tenue); padding: var(--e-xl); }

/* Cuando el escrutinio no consigue leer los resultados. Se dice, en vez de
   enseñar una jornada congelada como si fuera la de ahora. */
.averia {
  background: var(--malo-fondo); color: var(--malo);
  border: 1px solid var(--malo); border-radius: var(--r-md);
  padding: var(--e-sm) var(--e-md); font-size: .85rem;
  margin-bottom: var(--e-md);
}

@media (max-width: 420px) {
  .cifras { grid-template-columns: 1fr; }
  body { font-size: 15px; }
}

/* ── El móvil, que es donde se mira ────────────────────────── */
/*
  Aquí manda una sola cosa: cuántas columnas se ven sin arrastrar. Cada
  milímetro que se le quita a la parte fija es media columna más a la vista,
  así que se encoge todo lo que se puede sin dejar de saber de qué partido se
  está hablando. Lo primero que se va es el «/56» del recuento, que es igual
  en las catorce filas y ya lo dice la nota de debajo.
*/
@media (max-width: 560px) {
  .scroll-jornada { margin: 0 calc(-1 * var(--e-md)); }
  .jornada { padding-right: var(--e-md); }
  /*
    En dos alturas en vez de en una. Los equipos pasan a dos renglones y el
    marcador se pone encima del recuento, con lo que la parte fija baja de 280
    a unos 200 píxeles: de tres columnas visibles a diez, en un móvil de 375.
    Es el cambio que hace que esto se pueda usar de pie en el bar.
  */
  .fila > .fija {
    grid-template-columns: 1.1rem minmax(3.6rem, 4.6rem) 3.4rem 1.4rem 1.5rem;
    grid-template-rows: auto auto;
    gap: 0 2px;
    padding-left: var(--e-md); padding-right: 2px;
  }
  .fila .num           { grid-area: 1 / 1 / 3 / 2; font-size: .62rem; }
  .fila .equipos       { grid-area: 1 / 2 / 3 / 3; white-space: normal;
                         font-size: .62rem; line-height: 1.2; }
  .fila .marcador      { grid-area: 1 / 3 / 2 / 4; font-size: .68rem; }
  /* Aquí cabe la hora de comienzo —«SAB 16:15»— cuando el partido no ha
     empezado, que es lo que hay que leer antes de que haya marcador. */
  .aciertan            { grid-area: 2 / 3 / 3 / 4; text-align: center;
                         font-size: .55rem; }
  .aciertan small      { display: none; }
  .fila .signo         { grid-area: 1 / 4 / 3 / 5; font-size: .8rem; }
  .fila .cel.destacada { grid-area: 1 / 5 / 3 / 6; }

  .fila.cabecera .equipos { line-height: 1.6; }
  /* El pie hereda las mismas cinco pistas que las filas de datos —cambiarlas
     lo descuadraría igual que en escritorio— y sólo se queda en una altura. */
  .fila.pie > .fija { grid-template-rows: auto; }
  .fila.pie .etiqueta { grid-area: 1 / 1 / 2 / 5; }
  .fila.pie .cel.destacada { grid-area: 1 / 5 / 2 / 6; }

  .cel { width: 1.05rem; font-size: .68rem; }
}