/* ==========================================================================
   El Camino DT — Día del partido
   --------------------------------------------------------------------------
   Una sola pantalla con tres trabajos simultáneos: mirar, entender y corregir.
   Por eso la retícula es de tres columnas y no de pestañas: si el DT tiene que
   cambiar de panel para hacer un cambio, deja de mirar el partido — y el
   partido no se detiene.

   El campo es la excepción de movimiento del sistema. En el resto del producto
   el movimiento es de 120–200ms y comunica un cambio de estado; acá el
   movimiento ES el dato. La regla que sigue vigente es la otra: nada se mueve
   que no signifique algo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RETÍCULA
   --------------------------------------------------------------------------
   Las columnas laterales son de ancho fijo porque su contenido es una lista de
   dorsales y nombres: no gana nada con más ancho y el campo sí. El hairline
   entre columnas es el gap, no un borde: una sola línea entre dos paneles.
   -------------------------------------------------------------------------- */

.match {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 262px;
  gap: 1px;
  background: var(--line);
  /* Chrome y miga: lo que queda es de las tres columnas. */
  min-height: calc(100vh - var(--chrome-h) - var(--subnav-h) - 27px);
}

.match > .band { background: var(--bg-panel); }

/* La columna central respira distinto: el campo necesita margen propio para
   que la línea de banda no toque el hairline del panel. */
.match__campo { gap: var(--sp-5); padding: var(--sp-5) var(--sp-7); }

/* --------------------------------------------------------------------------
   2. MARCADOR
   --------------------------------------------------------------------------
   Escudo, nombre y cifra. El minuto va debajo del resultado porque es el dato
   que cambia solo: si estuviera al lado, competiría con la cifra que el DT
   está mirando.
   -------------------------------------------------------------------------- */

.marcador {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.marcador__eq { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }
.marcador__eq--visita { flex-direction: row-reverse; }

.marcador__ident { display: grid; gap: 1px; min-width: 0; }
.marcador__eq--visita .marcador__ident { text-align: right; }

.marcador__nombre {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marcador__meta { font-size: var(--fs-xs); color: var(--text-muted); }

.marcador__centro { display: grid; justify-items: center; gap: 1px; }

.marcador__cifra {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font-size: var(--fs-3xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}
.marcador__guion { color: var(--ink-600); }

/* El gol se anuncia una vez y se apaga. Un marcador que parpadea sin parar es
   ruido; uno que destella cuando cambia es información. */
.marcador__cifra[data-gol='true'] { color: var(--accent); }

.marcador__reloj {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. EL CAMPO
   --------------------------------------------------------------------------
   Ancho gobernado por la altura disponible: el campo es una proporción fija
   (105 × 68) y lo que no puede hacer es empujar los controles fuera de la
   pantalla. Se estrecha antes de crecer hacia abajo.
   -------------------------------------------------------------------------- */

.pitch {
  position: relative;
  /* 477px es lo que ocupa todo lo que NO es campo: chrome, miga, marcador,
     relato, transporte y las CUATRO filas de la pizarra. Subió a 552 cuando
     ritmo y salida se sumaron, y bajó a 477 cuando se quitó el aviso del pie:
     cada cosa que entra o sale del alto fijo se la cobra o se la devuelve al
     campo, que se estrecha antes de empujar un control fuera de la pantalla. */
  width: min(100%, calc((100vh - 477px) * 1.544));
  margin-inline: auto;
  aspect-ratio: 105 / 68;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-1000);
  overflow: hidden;
  cursor: crosshair;
}

.pitch__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Etiqueta al vuelo: sólo aparece bajo el cursor y por eso puede ser opaca.
   Se dibuja en HTML y no en el canvas para que el nombre tenga la misma
   tipografía y el mismo antialiasing que el resto de la pantalla. */
.pitch__tip {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -140%);
  display: grid;
  gap: 1px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--ink-950);
  white-space: nowrap;
  pointer-events: none;
}
.pitch__tip[hidden] { display: none !important; }
.pitch__tip b { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.pitch__tip span { font-size: var(--fs-2xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   4. RELATO Y TRANSPORTE
   -------------------------------------------------------------------------- */

/* Una línea, siempre la misma altura: si creciera con el texto, el campo
   entero saltaría en cada jugada. */
.relato {
  min-height: 20px;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  text-align: center;
}
.relato strong { color: var(--text-primary); font-weight: 600; }
.relato[data-tono='gol'] { color: var(--accent-strong); font-weight: 600; }

.transport { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); }

/* --------------------------------------------------------------------------
   5. PIZARRA — táctica, estrategia y cambios
   --------------------------------------------------------------------------
   Los tres controles que el DT tiene durante el partido, en el orden en que
   los usa: la forma, la intención y la gente. Cada uno es una fila con su
   etiqueta a la izquierda, para que se lean como una lista de decisiones y no
   como una barra de herramientas.
   -------------------------------------------------------------------------- */

.pizarra {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-950);
}

.pizarra__row {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: var(--sp-5);
}

.pizarra__row .segmented { flex-wrap: wrap; }

.pizarra__nota { font-size: var(--fs-xs); color: var(--text-muted); }
.pizarra__nota strong { color: var(--text-secondary); font-weight: 600; }

/* --------------------------------------------------------------------------
   6. ALINEACIÓN
   --------------------------------------------------------------------------
   La fila de jugador de esta pantalla NO es la fila de atributo: no hay escala
   1–20 que rellenar. Comparte su altura (22px) y su ritmo para que las tres
   columnas midan igual, pero su relleno es la condición física, que es lo que
   decide un cambio.
   -------------------------------------------------------------------------- */

.lineup { display: grid; gap: 1px; }

.lineup__row {
  position: relative;
  display: grid;
  grid-template-columns: 30px 18px minmax(0, 1fr) 34px;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  height: var(--row-h);
  padding: 0 var(--sp-3);
  border-radius: var(--r-xs);
  text-align: left;
  isolation: isolate;
  transition: background var(--dur-fast) var(--ease);
}
.lineup__row:hover { background: var(--bg-hover); }

/* Condición física como relleno de fila, igual que el atributo: el DT ve la
   caída sin leer un número. El relleno normal es NEUTRO y no de acento: al
   saque los dieciocho están al 100 % y dieciocho barras de color serían color
   que no informa nada. Por debajo del 60 % se vuelve ámbar —"atención", que es
   exactamente lo que pide una pierna fundida— y ahí sí el color significa. */
.lineup__row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--r-xs);
  background: var(--attr-2-fill);
  transform: scaleX(var(--cond, 1));
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
/* Derivado de --warn en vez de un ámbar nuevo: el sistema ya tiene el color de
   "atención" y un segundo ámbar sólo sería el mismo color con otro nombre. */
.lineup__row[data-cansado='true']::before { background: color-mix(in srgb, var(--warn) 16%, transparent); }

.lineup__pos {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

.lineup__num {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lineup__name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lineup__rate { font-size: var(--fs-sm); font-weight: 700; text-align: right; }
.lineup__rate[data-band='good'] { color: var(--cal-200); }
.lineup__rate[data-band='ok']   { color: var(--text-secondary); }
.lineup__rate[data-band='bad']  { color: var(--clay-300); }

/* Marcas de suceso pegadas al nombre: gol, amarilla, cambio. */
.lineup__marks { display: inline-flex; align-items: center; gap: 3px; margin-left: var(--sp-3); vertical-align: -2px; }
.lineup__marks .i { width: 11px; height: 11px; }
.lineup__marks .i--gol { color: var(--accent); }
.lineup__marks .i--amarilla { color: var(--amber-500); }
.lineup__marks .i--roja { color: var(--danger); }

/* Los tres estados del flujo de cambio. Elegido: el que va a salir o moverse.
   Destino: los que pueden recibir ese movimiento. El resto se apaga, porque un
   botón que no hace nada durante una selección es una promesa falsa. */
.lineup__row[aria-pressed='true'] {
  background: var(--accent-wash-hi);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.lineup[data-eligiendo='true'] .lineup__row:not([data-destino='true']):not([aria-pressed='true']) {
  opacity: 0.4;
}
.lineup__row[data-destino='true'] { box-shadow: inset 0 0 0 1px var(--line-strong); }
.lineup__row[data-destino='true']:hover { background: var(--bg-active); }

.lineup__row[data-fuera='true'] { opacity: 0.45; }
.lineup__row[data-fuera='true']:hover { background: none; }

/* Alineación del rival: mismo ritmo, sin interacción y sin condición física.
   No la conocés, así que no se dibuja. */
.lineup--rival .lineup__row { cursor: default; }
.lineup--rival .lineup__row::before { content: none; }
.lineup--rival .lineup__row:hover { background: none; }

.band__sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-hairline);
}

/* --------------------------------------------------------------------------
   7. ESTADÍSTICAS ENFRENTADAS
   -------------------------------------------------------------------------- */

.vs { display: grid; gap: var(--sp-3); }

.vs__row { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: var(--sp-4); }

.vs__cifra { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.vs__cifra--v { text-align: right; }

.vs__medio { display: grid; gap: 2px; }

.vs__label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

.vs__track { display: flex; height: 4px; border-radius: var(--r-pill); overflow: hidden; background: var(--ink-800); }
.vs__fill { height: 100%; transition: flex-grow var(--dur) var(--ease); }
.vs__fill--l { background: var(--accent); flex: var(--l, 1) 1 0; }
.vs__fill--r { background: var(--ink-500); flex: var(--r, 1) 1 0; }

/* El acento marca lo TUYO, no el lado izquierdo. Cuando el Rivera juega de
   visitante su barra está a la derecha, y pintar de cal la del rival sería
   usar el acento para señalar al que no elegiste — el cuarto uso que la Regla
   de la Cal no admite. */
.vs[data-nuestro='1'] .vs__fill--l { background: var(--ink-500); }
.vs[data-nuestro='1'] .vs__fill--r { background: var(--accent); }

/* --------------------------------------------------------------------------
   8. CRONOLOGÍA
   -------------------------------------------------------------------------- */

/* La cronología crece todo el partido. Con tope y scroll propio, el once del
   rival sigue estando debajo al minuto 90; sin tope, empuja la columna y hay
   que bajar la página entera para ver quién juega enfrente. */
.crono {
  display: grid;
  align-content: start;
  max-height: 32vh;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
}

.ev {
  display: grid;
  grid-template-columns: 26px 14px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.ev:last-child { border-bottom: 0; }
.ev__min { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ev .i { width: 13px; height: 13px; color: var(--icon-quiet); margin-top: 1px; }
.ev[data-tipo='gol'] { color: var(--text-primary); }
.ev[data-tipo='gol'] .i { color: var(--accent); }
.ev[data-tipo='amarilla'] .i { color: var(--amber-500); }
.ev[data-tipo='cambio'] .i { color: var(--text-secondary); }
.ev b { font-weight: 600; color: var(--text-primary); }

/* El club que protagoniza el suceso, detrás del texto. En una cronología de dos
   equipos, "gol" sin dueño obliga a mirar el minuto y adivinar de quién fue. */
.ev__eq { color: var(--text-muted); }

.crono__vacio { padding: var(--sp-6) 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   9. RESPUESTA A PANTALLA
   --------------------------------------------------------------------------
   Estructural, no fluida. Por debajo de 1240px cae la columna del rival: entre
   ver el campo y ver el once del contrario, el campo gana. Por debajo de 980px
   la alineación propia pasa a ser una banda horizontal encima del campo, que
   es la única forma de que el campo siga siendo el elemento más grande.
   -------------------------------------------------------------------------- */

@media (max-width: 1240px) {
  .match { grid-template-columns: 226px minmax(0, 1fr); }
  .match__rival { display: none; }
}

@media (max-width: 980px) {
  .match { grid-template-columns: minmax(0, 1fr); }
  .match__campo { order: -1; }
  .pitch { width: 100%; }
  .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lineup--titulares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  /* El campo sigue moviéndose: es el contenido, no un adorno. Lo que se apaga
     es la estela del balón, que es lo único decorativo del lienzo. */
  .pitch { --sin-estela: 1; }
}