/* ==========================================================================
   El Camino DT — el vestuario
   --------------------------------------------------------------------------
   Comparte la retícula de dos columnas con las inferiores —`.inferiores` en
   `inferiores.css`— porque son la misma pantalla con otra tabla. Acá sólo vive
   lo que es de ésta. Cero tokens nuevos.
   ========================================================================== */

.vestuario {
  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);
}

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

/* Los cuatro escalones. Sólo los dos de arriba llevan color: teñir los cuatro
   sería pintar la tabla entera y perder lo único que hay que ver de un
   vistazo, que es quiénes mandan. */
.vestuario__escalon { font-size: var(--fs-2xs); letter-spacing: 0.02em; }
.vestuario__escalon--referente { color: var(--good); font-weight: 700; }
.vestuario__escalon--respetado { color: var(--text-secondary); }
.vestuario__escalon--uno-mas,
.vestuario__escalon--a-prueba { color: var(--text-muted); }

/* La cinta: un cuadradito con la C, del color de lo que elegiste. */
/* La cinta va AL LADO del nombre y no debajo. `.team` —el enlace del club y del
   futbolista, en `app.css`— es `display: flex`, o sea un bloque que se lleva el
   ancho entero de la celda y empuja a la C al renglón siguiente. Acá se le pide
   que sea de línea, que es lo que corresponde cuando comparte celda con otra
   cosa; el `flex` de adentro —el recorte del nombre— sigue funcionando igual. */
.vestuario__nombre { display: flex; align-items: center; }
.vestuario__nombre .team { display: inline-flex; min-width: 0; }

/* La C va al piso de la escala (13px), que es el mínimo que `tokens.css`
   declara para etiquetas micro: estuvo en 10px y era la única letra del juego
   por debajo del piso. El cuadradito creció a 18 para que la letra respire. */
.vestuario__cinta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--text-primary);
  font-size: var(--fs-2xs);
  font-weight: 700;
  vertical-align: middle;
}

.vestuario__acciones { text-align: right; white-space: nowrap; }

.vestuario__clima {
  display: grid;
  gap: var(--sp-1);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-hairline);
}

.vestuario__clima-palabra {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.vestuario__datos { margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-2); }
.vestuario__datos > div { display: flex; justify-content: space-between; gap: var(--sp-2); }
.vestuario__datos dd { margin: 0; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .vestuario {
    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 siete 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: 73 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. */
  .vestuario__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 los treinta y seis del
     plantel: a 899 no sobraba nada; a 901 quedaban 1.570 px sin ver, a 1024
     1.553 y a 1099 1.573 —una pantalla y media de gente—. 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; }
}

/* 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: cada fila lleva un `.action` de 34, el mismo botón que obliga
   a lo mismo en inferiores. 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. */
.vestuario__lista .data-table tbody td { height: var(--fila-tabla-control); }