/* ==========================================================================
   El Camino DT — Ficha del jugador
   --------------------------------------------------------------------------
   Sólo lo que existe en esta pantalla y en ninguna otra: la banda de
   identidad con retrato a sangre, la retícula de cinco columnas, el campo con
   sus roles, y la tira de estado. Todo lo demás sale de app.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   4. CABECERA DEL JUGADOR
   -------------------------------------------------------------------------- */

/* LA BANDA SE TIÑE DEL CLUB, EN DEGRADADO. Decía «plano, no degradado» y entra
   el 20 de agosto de 2026 con la primera captura 1:1 de la ficha de FM26, que
   hace exactamente esto: la cabecera lleva el color del club y se apaga hacia la
   derecha hasta el fondo de página.

   MEDIDO en tres fichas de tres clubes —Bayern, Leipzig y Hearts—: el degradado
   es LARGO y lineal, atraviesa la banda entera y recién se funde con el fondo
   cerca del borde derecho; no es el corte a 320px que usa el chrome. Y el color
   de arranque no es el del club a pleno sino **una mezcla de más o menos un
   cuarto** sobre el fondo oscuro: el rojo del Bayern (#DC052D) llega a la banda
   como #381825. Es un tinte, no un relleno.

   El borde inferior se queda: la banda y el cuerpo siguen siendo dos cosas, y a
   esa mezcla tan baja el degradado solo no alcanza para separarlas.

   `--club-fondo` lo pone `app.js` con `colorDe()` —el color corregido para
   fondo oscuro— y con el club DEL FUTBOLISTA, no el tuyo. */
.player {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
  /* El cuánto lo pone `app.js` en `--club-tinte`, calculado desde la luminancia
     del club: 10 para los claros y 24 para los oscuros. El 12 es sólo el
     respaldo de cuando la ficha se dibuja sin club. */
  --club-tinte: 12;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--club-fondo, transparent) calc(var(--club-tinte) * 1%), var(--bg-chrome)) 0%,
      color-mix(in srgb, var(--club-fondo, transparent) calc(var(--club-tinte) * 0.55%), var(--bg-chrome)) 50%,
      var(--bg-chrome) 100%);
}

/* Sangra de verdad: sin radio, pegado al borde izquierdo de la página y
   estirado hasta el borde inferior de la banda. Un retrato con esquinas
   redondeadas y 16px de aire alrededor no sangra, es una tarjeta con foto. */
.portrait {
  position: relative;
  align-self: stretch;
  min-height: 128px;
  background: var(--ink-800);
  overflow: hidden;
}
.portrait svg { width: 100%; height: 100%; }

/* Paginación dentro del detalle: saltás de jugador sin volver a la lista.
   El detalle que ahorra miles de clics. */
.pager {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  z-index: 2;
}

.identity { display: grid; gap: var(--sp-4); padding-top: var(--sp-2); }

/* Dorsal: pastilla, no texto suelto. */
.squad-no {
  display: grid;
  place-items: center;
  min-width: 24px; height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  color: var(--accent-texto);
  font-size: var(--fs-md);
  font-weight: 700;
}

/* Bloques de datos del lado derecho de la cabecera */
.facts { display: flex; align-items: stretch; gap: var(--sp-7); padding-top: var(--sp-2); }

.fact { display: grid; gap: var(--sp-3); align-content: start; }

.ability { display: grid; gap: var(--sp-3); justify-items: center; }

.tabs { display: flex; align-items: center; gap: var(--sp-6); margin-bottom: -1px; }

.tab {
  position: relative;
  flex: none;
  white-space: nowrap;
  height: 32px;
  font-size: var(--fs-lg);
  font-weight: 600;
  /* Un escalón MÁS CLARO que el apagado, porque estas solapas viven encima de la
     banda teñida del club. MEDIDO contra los 896 clubes: en apagado, 138 de
     ellos dejaban «Datos personales» por debajo del piso —el peor, 4,36 con el
     celeste de Magallanes—. La activa sigue en primario, así que la jerarquía
     no se toca: lo que sube es el piso, no el contraste entre las dos.
     Es la misma regla que en la fila del titular: si el fondo se tiñe, lo que
     va encima acompaña. */
  color: var(--ink-200);
  transition: color var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--text-primary); }
.tab[aria-selected='true'] { color: var(--text-primary); }
.tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   5. CUERPO DE LA FICHA — cinco columnas
   -------------------------------------------------------------------------- */

/* Cinco columnas de tarjetas: el canalón es aire y cada panel se delimita
   con su propio borde. */
/* EL AIRE DE ESTA PANTALLA BAJA DE 12 A 8, y con eso la ficha pasa a tener 26
   píxeles de sobra sobre su techo de 1.000 en vez de dos.

   Salió de una prueba que se descartó —Zalando Sans dejaba la ficha en 1.015— y
   se quedó porque el margen valía por sí solo: con dos píxeles de holgura,
   cualquier renglón que en el futuro mida uno más rompe la pantalla más medida
   del sistema, y romperla es que aparezca una barra de desplazamiento en la
   ficha del futbolista.

   De los tres sitios donde se podía sacar, éste es el único que es de esta
   pantalla: comprimir el eje de la cara habría deshecho la razón por la que se
   eligió, y bajar `--row-h` de 22 a 21 habría hecho más densa cada tabla del
   juego para arreglar una sola. Es la regla de siempre —cuando una pantalla
   necesita sitio se arregla su composición— aplicada a la vertical. Ocho
   píxeles siguen separando las tarjetas sin que se toquen; los doce eran
   holgura, no estructura. */
.report {
  display: grid;
  /* LA ÚLTIMA COLUMNA SON 240 Y NO 210, y los treinta píxeles los pidió una
     palabra: «Temperamental». Las cuatro filas de esa columna son pares de
     etiqueta y pastilla —`.stat-row`, que es flex y no encoge por debajo de su
     contenido—, y la más ancha del vocabulario, «Personalidad · Temperamental»,
     pide 228. Con la columna en 210 se salía, y lo que se veía era una barra de
     desplazamiento horizontal de **28px en la pantalla entera**, a cualquier
     ancho por encima de 1400: medido igual a 1401, 1440, 1600 y 1920. Por
     debajo de 1400 no pasaba, porque ahí la retícula tiene cuatro columnas y
     ésta no existe.

     Por qué no se había visto: DEPENDE DEL DATO. De las ocho personalidades del
     juego sólo «Temperamental» (228) y «Perfeccionista» (219) desbordan; con
     «Leal» la fila pide 176 y entra de sobra. Una ficha de cada cuatro rompía la
     pantalla y las otras tres la dejaban perfecta.

     240 y no `max-content`: medido, `max-content` le da 291 —cincuenta más de
     los que necesita— y se los saca a las tres columnas de atributos, que son
     las que se leen. Con 240 el desborde es cero, ninguna fila se parte en dos
     renglones y el alto del panel no se mueve. */
  grid-template-columns: 258px repeat(3, minmax(190px, 1fr)) 240px;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-page);
}

/* --------------------------------------------------------------------------
   7. PANEL DE POSICIONES
   -------------------------------------------------------------------------- */

/* La cancha de posiciones, con césped como las otras dos. Ver `--campo` en
   `tokens.css`: el video de FM26 a 1:1 muestra el campo verde, y una pizarra
   acá con césped en el plantel y en el entretiempo sería el mismo dibujo con
   dos mundos. */
.pitch {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: repeating-linear-gradient(to right, var(--campo) 0 12.5%, var(--campo-franja) 12.5% 25%);
}

.pos-caption {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding: var(--sp-3) 0 0;
}
.pos-caption strong { color: var(--text-primary); font-weight: 600; }

/* Lista de roles: la fila es el control. */
.roles { display: grid; gap: 1px; }

.role {
  position: relative;
  display: grid;
  grid-template-columns: 14px 62px 1fr;
  gap: var(--sp-3);
  align-items: center;
  min-height: 26px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.role:hover { background: var(--bg-hover); }
.role:has(input:checked) { background: var(--bg-selected); }

.role input { position: absolute; opacity: 0; pointer-events: none; }
.role:has(input:checked) .role__mark {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent);
}
.role:has(input:focus-visible) .role__mark { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.role .stars .i { width: 11px; height: 11px; }
.role:has(input:checked) .role__name { color: var(--text-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   8. TIRA DE ESTADO
   --------------------------------------------------------------------------
   Cuatro bandas de ancho desigual, repartidas por la FORMA del dato:

   - un estado de un solo valor (felicidad, disciplina) es una LÍNEA;
   - una serie (forma, temporada) se gana ancho y cifra grande.

   La versión anterior de esta banda eran cinco tarjetas idénticas de icono +
   etiqueta + palabra grande, que es exactamente la retícula que la ficha
   rechaza en su primera línea. Prolijo no es lo mismo que jerarquizado.
   -------------------------------------------------------------------------- */

.strip {
  display: grid;
  grid-template-columns:
    minmax(320px, 1fr) 168px minmax(380px, 1.5fr) minmax(150px, 0.45fr);
  gap: var(--sp-4);
  padding: 0 var(--sp-4) var(--sp-4);
  background: var(--bg-page);
}

.state {
  display: grid;
  grid-template-columns: 88px minmax(88px, auto) 1fr;
  gap: var(--sp-4);
  align-items: center;
  min-height: 24px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  transition: background var(--dur-fast) var(--ease);
}
.state:hover { background: var(--bg-hover); }

/* Forma: la única serie corta de la banda, y la única cifra grande. */
.forma { display: flex; align-items: center; gap: var(--sp-5); }

/* Rasgos del jugador */
.traits { display: grid; gap: var(--sp-3); }
.trait { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-snug); }
.trait .i { color: var(--accent-dim); margin-top: 1px; }

/* Pie fuerte / pie débil */
.feet { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.foot { display: grid; gap: var(--sp-3); }

/* `minmax(0, 1fr)` Y NO EL `auto` IMPLÍCITO, que es lo que rompía la ficha en el
   teléfono. Una pista `auto` mide lo que mide el MIN-CONTENT de lo que lleva
   adentro, y acá adentro está `.player__bar`, cuyo min-content son 542 px: la
   pista se plantaba en 502 dentro de una caja de 291 y todo el bloque de arriba
   —nombre, datos, pestañas— salía 252 px fuera de una ventana de 390.
   `min-width: 0` en la caja no alcanza: lo que hay que poner en cero es el piso
   de la PISTA, que es otra cosa y no se hereda. */
.player__main { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }

.player__top {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: var(--sp-7);
  align-items: start;
  padding: var(--sp-5) var(--sp-6) 0 var(--sp-7);
}
.pager__btn {
  display: grid;
  place-items: center;
  width: 20px; height: 18px;
  border-radius: var(--r-xs);
  background: var(--velo);
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pager__btn:hover { background: var(--ink-1000); color: var(--accent); }

.identity__name-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

.identity__name {
  font-size: var(--fs-3xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

.identity__meta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.fact__row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.fact__value { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
/* Secundario y no apagado, por lo mismo que las solapas: la fecha de nacimiento
   cae en la zona más teñida de la banda y en apagado no llegaba al piso en 72 de
   los 896 clubes. */
.fact__sub { font-size: var(--fs-xs); color: var(--text-secondary); }

.fact__sep { width: 1px; background: var(--line-hairline); }

/* Fila de pestañas + acciones */
.player__bar {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-6);
  padding: 0 var(--sp-6) 0 var(--sp-7);
  margin-top: var(--sp-4);
}

/* Los botones se alinean con la línea base de las pestañas, no con su caja. */
.player__bar > .btn { margin-bottom: 4px; }

/* La columna ya no es superficie: sólo apila las tarjetas que lleva dentro. */
.report__col {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  min-width: 0;
}

/* El punto cambia de tamaño Y de color: si sólo se anima el radio, la posición
   crece suave y salta de color, que se lee como un glitch. */
.pitch__pos { transition: r var(--dur) var(--ease), fill var(--dur) var(--ease), opacity var(--dur) var(--ease); }

/* Un solo anillo que se desplaza entre posiciones al cambiar de rol, en vez de
   aparecer y desaparecer en dos sitios distintos. */
.pitch__ring { transition: cx var(--dur) var(--ease), cy var(--dur) var(--ease), opacity var(--dur) var(--ease); }

.roles__head {
  display: grid;
  grid-template-columns: 14px 62px 1fr;
  gap: var(--sp-3);
  padding: 0 var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--line);
}

.role__mark {
  width: 12px; height: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.role__name { font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lista de estado: nombre, valor y detalle en la misma línea de 24px. */
.state-list { display: grid; gap: 1px; }

.state__name { font-size: var(--fs-sm); color: var(--text-muted); }

.state__value {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}
.state__value--good { color: var(--verde-300); }
.state__value--warn { color: var(--amber-300); }
.state__value--muted { color: var(--text-muted); }

.state__note {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  min-width: 0;
}
.foot__value { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 600; }
.foot__pips { display: flex; gap: var(--sp-1); }
.foot__pip { width: 100%; height: 3px; border-radius: var(--r-hair); background: var(--ink-700); }
.foot__pip[data-on='true'] { background: var(--good); }
.foot__pip[data-on='true'][data-weak='true'] { background: var(--clay-400); }

@media (max-width: 1400px) {
  .report { grid-template-columns: 244px repeat(3, minmax(170px, 1fr)); }
  .strip { grid-template-columns: minmax(300px, 1fr) 150px minmax(340px, 1.3fr); }
  .strip > .band:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .report { grid-template-columns: 244px repeat(2, minmax(180px, 1fr)); }
  .facts { flex-wrap: wrap; gap: var(--sp-6); }
}
@media (max-width: 860px) {
  .player { grid-template-columns: 92px minmax(0, 1fr); }
  .portrait { min-height: 104px; }
  .facts { padding-bottom: var(--sp-4); }
  .report { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr; }
  .state { grid-template-columns: 1fr auto; row-gap: var(--sp-1); }
  .tabs { order: 1; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }

  /* El campo no necesita crecer con la columna: es un esquema, no un mapa. */
  .pitch { max-width: 340px; margin-inline: auto; }
}
@media (max-width: 1400px) {
  .report__col--info { grid-column: 1 / -1; }
  .report__col--info .panel { max-width: 640px; }
}
@media (max-width: 860px) {
  .player__top { grid-template-columns: 1fr; gap: var(--sp-5); padding-left: var(--sp-5); }
  .player__bar { padding-left: var(--sp-5); }
  .fact__sep { display: none; }
  .report__col--positions { order: -1; }
  .state__note { grid-column: 1 / -1; }
  .identity__name { font-size: var(--fs-2xl); }

  /* Las pestañas se deslizan en vez de partirse en dos líneas. Y `min-width: 0`
     para que se deslicen DE VERDAD: `.tabs` ya trae su `overflow-x: auto`, pero
     un elemento de flex sin piso en cero se planta en su min-content y el
     desplazamiento que tiene puesto no llega a usarse nunca. */
  .player__bar { flex-wrap: wrap; gap: var(--sp-5); }
  .tabs { min-width: 0; }
  .player__bar > .btn { margin-bottom: 0; }
  .report__col { padding-inline: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   EL RETRATO EN EL TELÉFONO
   --------------------------------------------------------------------------
   `.portrait` es `align-self: stretch` a propósito: sangra hasta el borde de
   abajo de la banda, que en el escritorio son unos 200 px. En el teléfono la
   banda mide lo que mide la ficha entera apilada —565 px medidos a 390×844— y
   la silueta pasa a ser una tira de 99×565 con una cabeza gigante recortada.

   Entre 561 y 860 alcanza con que deje de estirarse: cuadrada y arriba.

   Abajo de 560 SE VA. Son 99 de los 390 —la cuarta parte de la pantalla— para
   una silueta gris que hoy no dice nada: la foto de verdad sólo aparece si
   existe `assets/caras/<club>-<dorsal>.png`, y hoy no existe para nadie. El
   nombre, el escudo y el dorsal ya están al lado y dicen de quién es la ficha.
   Lo que se gana son esos 99 px para el texto, en la pantalla más densa del
   juego. El día que haya caras de verdad, esta regla es la que hay que
   revisar. -------------------------------------------------------------- */

@media (max-width: 860px) and (min-width: 561px) {
  .portrait { align-self: start; aspect-ratio: 1; min-height: 0; }
}

@media (max-width: 560px) {
  .player { grid-template-columns: minmax(0, 1fr); }
  .portrait { display: none; }
}


/* --------------------------------------------------------------------------
   LAS DOS TABLAS DE LA FICHA, EN EL TELÉFONO
   --------------------------------------------------------------------------
   «Datos de temporada» y «Trayectoria» cuelgan directo de su `.band`, sin el
   `.table-scroll` que llevan las tablas del resto del juego. En el escritorio
   da igual —entran—; en el teléfono la de temporada pide 469 px dentro de una
   banda de 373 y, como no hay nada que la recorte, los 106 que sobran los
   empuja LA PÁGINA: el juego entero se corre de costado y la tabla igual no se
   lee entera.

   `display: block` sobre la tabla la convierte en su propio contenedor de
   desplazamiento sin tocar el marcado. Es el mismo trato que `.table-scroll`
   —lo que no entra se desplaza adentro, nunca empuja a la página— con la
   diferencia de que acá el encabezado se va con el desplazamiento, porque el
   sticky del `thead` necesita un contenedor que no sea la tabla misma.

   ESTO CONTIENE EL DEFECTO, NO LO RESUELVE: ocho columnas en 373 px siguen
   siendo un arrastre lateral por cada fila que se quiere leer. Cuáles de las
   ocho merecen estar en un teléfono es una decisión de contenido y está
   pendiente; lo que esta regla compra es que la pantalla deje de estar rota
   mientras tanto. -------------------------------------------------------- */

@media (max-width: 860px) {
  .band > .data-table {
    display: block;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-700) transparent;
  }
}