/* ==========================================================================
   El Camino DT — el equipo de reserva
   --------------------------------------------------------------------------
   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`.
   ========================================================================== */

/* La cadena de tres renglones que hace que la tabla se vea, copiada de
   `.inferiores` y de `.plantel`, que la resolvieron antes: `.table-scroll` es
   `flex: 1 1 0` con `overflow: auto`, así que necesita un padre con el alto
   acotado. Sin `main` tomando el alto que le queda a la página, sin la tarjeta
   que no se estira y sin el `min-height: 0` que deja encoger a un hijo de flex,
   el contenedor colapsa a CERO: las filas quedan en el DOM y no se ve ninguna.
   Es la trampa que este proyecto ya pisó dos veces.

   TRES COLUMNAS Y NO DOS, y el reparto es la pantalla. La ancha era una pila de
   tres tarjetas —el torneo, la lista y los castigados— con la lista tercera,
   con scroll adentro y con la columna scrolleando por fuera: dos barras para
   llegar a lo único que se decide acá. Ahora la lista se queda sola con la
   columna ancha, y lo que se lee de reojo —el plantel de abajo, la explicación,
   el torneo— cede ANCHO en vez de alto.

   Las dos columnas de la derecha tienen ancho fijo por el mismo motivo que en
   el resto del juego: son listas de rótulo y número, y un ancho elástico las
   deja con renglones de largo distinto en cada ventana. Lo que se estira es la
   tabla de futbolistas, que es la que tiene nombres. */
.reserva {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px 300px;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

/* LA LISTA SE COME EL ALTO Y ES LO ÚNICO QUE SCROLLEA. La tarjeta es una
   columna flex que ocupa su celda entera; adentro, la cabecera, el pedido y los
   dos botones miden lo que miden y `.table-scroll` se queda con el resto.

   `min-height: 0` en la tarjeta es el de siempre y sigue siendo imprescindible:
   sin él un hijo de flex no puede encoger por debajo de su contenido, la
   tarjeta crece hasta donde quiera la tabla y el scroll se lo lleva la página
   entera — que es lo que este sistema no hace en ninguna pantalla. */
.reserva__ficha {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.reserva__ficha .table-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

/* Y LA CABECERA DE LA TABLA SE QUEDA QUIETA. Con cuarenta y pico de elegibles
   en un solo scroller, la fila veinte no se puede leer si el rótulo de la
   columna ya se fue para arriba: «19» sin «Edad» encima no es un dato. */
.reserva__ficha thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-panel);
}

/* `hidden auto` y no `auto`: una barra HORIZONTAL en una columna de 340px es
   siempre un defecto de reparto —algo que no entra donde lo pusieron— y no una
   forma de leerlo. Que no exista obliga a que el contenido quepa, que es lo que
   corresponde. La vertical se queda: en una ventana baja, la tabla de quince
   equipos no entra y desplazarla es lo razonable. */
.reserva__lado {
  display: grid;
  /* `minmax(0, 1fr)` Y NO LA PISTA `auto` QUE TRAE UNA REJILLA. Una pista
     automática se dimensiona por el contenido MÁS ANCHO que lleva dentro, así
     que la tabla de quince equipos —307px de mínimo— estiraba la columna por
     encima de los 324 que la retícula le había dado y las tarjetas salían más
     anchas que su propia columna. Con `minmax(0, …)` la pista puede achicarse y
     el que se acomoda es el contenido, que es lo que corresponde. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  align-content: start;
  min-height: 0;
  overflow: hidden auto;
}

/* La columna del torneo no tiene nada que decidir, así que sus tarjetas miden
   lo que miden y la tabla de la zona —quince filas— entra entera sin scroller
   propio. Si la ventana es muy baja, scrollea la columna: una barra, y en la
   parte que se mira de reojo. */
.reserva__torneo .table-scroll { overflow: visible; }
.reserva__torneo .reserva__tira { border-top: 0; margin-top: 0; padding-top: 0; }

/* --------------------------------------------------------------------------
   LOS QUE MANDASTE ABAJO
   --------------------------------------------------------------------------
   Una línea por futbolista: el puesto, el nombre, el nivel y el botón en el
   primer renglón, y debajo por qué está ahí y cuánto le está costando. No es
   una tabla porque no se compara nada entre filas — se lee de a uno, y la
   decisión es sobre él solo.
   -------------------------------------------------------------------------- */
.abajo { display: grid; gap: var(--sp-2); }
.abajo__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--bg-row);
}
.abajo__nombre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 600;
}
/* El pie ocupa las cuatro columnas del renglón de arriba y envuelve solo: son
   cuatro datos cortos y en una columna angosta caen en dos líneas sin que haya
   que decidir cuál se va. */
.abajo__pie {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   EL TORNEO
   -------------------------------------------------------------------------- */

/* Las cuatro cifras del torneo en fila, no apiladas. Es la misma `.stat-row`
   del panel del grupo —dos por renglón allá, cuatro en una fila acá— porque es
   la misma clase de dato: un rótulo chico y un número, sin barras ni gráficos.
   En fila porque son cuatro y se leen de un vistazo; apiladas se comerían
   media pantalla para decir lo mismo. */
.reserva__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
}
.reserva__cifras .stat-row { display: flex; justify-content: space-between; gap: var(--sp-3); }
.reserva__cifras dt { font-size: var(--fs-sm); color: var(--text-secondary); }
.reserva__cifras dd { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 600; }

/* La tira de partidos: seis renglones de una línea. No es una tabla porque no
   se compara nada entre filas — se lee una y se sigue. */
.reserva__tira {
  display: grid;
  gap: var(--sp-1);
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.reserva__part {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
/* La fecha de hoy, marcada: es la única fila de la tira sobre la que todavía se
   puede hacer algo —cambiar la lista— y sin marca se pierde entre las jugadas. */
.reserva__part--hoy { background: var(--bg-hover); }
.reserva__part-rival { flex: 1 1 auto; min-width: 0; color: var(--text-primary); }
.reserva__part-res { font-variant-numeric: tabular-nums; font-weight: 600; }
.reserva__part-res[data-band='good'] { color: var(--good); }
.reserva__part-res[data-band='bad'] { color: var(--danger); }
.reserva__falto {
  font-size: var(--fs-2xs);
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* La tabla del costado: la misma `.data-table` con menos aire. Y tu club
   resaltado, que es lo único que se busca en una tabla de quince. */
.reserva__mini { font-size: var(--fs-sm); }
.reserva__mini td, .reserva__mini th { padding: var(--sp-1) var(--sp-2); }
.reserva__mini .is-mio td { background: var(--bg-hover); color: var(--text-primary); }

/* --------------------------------------------------------------------------
   LA LISTA
   -------------------------------------------------------------------------- */

/* EL PEDIDO. Es la única frase de esta pantalla que puede estar en rojo, y por
   eso el rojo dice algo: mientras esté, el sábado se pierde 0-3.

   Y EL ÁMBAR DICE OTRA COSA, que es por lo que hay dos colores y no uno: el
   equipo se presenta y juega, pero sale sin arquero y le entran más del doble.
   Pintarlo de rojo sería mandar al DT a buscar el botón que arregla lo que no
   está roto —hay clubes con un solo arquero, y ahí no hay botón—; dejarlo del
   color del texto sería esconder el partido más caro de la temporada. */
.reserva__pedido {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  padding: var(--sp-3) 0;
}
.reserva__pedido[data-band='bad'] { color: var(--danger); }
.reserva__pedido[data-band='warn'] { color: var(--warn); }
.reserva__pedido:empty { display: none; }

.reserva__botones { display: flex; gap: var(--sp-2); padding-bottom: var(--sp-3); }

/* Los inscriptos, marcados. No es decoración: la tabla trae a los cuarenta
   elegibles y la lista son veintitrés, así que sin la marca hay que leer la
   columna de estado fila por fila para saber qué armaste. */
/* Y la columna del estado envuelve. Es la única de la tabla que lleva una
   frase y no un dato, y `nowrap` —que es lo correcto para las otras seis— la
   convertía en la columna más ancha de todas. */
.reserva__ficha td.label { white-space: normal; }
.reserva__ficha .is-dentro td { background: var(--bg-hover); }
.reserva__mayor {
  font-size: var(--fs-2xs);
  color: var(--warn);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.reserva__abajo { color: var(--warn); }

.reserva__nota {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.reserva__aviso {
  padding-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.reserva__aviso:empty { display: none; }

/* CUÁNTO LLEVA ABAJO, que es el dato que obliga a decidir. Va en ámbar por lo
   mismo que el «le queda un año» de la cantera y el vencimiento de una oferta:
   el ámbar de este sistema nombra plazos, no desgracias. Y sólo se enciende
   pasadas unas cuantas fechas — un futbolista que bajó el lunes no es todavía
   un problema, y teñir el número desde el primer día lo convertiría en uno. */
.reserva__lleva--largo { color: var(--warn); }

/* El ánimo se lee con la misma barra que la tabla del plantel: es la misma
   escala y no puede tener dos dibujos, o el DT compara dos cosas que se ven
   distinto creyendo que son distintas. `.barra` sale de `plantel.css`, que esta
   pantalla ya carga.

   Con la palabra al lado, que allá no está y acá sí: en el plantel la barra
   vive en una tabla de veinte columnas donde el texto sería ruido y el `title`
   alcanza. Acá el ánimo es LA columna —es lo que se viene a mirar— y obligar a
   pasar el ratón por encima para leer el único dato que se mueve solo sería
   esconderlo. */
.reserva__animo { display: flex; align-items: center; gap: var(--sp-3); }
.reserva__animo .barra { width: 56px; flex: none; }
.reserva__animo-txt { font-size: var(--fs-2xs); color: var(--text-muted); }

.reserva__acciones {
  display: flex;
  gap: var(--sp-1);
  justify-content: flex-end;
  white-space: nowrap;
}

/* El panel del grupo: dos cifras y una frase. No es un tablero de KPIs —eso lo
   rechaza DESIGN.md— son las dos escalas que esta decisión mueve, dichas con
   las mismas palabras que usa la pantalla de vestuario. */
.reserva__clima { display: grid; gap: var(--sp-3); }
.reserva__clima .stat-row { display: flex; justify-content: space-between; gap: var(--sp-4); }
.reserva__clima dt { font-size: var(--fs-sm); color: var(--text-secondary); }
.reserva__clima dd { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 600; }

/* Un escalón intermedio: por debajo de 1360 las tres columnas dejan a la tabla
   de futbolistas con menos de 600px y sus seis columnas empiezan a envolver.
   Cae primero la del torneo, que es la que menos se mira, y se va debajo de la
   del medio — no desaparece, se acomoda. */
/* LAS DOS COLUMNAS DE LA DERECHA SON UNA SOLA CAJA CUANDO HACE FALTA. El
   envoltorio existe SÓLO para esto y por eso es `display: contents` mientras
   sobra ancho: la retícula ve las dos columnas y el envoltorio no está.

   El primer intento fue moverlas con `grid-row` y salió mal de una forma que
   vale escribir: la del torneo lleva las DOS clases —`.reserva__lado` y
   `.reserva__torneo`—, así que la regla de `.reserva__lado`, que viene después
   y pesa lo mismo, le ganaba a la suya. Las dos terminaban en la fila 1, la
   lista caía en el hueco que quedaba y medía 201px: cero futbolistas a la
   vista. Con el envoltorio no hay dos reglas peleando por la misma caja.

   Por debajo de 1360 la tabla de futbolistas se queda con menos de 600px y sus
   seis columnas empiezan a envolver, así que la del torneo se va abajo de la
   otra y las dos comparten una sola barra. */
.reserva__lados { display: contents; }

@media (max-width: 1360px) {
  .reserva { grid-template-columns: minmax(0, 1fr) 340px; }
  .reserva__lados {
    display: grid;
    /* La misma pista acotada que las columnas: sin ella el envoltorio se
       dimensiona por su hijo más ancho y las tarjetas salen 26px más anchas que
       la columna que las contiene. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    align-content: start;
    min-height: 0;
    overflow: hidden auto;
  }
  .reserva__lado { overflow: visible; }
}

@media (max-width: 1080px) {
  /* `align-content: start` y las filas por contenido son lo que hace que esto
     funcione: apiladas, las tres cajas tienen que medir lo que miden y el
     scroll se lo lleva el `main`. Sin eso la retícula reparte el alto de la
     ventana entre las filas, y como las dos de abajo pueden encoger hasta cero
     —`min-height: 0`, que arriba es imprescindible— quedaban en TREINTA
     píxeles con seiscientos de contenido derramando por encima de la siguiente.
     Medido, y no se veía como un error de altura: se veía como dos tarjetas
     pisándose. */
  .reserva {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    overflow: auto;
  }
  /* Con una sola columna el scroll vuelve al `main`: dos columnas apiladas con
     scroll propio cada una son dos barras internas en una pantalla angosta, que
     es justo donde menos sitio hay para descubrirlas. Y la tabla de la lista
     deja de comerse el alto de la ventana: acá manda el documento. */
  .reserva__lados, .reserva__lado {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    min-height: auto;
  }
  .reserva__ficha { min-height: 60vh; }
  .reserva__ficha .table-scroll { flex: 0 0 auto; overflow: visible; }
  .reserva__ficha thead th { position: static; }
}

/* --------------------------------------------------------------------------
   LA AYUDA, PLEGADA
   --------------------------------------------------------------------------
   Cinco párrafos que se leen la primera vez y después ocupan media columna
   todas las demás. `<details>` y no un botón con estado en JS: abrir y cerrar
   ya lo sabe hacer el navegador, con su teclado y su lector de pantalla.
   -------------------------------------------------------------------------- */
.reserva__ayuda > summary {
  cursor: pointer;
  list-style: none;
  margin: 0;
}
.reserva__ayuda > summary::-webkit-details-marker { display: none; }
/* El triángulo es del sistema de iconos y no un glifo: gira al abrir. */
.reserva__ayuda > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid var(--icon-quiet);
  border-bottom: 1.5px solid var(--icon-quiet);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-fast) var(--ease);
}
.reserva__ayuda[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.reserva__ayuda > summary:hover::after { border-color: var(--text-secondary); }
.reserva__ayuda[open] > summary { margin-bottom: var(--sp-4); }

/* --------------------------------------------------------------------------
   LAS DOS TABLAS SE ACOMODAN AL ANCHO QUE TIENEN
   --------------------------------------------------------------------------
   Una tabla no se achica por debajo de su contenido: reparte el ancho que su
   texto le pide y desborda el resto. Medido: la lista pedía 789px dentro de
   602, y la tabla de la zona 307 dentro de 287. Eso salía como barra
   horizontal, y con la barra apagada salía como texto cortado sin avisar.

   `table-layout: fixed` invierte la regla —manda el ancho declarado y no el
   contenido— y con él las celdas de texto pueden recortar con puntos
   suspensivos, que es una señal de que hay más y no un corte al ras.

   Los anchos son de las columnas de DATO, y el nombre se queda con lo que
   sobra: es el único que hay que poder leer entero. */
.reserva__ficha .data-table { table-layout: fixed; width: 100%; }
.reserva__ficha .data-table th,
.reserva__ficha .data-table td { overflow: hidden; text-overflow: ellipsis; }
/* En PORCENTAJE y no en `rem`: con anchos fijos, en una columna angosta la suma
   se pasa del ancho disponible y la tabla vuelve a desbordar — que es
   exactamente lo que se vino a arreglar. En porcentaje siempre suma cien. */
.reserva__ficha .data-table th:nth-child(1) { width: 29%; }
.reserva__ficha .data-table th:nth-child(2) { width: 11%; }
.reserva__ficha .data-table th:nth-child(3) { width: 8%; }
.reserva__ficha .data-table th:nth-child(4) { width: 8%; }
.reserva__ficha .data-table th:nth-child(5) { width: 14%; }
.reserva__ficha .data-table th:nth-child(6) { width: 17%; }
.reserva__ficha .data-table th:nth-child(7) { width: 13%; }

.reserva__mini { table-layout: fixed; width: 100%; }
.reserva__mini th:nth-child(1), .reserva__mini td:nth-child(1) { width: 12%; }
.reserva__mini th:nth-child(3), .reserva__mini td:nth-child(3) { width: 15%; }
.reserva__mini th:nth-child(4), .reserva__mini td:nth-child(4) { width: 17%; }
/* El nombre del club se queda con el resto y recorta: «Estudiantes de La Plata»
   no entra en una columna de 300px al lado de su escudo, y cortarlo en
   «Estudiantes de La…» sigue diciendo cuál es. */
.reserva__mini td.u-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Y LAS TARJETAS DE AL LADO PUEDEN ACHICARSE
   --------------------------------------------------------------------------
   Una caja de rejilla no baja de su `min-content` mientras no se le diga: la
   pista medía 327px y las tarjetas salían 353, 26 por fuera de su propia
   columna. Lo que las empujaba era el rótulo de la cabecera —«PLATENSE · 1
   FUTBOLISTA ABAJO», en una línea que no se parte—, así que además de dejarlas
   encoger hay que dejarlo envolver: recortarlo escondería de qué club es.
   -------------------------------------------------------------------------- */
.reserva__lado > *,
.reserva__lados > * { min-width: 0; }
.reserva__lado .panel__head { flex-wrap: wrap; }
.reserva__lado .panel__head > .label { min-width: 0; text-align: right; }

/* --------------------------------------------------------------------------
   LA CAJA DEL TORNEO
   --------------------------------------------------------------------------
   Tres bloques en una tarjeta, separados por la misma línea que separa la
   cabecera de una tabla. Las cifras van de a dos por renglón —cuatro apiladas
   en una columna de 300px son cuatro renglones para decir lo que se lee de un
   vistazo— y la tabla aprieta su fila: quince equipos son quince renglones, y
   dos píxeles por renglón son treinta de columna.
   -------------------------------------------------------------------------- */
.reserva__caja .reserva__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reserva__bloque {
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.reserva__bloque > .label { display: block; margin-bottom: var(--sp-2); }
.reserva__caja .reserva__mini td,
.reserva__caja .reserva__mini th { padding-top: 2px; padding-bottom: 2px; }
.reserva__caja .reserva__tira { border-top: 0; margin-top: 0; padding-top: 0; }

/* 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 inscribir, 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. */
.reserva__ficha .data-table tbody td { height: var(--fila-tabla-control); }