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

   La cabecera del club ocupa las dos columnas y no una: es la identidad de la
   pantalla, y partida por la mitad quedaría el escudo de un lado y las cifras
   del otro con una canaleta en el medio.
   ========================================================================== */

.equipo {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

.equipo__ficha { grid-column: 1 / -1; }

/* SIN CLUB ELEGIDO no hay plantel ni panel: la ficha —que es el navegador— se
   queda con la pantalla entera. Sin esto quedaría una columna de 340 píxeles
   vacía a la derecha y la grilla de clubes apretada contra el borde. */
.equipo[data-modo='navegar'] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.equipo[data-modo='navegar'] .equipo__ficha { min-height: 0; overflow: hidden auto; }

/* --------------------------------------------------------------------------
   QUIÉN ES
   -------------------------------------------------------------------------- */

.equipo__id {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-5) var(--sp-6);
}

/* El escudo grande y con la plata del sistema cuando hace falta: es el mismo
   problema de siempre —hay clubes de escudo oscuro entero— y la regla ya está
   escrita. 56px porque es la identidad de la pantalla y no una fila de tabla. */
.equipo__escudo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.equipo__quien { min-width: 0; }
.equipo__nombre {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 800;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.equipo__donde {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Las cifras a la derecha y en fila, no apiladas: son cuatro datos cortos que
   se leen de un vistazo, y apilados se comerían el alto de la cabecera. */
.equipo__cifras {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2) var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.equipo__cifra strong {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* El que se va libre en junio es el único dato de la cabecera sobre el que se
   puede hacer algo hoy, y por eso es el único con color. */
.equipo__cifra--libre strong { color: var(--warn); }

/* --------------------------------------------------------------------------
   EL PLANTEL
   --------------------------------------------------------------------------
   La misma cadena de tres renglones que el resto de las pantallas con tabla:
   `main` con el alto acotado, la tarjeta que no se estira y el `min-height: 0`
   que deja encoger a un hijo de flex. Sin los tres, `.table-scroll` colapsa a
   cero y las filas quedan en el DOM sin verse.
   -------------------------------------------------------------------------- */

.equipo__plantel {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.equipo__plantel .table-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}
/* La cabecera se queda quieta: un plantel son treinta y pico de nombres, y la
   fila veinte sin su rótulo encima no se lee. */
.equipo__plantel thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-panel);
}

/* Los anchos van declarados y en porcentaje, que es lo que impide que la tabla
   desborde su columna: una tabla reparte el ancho que su texto pide y el resto
   lo saca por fuera. El nombre se queda con lo que sobra. */
.equipo__plantel .data-table { table-layout: fixed; width: 100%; }
.equipo__plantel .data-table th,
.equipo__plantel .data-table td { overflow: hidden; text-overflow: ellipsis; }
/* En PORCENTAJE, que es lo que impide que la suma se pase en una columna
   angosta. El nombre se queda con lo que sobra —es el único que hay que poder
   leer entero— y las operaciones con lo suyo, que son tres botones. */
/* Re-repartido después de medirlo con la tabla puesta: las dos columnas de
   plata cortaban «US$ 3,7M» a la mitad y el puesto se comía el «mejor de DFC»,
   que son justo los tres datos por los que se abre un club ajeno. El ancho sale
   de la edad y del nombre, que sobraban. */
.equipo__plantel .data-table th:nth-child(1) { width: 4%; }
.equipo__plantel .data-table th:nth-child(2) { width: 17%; }
.equipo__plantel .data-table th:nth-child(3) { width: 8%; }
.equipo__plantel .data-table th:nth-child(4) { width: 7%; }
.equipo__plantel .data-table th:nth-child(5) { width: 8%; }
.equipo__plantel .data-table th:nth-child(6) { width: 10%; }
.equipo__plantel .data-table th:nth-child(7) { width: 11%; }
.equipo__plantel .data-table th:nth-child(8) { width: 10%; }
.equipo__plantel .data-table th:nth-child(9) { width: 9%; }
.equipo__plantel .data-table th:nth-child(10) { width: 16%; }
/* La columna del contrato es la única que a veces dice una frase y no un
   número: al que se le acaba no le queda ningún año que contar. Se parte en dos
   renglones, que es mejor que decir «Se le aca». */
.equipo__plantel .data-table td:nth-child(9) { white-space: normal; }

/* El nombre con su bandera, la misma forma que usa el Mercado: la bandera al
   final porque esta celda se alinea a la izquierda y ahí es donde el nombre
   termina — pegada al principio partiría la columna de nombres en dos. */
.equipo__plantel .quien-de {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
/* Se envuelve: con el mercado abierto son TRES botones —tentarlo, negociar,
   préstamo— y en una sola línea no entran en ninguna columna que deje sitio
   para leer el plantel. Envueltos ocupan dos renglones, que es el alto que la
   fila ya tiene. */
.equipo__plantel .ops {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   EL COSTADO
   -------------------------------------------------------------------------- */

.equipo__lado {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  align-content: start;
  min-height: 0;
  overflow: hidden auto;
}
.equipo__lado > * { min-width: 0; }

.equipo__nota {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.equipo__nota:last-child { margin-bottom: 0; }
.equipo__nota strong { color: var(--text-primary); }

/* --------------------------------------------------------------------------
   LA VENTANA ANGOSTA
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .equipo {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    overflow: auto;
  }
  .equipo__ficha { grid-column: 1; }
  .equipo__lado { overflow: visible; min-height: auto; }
  .equipo__plantel { min-height: 60vh; }
  .equipo__plantel .table-scroll { flex: 0 0 auto; overflow: visible; }
  .equipo__plantel thead th { position: static; }
  .equipo__id { grid-template-columns: auto minmax(0, 1fr); }
  .equipo__cifras { grid-column: 1 / -1; justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   LO QUE CONTESTÓ EN LA REUNIÓN
   --------------------------------------------------------------------------
   Ocupa el sitio del botón de tentar y no una columna propia: son dos momentos
   de la misma cosa —todavía no lo citaste, o ya te dijo algo— y una columna
   vacía en veintiocho de treinta filas no es una columna.

   Los tres colores son los del resto del juego, y la palabra va siempre: el
   color no puede ser el único portador (`DESIGN.md`).
   -------------------------------------------------------------------------- */
.reunion {
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.reunion[data-r='quiere'] { color: var(--good); }
.reunion[data-r='escucha'] { color: var(--warn); }
.reunion[data-r='no'] { color: var(--text-disabled); }
/* Que se hayan enterado se dice en arcilla aunque él haya dicho que sí: es la
   parte que te CUESTA, y es lo que hay que ver de un vistazo al volver. */
.reunion[data-filtrado='si'] { color: var(--danger); }

/* Dónde rendiría mejor, debajo del puesto donde lo ponen. En cal porque es una
   oportunidad —alguien mal aprovechado en su club es exactamente lo que se
   viene a buscar acá— y chico porque es el segundo dato de la celda, no el
   primero. */
/* En la leyenda del panel va DENTRO de la frase, no en un renglón aparte. */
.equipo__nota .pos-mejor { display: inline; margin: 0; font-size: inherit; }

.pos-mejor {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  color: var(--good);
}

/* --------------------------------------------------------------------------
   EL NAVEGADOR
   --------------------------------------------------------------------------
   Debajo de la identidad del club y separado por la línea del sistema: no es
   parte de quién es el club, es cómo se llega a otro. Los tres campos en fila
   porque son una sola frase —país, liga, club— y el del club se lleva el ancho
   que sobra, que es el que tiene nombres largos.
   -------------------------------------------------------------------------- */
.equipo__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: end;
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.equipo__campo {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
  flex: 0 1 12rem;
}
.equipo__campo select { width: 100%; }

/* LOS CLUBES DE LA LIGA, todos a la vez. Era un tercer desplegable, y un
   desplegable de veinte renglones de texto tira a la basura las 828 imágenes
   que el juego ya tiene: un club se reconoce por su escudo antes que por su
   nombre. Además esconde la lista justo cuando la tarea es compararla.

   Se aprieta a la altura de tres filas CUANDO hay un club abierto —abajo está
   el plantel, que es lo que viniste a leer— y se suelta entera cuando no,
   porque ahí el navegador ES la pantalla. */
.equipo__clubes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  max-height: 8.5rem;
  overflow: hidden auto;
}
.equipo[data-modo='navegar'] .equipo__clubes { max-height: none; overflow: visible; }

/* EN MODO NAVEGADOR LAS TARJETAS CRECEN, y no es decoración: ahí la grilla es
   la pantalla entera, así que apretarlas contra el borde de arriba dejaría dos
   tercios de la vista vacíos y el escudo —que es cómo se reconoce un club— del
   tamaño de un ícono de tabla. Con el club abierto vuelven a ser una tira
   angosta, porque ahí lo que se vino a leer es el plantel. */
.equipo[data-modo='navegar'] .equipo__clubes {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--sp-3);
}
.equipo[data-modo='navegar'] .club-chip {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md);
}
.equipo[data-modo='navegar'] .club-chip__escudo { width: 30px; height: 30px; --halo: 0.54px; }
/* Los nombres se parten en dos renglones en vez de cortarse con puntos
   suspensivos: «Estudiantes de La Plata» y «Gimnasia y Esgrima La Plata» son
   dos clubes distintos y con puntos suspensivos son el mismo. */
.equipo[data-modo='navegar'] .club-chip__nombre {
  white-space: normal;
  line-height: var(--lh-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.club-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  /* EL COLOR DEL CLUB ES UN TINTE Y NO UNA FRANJA. Primero fue una barra
     gruesa al canto, y sobraba por dos motivos: al lado del escudo —que ya
     dice de qué club es la tarjeta— veinte barras de color compiten con lo
     único que hay que mirar, y una barra de color a un costado de una tarjeta
     es la marca de fábrica de la interfaz que nadie diseñó.

     Diluido al 12 % sobre la pizarra, el color hace lo que tenía que hacer
     —que Boca y Racing no sean la misma tarjeta gris— sin pelearle al escudo.
     Y sobre un fondo oscuro, un 12 % de CUALQUIER color sigue siendo oscuro:
     el texto conserva su contraste sin tener que medir club por club. */
  background: color-mix(in srgb, var(--franja, transparent) 12%, var(--bg-panel));
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.club-chip:hover {
  background: color-mix(in srgb, var(--franja, transparent) 24%, var(--bg-raised));
  color: var(--text-primary);
}
.club-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* El que estás mirando, marcado por tres cosas y no sólo por el color: borde
   claro, negrita y el tinte de su club subido. Es la regla de siempre —el color
   no puede ser el único portador— y acá pesa el doble, porque las veinte
   tarjetas ya están teñidas. */
.club-chip[aria-current] {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--franja, transparent) 28%, var(--bg-raised));
  color: var(--text-primary);
  font-weight: 600;
}

.club-chip__escudo { width: 22px; height: 22px; --halo: 0.4px; object-fit: contain; }
.club-chip__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El tuyo lleva rótulo porque es el único que NO abre esta pantalla: se va a
   Plantilla, que es donde el plantel propio se ve entero y sin niebla. */
/* En NARANJA y no en apagado, por las dos razones a la vez. La de sistema: el
   naranja es el color de TU CLUB, y esta etiqueta no dice un estado ni algo
   pulsable, dice de quién es la tarjeta, que es exactamente para lo que existe
   el token. Y la medida: en apagado daba 2,04:1 sobre la tarjeta, contra un
   piso de 4,5 — o sea que el único rótulo que distingue tu club entre
   veintidós era el menos legible de la pantalla. En naranja da 5,64. */
.club-chip__tuyo {
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tuyo);
}