/* ==========================================================================
   El Camino DT — las divisiones inferiores
   --------------------------------------------------------------------------
   Dos columnas, como el resto del juego: la tabla que se lee y el panel que
   explica. Cero tokens nuevos — todo sale de `tokens.css`.
   ========================================================================== */

/* LOS TRES RENGLONES QUE HACEN QUE LA TABLA SE VEA, y sin los cuales no se ve
   NADA: `.table-scroll` es `flex: 1 1 0` con `overflow: auto`, así que necesita
   un padre con el alto acotado. Sin la cadena entera —`main` que toma el alto
   que le queda a la página, tarjeta que no se estira, y el `min-height: 0` que
   deja encoger a un hijo de flex— el contenedor colapsa a CERO y las
   dieciséis filas quedan en el DOM, con su alto de 775 px, recortadas a nada.

   Se vio abriendo la pantalla: el rótulo contaba «16 juveniles» arriba de una
   tabla vacía. Es la misma familia de trampa que ya está anotada para la
   pantalla de entrenamiento, y se copia de `.plantel`, que la resolvió antes. */
.inferiores {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

.inferiores__lista { min-height: 0; }
.inferiores__lista .table-scroll { flex: 1 1 0; min-height: 0; overflow: auto; }

.inferiores__lado {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  min-height: 0;
}

/* Los dos botones de una fila, juntos y sin estirarse: la fila es densa y una
   acción que ocupa media pantalla la rompe. */
.inferiores__acciones {
  display: flex;
  gap: var(--sp-1);
  justify-content: flex-end;
  white-space: nowrap;
}

/* El único dato teñido de la tabla, y a propósito: es el que obliga a decidir
   hoy. En ámbar porque es un plazo, que es el trabajo que el ámbar ya hace en
   el vencimiento de una oferta. */
.inferiores__ultimo { color: var(--warn); }

.inferiores__sevan {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-1);
}

.inferiores__sevan li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 3px 0;
  border-top: 1px solid var(--line-hairline);
  font-size: var(--fs-xs);
}

/* Las notas del panel de al lado. El sistema no tiene una clase de párrafo
   explicativo dentro de tarjeta —`stub__body` es del estado vacío— así que se
   declara acá y no se le inventa un token. */
.inferiores__nota {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.inferiores__aviso {
  margin: var(--sp-2) 0 0;
  min-height: 1.2em;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* En pantalla angosta el panel de al lado pasa abajo — y con él se va también
   el alto acotado. Los tres renglones de arriba son los que hacen que la tabla
   entre en la pantalla SIN que la página scrollee; apilada en una columna eso
   se vuelve en contra: la tabla y las dos tarjetas se reparten el alto de la
   ventana y la tabla queda mostrando fila y media. Acá manda la página: se
   suelta el alto y se scrollea, que es lo que un ancho chico pide. */
@media (max-width: 1100px) {
  .inferiores {
    grid-template-columns: minmax(0, 1fr);
    flex: 0 0 auto;
    min-height: auto;
  }
  /* La tabla deja de repartirse el alto de la ventana y pide el suyo. Pero
     conserva su `overflow: auto` —que es lo que tenía y no se toca—: con
     `visible`, sus nueve columnas empujan la PÁGINA de costado en cuanto la
     ventana se angosta, y una tabla que se lee de izquierda a derecha
     arrastrando la pantalla entera no se lee. Medido a 800 de ancho: 16 px de
     desborde horizontal con `visible`, cero con `auto`. `.plantel`, que resolvió
     esto antes, hace exactamente lo mismo en su regla de 900. Y no aparece
     barra vertical dentro de la tabla porque el alto ya es el del contenido. */
  .inferiores__lista .table-scroll { flex: 0 0 auto; }

  /* Y EL ARMAZÓN TAMBIÉN SE SUELTA, o soltar el `main` no sirve de nada.
     `plantel.css` —que esta pantalla carga por sus piezas— trae el marco de
     alto fijo en un selector de elemento: `body { height: var(--alto-ventana);
     overflow: hidden }`. Lo suelta en su propia regla angosta, pero a 900, no
     a 1100. Entre esos dos números quedaba una franja donde el `main` ya crecía
     con el contenido y el `body` seguía midiendo el alto de la ventana: la
     tabla se dibujaba entera, se recortaba en el borde, y como el `overflow`
     del `body` se propaga a la ventana cuando el `html` es `visible`, no había
     barra ni rueda que llegara a lo de abajo.

     MEDIDO a 720 de alto, en una carrera de Boca, con las dieciséis filas
     de la camada: a 899 no sobraba nada; a 901 quedaban 666 px sin ver, a
     1024 649 y a 1099 669. A 1101 vuelven las dos columnas y el marco fijo
     es el correcto otra vez. Los tres renglones de arriba escriben la
     intención —«acá manda la página»— y éste es el que la cumple.

     Va acá y NO en `plantel.css`: ese marco es el de la pantalla del plantel,
     que a este ancho sigue queriendo su alto fijo. Es la misma decisión que se
     tomó para `entrenamiento.css`. */
  body { height: auto; min-height: var(--alto-ventana); overflow: visible; }
}

/* --------------------------------------------------------------------------
   LAS DOS ACCIONES DE LA FILA
   --------------------------------------------------------------------------
   «Subir» dejó de ir con relleno pleno de acento. No es un cambio de gusto: el
   juego ya había tomado esta decisión tres veces sin escribirla —el plantel
   tiene setenta controles en filas y ninguno relleno, el mercado treinta y
   siete, el vestuario treinta y cuatro— y acá quedaban dieciséis, uno por
   renglón, formando una columna de violeta que pesaba más que los datos que la
   fila vino a mostrar. El relleno de acento es para LA acción de una pantalla,
   no para una que se repite una vez por fila.

   «Soltar» descarta a un juvenil para siempre y no vuelve. No lleva rojo pleno
   —sería un botón de peligro repetido dieciséis veces, que es el mismo error
   con otro color— pero lo dice en cuanto lo apuntás. */
[data-suelta]:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* LA FILA CON UN CONTROL ADENTRO PIDE SU ALTO ACÁ.
   La base de `.data-table` son 32 px —el ritmo denso, medido de FM26— y en esta
   tabla no entra: su fila lleva un botón de acción de 34 px, y a 32 el control queda
   pegado al borde de arriba y al de abajo. Se declara la excepción donde vive y
   no con una regla automática en `app.css`: probada, `tr:has(button)` se llevaba
   puestas las tablas de plantel y mercado, que tienen una pastilla de 20 px y
   entran en 32 de sobra. */
.inferiores__lista .data-table tbody td { height: var(--fila-tabla-control); }


/* --------------------------------------------------------------------------
   EL RÓTULO DE LA CABECERA, EN EL TELÉFONO
   --------------------------------------------------------------------------
   `app.css` le pone `white-space: nowrap` a lo que acompaña al título de un
   panel, y tiene razón para lo que esa regla protege: ahí suele haber una
   medida corta —«4-3-1-2», «5 CAMBIOS»— y «4-3-1-2» partido en dos renglones
   deja de ser una formación.

   Esta pantalla no pone una medida, pone UNA FRASE: «· 16 juveniles · 4 en su último año»
   —304 px—, y una frase con `nowrap` en una ventana de teléfono no se
   estrecha ni dobla: se sale, y empuja la página entera.

   Así que acá el rótulo dobla. Va en esta hoja y no en `app.css` porque la
   regla compartida sigue siendo la correcta para las pantallas que ponen una
   medida; lo que hay son tres excepciones —ésta, `entrenamiento` y `copa`— y es el
   número que hay que mirar el día que aparezca una cuarta.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .panel__head > .label:not(:first-child) { white-space: normal; }
}