/* ==========================================================================
   El Camino DT — Las ligas del mundo
   --------------------------------------------------------------------------
   Cero tokens nuevos. Dos piezas: la portada con los dos mandos, y la tabla de
   la división elegida.

   POR QUÉ VUELVE A HABER UN TECHO DE ANCHO. Lo tenía en 1240px, se lo sacamos
   cuando la pantalla mostraba una tabla del mundo de siete columnas —ahí el
   ancho era contenido— y vuelve ahora que hay UNA tabla de nueve columnas.

   No es una vuelta atrás por comodidad: una tabla de clasificación se lee a lo
   LARGO de la fila, del club a sus puntos, y cada píxel que se estira esa fila
   es un píxel que el ojo tiene que recorrer para saber si el 54 de la derecha
   es de Bolívar o del de abajo. A 1900px la columna de club se lleva mil y
   pico y los nueve números quedan a un palmo. El techo no desperdicia la
   pantalla: la usa para no arruinar la lectura.
   ========================================================================== */

.ligas {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
}

/* La portada y los mandos, en una tarjeta. El título es el de la PANTALLA y
   por eso conserva su tamaño de portada: el rótulo magenta nombra tarjetas, y
   ésta no es una sección más, es su presentación. */
.ligas__portada { gap: var(--sp-5); }

.ligas__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
}

.ligas__titulo {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.ligas__sub {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  max-width: 68ch;
}

/* EN UNA VENTANA BAJA, LA PORTADA CEDE PRIMERO. Es la única pantalla del juego
   que ni entraba ni se soltaba: barriendo las diecisiete a 1280×720 con las
   animaciones terminadas, dieciséis daban cero de scroll y ésta cuarenta —y
   ciento veinte a 640—. La tabla ya tiene su techo (`--alto-tabla`, que lo
   calcula el guion) pero ese techo tiene un PISO de 220px, y por debajo de unos
   760px de ventana el piso gana y lo que sobra se lo come la página.

   Lo que cede es la portada, que son 166px de los que la mitad es aire y una
   bajada que dice lo mismo que el título: entre perder el subtítulo y perder
   cinco renglones de tabla, en una pantalla que existe para mirar tablas no hay
   discusión. El quiebre va por ALTO y no por ancho, porque el defecto tampoco
   dependía del ancho: a 1600×720 y a 1920×720 daba los mismos cuarenta.

   Medido después: 0 de scroll a 1280×720, a 1600×720 y a 1920×720 —el defecto
   entero—, y a 640 baja de 120 a 73, que es una ventana en la que Club y Carrera
   ya se sueltan enteras por su propio quiebre de alto. */
@media (max-height: 780px) {
  .ligas { gap: var(--sp-4); padding: var(--sp-4); }
  .ligas__portada { gap: var(--sp-4); }
  .ligas__sub { display: none; }
  .ligas__titulo { font-size: var(--fs-xl); }
}

/* --------------------------------------------------------------------------
   LOS DOS MANDOS
   --------------------------------------------------------------------------
   Uno al lado del otro y del mismo ancho, porque son dos pasos de una misma
   elección y ninguno manda sobre el otro. Anchos y no estirados hasta el borde:
   un desplegable que cruza la tarjeta entera parece un campo de texto, y acá
   sobra sitio de sobra a la derecha.
   -------------------------------------------------------------------------- */

.ligas__mandos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.mando-liga {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  /* El de país tiene que entrar «Estados Unidos» y el de división «LaLiga
     Hypermotion»; con un ancho propio se ven los dos completos y no bailan de
     tamaño al cambiar de país, que es lo que hace `max-content`. */
  flex: 0 1 260px;
}

/* El desplegable ocupa su mando entero. Es el mismo control de la pizarra del
   partido y de la previa —misma clase, mismo `controles.js`— porque elegir un
   país y elegir una estrategia son el mismo gesto. */
.mando-liga .desp { width: 100%; }

/* El mando de la división no tiene ancho fijo: lo mide su contenido, que va de
   «Liga 2» a «LaLiga Hypermotion». Un ancho propio lo dejaría con la mitad del
   botón vacía en la mayoría de los países. */
.mando-liga:has(.segmented) { flex: 0 0 auto; }

/* Los botones se alinean con el desplegable de al lado, que es más alto que un
   `.segmented__btn` suelto. */
.mando-liga .segmented { min-height: 34px; }

/* --------------------------------------------------------------------------
   LA TABLA
   -------------------------------------------------------------------------- */

.liga { min-width: 0; }

/* UN SOLO SCROLL, Y ES EL DE LA TABLA.
   --------------------------------------------------------------------------
   Con un techo de alto en porcentaje de ventana, la página se bajaba TAMBIÉN:
   dos barras una al lado de la otra, y la rueda del mouse haciendo una cosa
   distinta según dónde estuviera el puntero. Es de las cosas que peor se
   sienten y que una captura fija no muestra.

   El techo LO PONE EL GUION, no esta hoja, y es la misma solución que usa la
   cancha del día de partido con `--sin-campo`. La razón es que la cuenta no se
   puede escribir en CSS sin mentir: entre la barra de arriba y el `main` hay
   diez píxeles que no son de nadie —ni margen del `header`, ni margen del
   `main`, ni relleno del `body`— y restar tokens deja justo esa diferencia,
   que alcanza para dibujar la segunda barra. Medir el sitio REAL de la tabla
   dentro de la ventana no tiene ese problema, y además se corrige solo el día
   que la cabecera cambie de alto.

   Acá queda sólo el respaldo: sin guion, la tabla mide lo que mide y la página
   se baja, que es peor pero no es una pantalla rota. */
.liga { display: flex; flex-direction: column; min-height: 0; }

.liga > .table-scroll {
  flex: none;
  min-height: 0;
  max-height: var(--alto-tabla, none);
  overflow: auto;
}

.club-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.club-cell span:not(.tendencia) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   LA TRAYECTORIA DEL CLUB
   --------------------------------------------------------------------------
   ▲ el que rinde por encima de su nivel histórico, ▼ el que se viene hundiendo,
   y nada para el 58 % que está en su sitio. Es lo único de esta tabla que no
   habla del año que mirás sino de los anteriores.

   EL `:not(.tendencia)` DE ARRIBA NO ESTÁ DE ADORNO: la regla de al lado le da
   `text-overflow: ellipsis` y `white-space: nowrap` a TODO `span` de esta celda,
   y la flecha es un span. Sin excluirla, la marca entra en la cuenta del recorte
   del nombre y en un club de nombre largo desaparece justo cuando la fila más
   la necesita — que es el defecto que no da error.

   NO LLEVA `margin-left`: la celda es flex con `gap`, así que el aire ya está
   puesto y agregarle margen lo duplicaría sólo acá. */
.tendencia {
  flex: none;
  font-size: 0.72em;
  line-height: 1;
  /* El color acompaña a la flecha; no la reemplaza. La forma sola ya distingue
     alza de caída, que es lo que pide no depender del color. */
  color: var(--good);
}

/* `--danger` y no `--bad`: ese token NO EXISTE, y escribirlo no rompe nada a la
   vista —la declaración entera se descarta y la flecha hereda el color del
   texto, o sea que las dos tendencias se pintan igual—. Lo cazó `revisar.mjs`,
   que es para lo que está. Los semánticos de esta casa son `--good`, `--warn`
   y `--danger`. */
.tendencia[data-tendencia='caida'] { color: var(--danger); }

/* Los trofeos del año. Uruguay tiene cuatro y Brasil uno: la lista se envuelve
   en vez de obligar a la fila a medir siempre lo mismo. Vacía en la segunda
   división, y ahí no deja hueco. */
.trofeos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-3) 0;
  list-style: none;
}

.trofeos:empty { display: none; }

.trofeo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.trofeo__club {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

/* La leyenda va arriba de la nota y las dos abajo de la tabla, con más aire
   entre la tabla y ellas que entre ellas dos: son un pie, no dos pies. */
.liga > .zone-legend { margin-top: var(--sp-5); }

.ligas__nota {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.ligas__nota:empty { display: none; }

/* --------------------------------------------------------------------------
   ANGOSTO
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .ligas { padding: var(--sp-4); }
  /* Los mandos se apilan y cada uno se lleva el renglón: dos desplegables de
     260px no entran uno al lado del otro, y medio desplegable no se lee. */
  .mando-liga { flex: 1 1 100%; }
}