/* ==========================================================================
   El Camino DT — La portada
   --------------------------------------------------------------------------
   La solapa «Noticias» a pantalla completa. Es la única vista del portal que no
   es un recorte de la general: las otras cinco enfocan un panel que ya está en
   la pantalla, y ésta trae contenido propio —la fecha entera, la tabla con
   flechas, el feed y el continente— que en una columna de 640 px no entra.

   Dos columnas y no tres. Con tres, la del medio queda demasiado angosta para
   un titular y demasiado ancha para una lista: es el ancho que no sirve para
   nada. Con dos, la izquierda lee y la derecha se escanea, que son las dos
   cosas que se hacen en un portal.
   ========================================================================== */

/* Sólo existe en su solapa. La vista general no esconde nada —por eso muestra
   todo— así que esta sección tiene que esconderse ella misma y aparecer nada
   más cuando la nombran. */
.portada { display: none; }

/* Tres filas: cabecera, zócalo y el resto. Las dos primeras miden lo que miden
   y la tercera se queda con lo que sobra, que es lo que deja scrollear las
   columnas por dentro sin llevarse la cinta ni el rótulo.

   Scrollers propios y no página scrolleando: la promesa de esta pantalla es
   que ocupa el alto de la ventana y no se mueve —lo dice `inicio.css` y lo
   cumplen la bandeja y la clasificación— y esta portada, que es la primera
   vista con más contenido del que entra, se hace cargo de la suya. Sin esto,
   `body { overflow: hidden }` le corta la mitad de abajo y no hay forma de
   llegar al final. */
.home[data-vista='noticias'] .portada {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--sp-6);
  min-height: 0;
}

.portada__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.portada__marca { display: flex; align-items: baseline; gap: var(--sp-6); flex-wrap: wrap; }
.portada__hoy { font-size: var(--fs-sm); color: var(--text-muted); }

/* El indicador de que esto está corriendo. La cifra que lleva al lado cuenta
   segundos REALES desde que se cargó la pantalla, no tiempo de la carrera: es
   lo único de esta pantalla que de verdad pasa mientras la mirás, y por eso es
   lo único que se puede decir sin mentir. */
.portada__vivo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Va en CAL y no en violeta: el violeta de este juego es lo pulsable, y esto no
   se pulsa — es un valor, «esto está corriendo». La onda sale del tinte que ya
   existe para las cifras juzgadas, así que el verde es el mismo verde. */
.portada__pulso {
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--good);
  animation: pulso 2.4s var(--ease) infinite;
}

@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 var(--tint-good); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* --------------------------------------------------------------------------
   EL ZÓCALO
   --------------------------------------------------------------------------
   Se mudó a `app.css` el 21/8/2026, ENTERO — cinta y piezas—: la portada del
   juego pidió la misma para nombrar los torneos, y un componente que dibujan
   dos pantallas es sistema. Este comentario decía «acá quedan sólo sus
   PIEZAS» y era mentira desde el día uno: `.ticker__pieza`, `--mio` y su
   `::before` estaban copiados verbatim en las dos hojas, que CO-CARGAN en el
   portal — la contra-auditoría del 25/8 lo encontró y la copia se borró de
   acá. La única fuente es `app.css`; si esta pantalla algún día necesita un
   acento propio, se agrega como delta y no como copia.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   LA RETÍCULA
   -------------------------------------------------------------------------- */

.portada__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: var(--sp-6);
  align-items: stretch;
  min-height: 0;
}

/* Cada columna scrollea por su cuenta: con un solo scroller para las dos, leer
   el final de los resultados se lleva puestos el feed y la tabla, que son
   justo las dos cosas que se miran de reojo mientras se lee lo de al lado. */
.portada__ancha,
.portada__lateral {
  display: grid;
  gap: var(--sp-6);
  align-content: start;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
  margin-right: calc(var(--sp-4) * -1);
  padding-right: var(--sp-4);
}

/* La apertura rota sola entre los titulares, así que su alto cambia con cada
   nota. Sin un piso, la pantalla entera da un salto cada siete segundos. */
.portada__apertura .news { min-height: 176px; align-content: start; }

/* --------------------------------------------------------------------------
   LOS RESULTADOS DE LA FECHA
   --------------------------------------------------------------------------
   El dato que el juego guardaba hace temporadas y ninguna pantalla mostraba: el
   resto de tu división también juega los sábados. Dos columnas de partidos
   cuando hay ancho, porque ocho renglones a lo largo de mil píxeles son ocho
   renglones con un marcador perdido en el medio.

   EL ANCHO SALE DE LA PALABRA MÁS LARGA DEL JUEGO, NO DE UN NÚMERO REDONDO.
   Con los 280 px de antes, 73 de las 77 divisiones dirigibles truncaban algún
   nombre, y en la Primera argentina se comía la mitad de la fecha: «Gimnasia y
   E…» contra «Central Córd…». Medidos los 1.287 clubes en la cara y el peso
   reales —la fila propia va en 700, que es la más ancha—, el renglón se reparte
   así: 24 px de sacado, 24 de los dos huecos y 54 del marcador más ancho
   posible son 102 px que no son nombre; lo que sobra se divide entre los dos
   lados. Para que entre **Mönchengladbach**, la palabra suelta más ancha del
   universo con 137 px, cada lado necesita 137 y la columna 376.

   Se toman 400 y no 376: a 149 px por lado ninguna palabra queda sin entrar
   —el margen paga la cursiva, el club que entre mañana y la ventana con zoom—
   y a 1440 siguen entrando dos columnas, que era la promesa de esta tarjeta.
   Un mínimo mayor no arregla más de lo que rompe: el peor cruce posible pide
   592 px, y pedirle eso a la retícula la deja en una sola columna, que es otra
   pantalla y no un arreglo.

   Y VA EN `rem`, QUE ES LA MISMA VARA CON LA QUE SE MIDIÓ. Los 400 px salen de
   medir texto, y el texto de esta lista es `--fs-sm`, que es `rem`: escrito en
   px, el día que alguien agrande la tipografía del navegador crecen las dos
   puntas del renglón y no la caja que las tiene que contener. 25rem son los
   mismos 400 px con la raíz por defecto y siguen siendo el ancho correcto
   cuando no lo es.
   -------------------------------------------------------------------------- */

.fecha { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: var(--sp-2); }

.partido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.partido:nth-child(odd) { background: var(--bg-row); }

.partido--mio { color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--accent-line); }
.partido--mio .partido__equipo { font-weight: 700; }

/* Y AUN CON 400 QUEDAN 96 NOMBRES QUE NO ENTRAN DE UNA, así que el renglón
   tiene que poder ser dos. Cortar con puntos suspensivos es lo que había y es
   lo peor de los tres finales posibles: un nombre partido en dos líneas se lee
   entero, uno recortado obliga a adivinar de qué club se habla. El alto lo
   pagan las pocas filas que lo necesitan, y `align-items: center` en `.partido`
   ya deja el marcador donde tiene que estar cuando un lado mide dos renglones
   y el otro uno.

   `break-word` es el último recurso y no debería dispararse nunca: por diseño
   la columna entra la palabra más ancha del juego. Está para el club que entre
   mañana con una más larga, que es la única forma conocida de volver a romper
   esto sin que nadie lo note. */
.partido__equipo {
  min-width: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.partido__equipo--der { text-align: right; }

.partido__marcador {
  padding: 1px var(--sp-4);
  border-radius: var(--r-xs);
  background: var(--bg-raised);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Sin jugar el marcador no se rellena: una pastilla vacía se lee como 0-0. */
.partido__marcador--pendiente { background: none; color: var(--text-muted); font-weight: 400; }

/* --------------------------------------------------------------------------
   EL CONTINENTE
   -------------------------------------------------------------------------- */

.continente { display: grid; gap: var(--sp-6); }

.continente__mias { display: grid; gap: var(--sp-3); }
.continente__mia {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}
.continente__mia b { color: var(--text-primary); font-weight: 700; }

.continente__ligas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-2); }

.continente__liga {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.continente__liga:nth-child(odd) { background: var(--bg-row); }
.continente__pais { color: var(--text-muted); font-size: var(--fs-xs); }
.continente__campeon { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.continente__nada { font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   EL FEED
   --------------------------------------------------------------------------
   La columna cronológica. Cada entrada es un posteo de una línea, y lo que las
   ata es el hilo vertical de la izquierda: sin él son tarjetas sueltas y con él
   son una línea de tiempo, que es la diferencia entre una lista y un feed.
   -------------------------------------------------------------------------- */

.feed { display: grid; }

.feed__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  position: relative;
}
.feed__item + .feed__item { border-top: 1px solid var(--line); }

/* El hilo va detrás de los avatares y se corta en el último: una línea que
   sigue de largo bajo el final del feed promete una entrada más. */
.feed__item::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.feed__item:first-child::before { top: var(--sp-5); }
.feed__item:last-child::before { bottom: calc(100% - var(--sp-5) - 28px); }

/* Las siglas van en el escalón más chico de la rampa y no en un tamaño
   inventado, así que el círculo se ajusta a la letra y no al revés: con 28 px
   una sigla de cuatro —ESPN, TUDN— no entraba y había que bajar a 8 px, que es
   un escalón que la tipografía de este juego no tiene. */
.feed__avatar {
  position: relative;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid hsl(var(--marca) / 0.45);
  background: hsl(var(--marca) / 0.16);
  color: hsl(var(--marca));
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.feed__cuerpo { display: grid; gap: var(--sp-3); min-width: 0; }

.feed__quien {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.feed__nombre { font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.feed__hora { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }

.feed__texto { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--text-primary); }
.feed__texto strong { font-weight: 700; }

.feed__pie {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.feed__pie span { display: inline-flex; align-items: center; gap: var(--sp-2); }

.feed__etiqueta {
  padding: 1px var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   LA TABLA CHICA
   --------------------------------------------------------------------------
   No es la tabla de la Programación estirada: es la de al lado, con lo justo
   para contestar «cómo va» de un vistazo. Puesto, flecha, club, jugados y
   puntos. Sin goles a favor ni en contra, que es lo que se va a mirar a la
   tabla entera.
   -------------------------------------------------------------------------- */

.tablita { display: grid; }

.tablita__fila {
  display: grid;
  grid-template-columns: 2.4ch 12px minmax(0, 1fr) 3ch 3.5ch;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
/* Impar, como toda tabla del juego: la franja arranca en la primera fila. La
   tablita era la única que empezaba en blanco —no tiene cabecera que la corra
   un renglón, así que `even` acá quiere decir otra cosa que allá— y con la
   clasificación grande ya rayada quedaban dos ritmos para la misma tabla. */
.tablita__fila:nth-child(odd) { background: var(--bg-row); }
/* El anillo violeta se va con el resto: era la misma promesa de «esto está
   seleccionado» sobre una fila que nadie eligió. */
.tablita__fila--mio { color: var(--tuyo); }
.tablita__fila--mio .tablita__club { color: var(--tuyo); }
.tablita__fila--mio .tablita__club { font-weight: 700; }

/* La franja de clasificación va en un pip a la izquierda del puesto y no
   pintando el renglón entero: el renglón ya lleva el resaltado de "sos vos", y
   dos fondos compitiendo dejan sin leer los dos. */
.tablita__pos { position: relative; padding-left: var(--sp-4); color: var(--text-muted); }
.tablita__pos::before {
  content: '';
  position: absolute;
  left: -2px; top: 50%;
  width: 3px; height: 14px;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: none;
}
.tablita__fila--champions .tablita__pos::before { background: var(--accent); }
.tablita__fila--europa .tablita__pos::before { background: var(--accent-dim); }
.tablita__fila--descenso .tablita__pos::before { background: var(--danger); }

/* Subir es un valor bueno, así que va en CAL como el resto de los valores
   buenos del juego; bajar va en el rojo de peligro. Los dos son tokens: acá
   había dos hsl() escritos a mano que no eran el verde ni el rojo de nadie. */
.tablita__mov { width: 12px; height: 12px; }
.tablita__mov--sube { color: var(--good); }
.tablita__mov--baja { color: var(--danger); }

.tablita__club { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tablita__pj { color: var(--text-muted); text-align: right; }
.tablita__pts { font-weight: 700; color: var(--text-primary); text-align: right; }

.tablita__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  padding-top: var(--sp-5);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.tablita__pie span { display: inline-flex; align-items: center; gap: var(--sp-3); }
.tablita__pie i {
  width: 3px; height: 10px;
  border-radius: var(--r-pill);
  background: currentColor;
}

/* --------------------------------------------------------------------------
   REPLIEGUE
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .portada__grilla { grid-template-columns: minmax(0, 1fr); }
}

/* Debajo de 1400 el portal entero deja de estar anclado a la ventana y manda
   el documento (ver la Regla del Alto de Ventana en `inicio.css`). Con la
   página scrolleando, dos scrollers internos son dos cajas que atrapan la
   rueda a mitad de camino: se sueltan y las columnas miden lo que miden. */
@media (max-width: 1400px) {
  .home[data-vista='noticias'] .portada { grid-template-rows: none; }
  .portada__ancha,
  .portada__lateral { overflow: visible; margin-right: 0; padding-right: 0; }
}

/* Nada se mueve solo si el sistema pide que no. El pulso se apaga; la cinta la
   apaga `app.css`, que es donde vive desde que la dibujan dos pantallas. La
   rotación de la apertura la corta el script, que lee la misma preferencia. */
@media (prefers-reduced-motion: reduce) {
  .portada__pulso { animation: none; }
}