/* ==========================================================================
   El Camino DT — Sistema compartido
   --------------------------------------------------------------------------
   Todo lo que vive en más de una pantalla: reset, chrome de dos pisos, panel,
   botón, pastilla, estrellas, la fila de atributo, banda, tabla de datos.
   Si una pantalla nueva necesita agregar algo acá, es una decisión de sistema
   y hay que anotarla en DESIGN.md. Si necesita un TOKEN nuevo, el sistema
   falló.
   ========================================================================== */

/* ==========================================================================
   El Camino DT — Sistema de interfaz
   Orden: reset · primitivas · chrome · ficha · atributos · tarjetas · util
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET Y BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }

/* El [hidden] del navegador es una regla de elemento: cualquier clase con
   display la gana. En una interfaz con paneles de pestaña esto no es un
   detalle, es la diferencia entre ocultar un panel y mostrarlos los cuatro. */
[hidden] { display: none !important; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.i { width: 16px; height: 16px; flex: none; }
.i--sm { width: 13px; height: 13px; }
.i--lg { width: 20px; height: 20px; }
.i--faint { color: var(--icon-quiet); }
.i--warn { color: var(--amber-500); }

.u-hidden { display: none !important; }

.u-num { text-align: right; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Etiqueta micro en versalitas: el recurso que permite meter un nombre de
   campo sin gastar una línea entera de jerarquía. */
.label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   2. CHROME — navegación de dos pisos
   --------------------------------------------------------------------------
   Piso 1: secciones del juego + acción principal fija a la derecha.
   Piso 2: subsecciones de la sección activa.
   La acción principal NUNCA cambia de lugar, sólo de etiqueta.
   -------------------------------------------------------------------------- */

.chrome {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--line);
}

.chrome__row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-5);
}

.chrome__row--primary { height: var(--chrome-h); }

.chrome__row--secondary {
  height: var(--subnav-h);
  border-top: 1px solid var(--line-hairline);
  gap: var(--sp-6);
}

.chrome__spacer { flex: 1 1 auto; }

/* Historial: adelante deshabilitado demuestra el vocabulario de estados. */
.history { display: flex; gap: var(--sp-2); }

.history__btn {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.history__btn:hover { background: var(--bg-active); color: var(--text-primary); }
.history__btn[disabled] { color: var(--text-disabled); cursor: default; background: var(--ink-800); }

/* Escudo del club. Pasó de símbolo dibujado a imagen real, así que la caja
   deja de ser una proporción de escudo (30×34) y pasa a ser cuadrada con
   `contain`: los escudos reales vienen redondos, ovalados y en pentágono, y
   forzarlos a una proporción los deforma o los recorta. La caja manda el alto
   de fila; el dibujo se acomoda adentro. */
.crest {
  width: 32px; height: 32px;
  flex: none;
  object-fit: contain;
  object-position: center;
}
.crest--lg { width: 42px; height: 42px; }
.crest--sm { width: 17px; height: 17px; }

.nav-primary { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

.nav-primary__item {
  display: flex;
  flex: none;
  white-space: nowrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-primary__item:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-primary__item[aria-current='page'] { color: var(--accent); }
.nav-primary__item .i { color: var(--icon-quiet); }

.nav-sub { display: flex; align-items: center; gap: var(--sp-5); flex: none; }

.nav-sub__item {
  position: relative;
  display: flex;
  flex: none;
  white-space: nowrap;
  align-items: center;
  gap: var(--sp-2);
  height: var(--subnav-h);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.nav-sub__item:hover { color: var(--text-primary); }

/* Subrayado de 2px: el único indicador de sección activa. */
.nav-sub__item[aria-current='page'] { color: var(--text-primary); }
.nav-sub__item[aria-current='page']::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--accent);
}
.nav-sub__item .i { color: var(--icon-quiet); }

/* Contador de la subnavegación: la prueba de que marcar sirvió para algo. */
.nav-sub__count:not(:empty) {
  display: inline-grid;
  place-items: center;
  min-width: 15px; height: 15px;
  margin-left: var(--sp-2);
  padding: 0 3px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.nav-sub__item--marcado { color: var(--text-primary); }


/* Buscador */
.search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 168px;
  height: 26px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink-950);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.search:hover { border-color: var(--line-strong); color: var(--text-secondary); }

/* Botones de icono del chrome */
.icon-btn {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.icon-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

.icon-btn__wrap { position: relative; }

.badge {
  position: absolute;
  top: -2px; right: -3px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

/* Reloj del juego: fecha y hora son estado, por eso viven pegados a la
   acción que las hace avanzar. */
.clock {
  display: grid;
  gap: 1px;
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-950);
  text-align: right;
  line-height: 1.1;
}
.clock__date { font-size: var(--fs-xs); color: var(--text-secondary); }
.clock__time { font-size: var(--fs-md); font-weight: 700; font-stretch: var(--wd-condensed); }

/* LA acción principal. Único bloque de color sólido de toda la pantalla. */
.action {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: 30px;
  padding: 0 var(--sp-4) 0 var(--sp-6);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background var(--dur-fast) var(--ease);
}
.action:hover { background: var(--accent-strong); }
.action:active { background: var(--cal-500); }
.action .i { opacity: 0.75; }

/* --------------------------------------------------------------------------
   3. MIGA DE PAN
   -------------------------------------------------------------------------- */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 26px;
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--line-hairline);
  background: var(--ink-950);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.breadcrumb a:hover { color: var(--text-secondary); text-decoration: underline; }
.breadcrumb [aria-current='page'] { color: var(--text-secondary); }
.breadcrumb .i { width: 11px; height: 11px; color: var(--ink-600); }

/* Pastilla de dato: el contenedor genérico de toda la cabecera. */
.chip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 24px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-950);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}
.chip--plain { border-color: transparent; background: none; padding-left: 0; }
.chip strong { color: var(--text-primary); font-weight: 600; }

.chip--status {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent-strong);
  font-weight: 600;
}

.flag { width: 16px; height: 11px; border-radius: var(--r-hair); flex: none; }

/* Estrellas: dos capas, la superior recortada por porcentaje. Permite
   medias estrellas sin dibujar un glifo aparte. */
.stars { position: relative; display: inline-flex; }
.stars__layer { display: flex; gap: 1px; }
.stars__layer--base { color: var(--ink-700); }
.stars__layer--fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--accent);
  width: var(--pct, 0%);
}
.stars .i { width: 13px; height: 13px; }

.btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 26px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--bg-active); color: var(--text-primary); border-color: var(--line-strong); }
.btn .i { color: var(--icon-quiet); }
.btn:hover .i { color: var(--text-secondary); }

/* Un botón agotado —el transporte del partido después del pitazo final— dice
   que ya no hace nada en vez de seguir ofreciéndose. Mismo vocabulario que el
   botón de historial del chrome, que era el único estado deshabilitado que
   tenía el sistema. */
.btn[disabled] {
  background: var(--ink-800);
  border-color: var(--line-hairline);
  color: var(--text-disabled);
  cursor: default;
}
.btn[disabled]:hover { background: var(--ink-800); color: var(--text-disabled); border-color: var(--line-hairline); }
.btn[disabled] .i { color: var(--text-disabled); }

.btn--accent {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent-strong);
}
.btn--accent:hover { background: var(--accent-wash-hi); color: var(--cal-200); }
.btn--accent .i { color: var(--accent); }

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

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

/* Cabecera de bloque interior: misma jerarquía, sin la línea que separa un
   panel de primer nivel. */
.panel__head--flush { border: 0; padding-bottom: 0; }

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

/* --------------------------------------------------------------------------
   6. LA FILA DE ATRIBUTO
   --------------------------------------------------------------------------
   El patrón central de toda la pantalla. Una línea de 22px hace tres
   trabajos: etiqueta, valor numérico y comparación visual. El relleno es
   el fondo de la fila, no un elemento aparte: por eso 45 atributos entran
   sin que la pantalla se convierta en un gráfico de barras.
   -------------------------------------------------------------------------- */

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

.attr {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--row-h);
  padding: 0 var(--sp-4);
  border-radius: var(--r-xs);
  isolation: isolate;
  transition: background var(--dur-fast) var(--ease);
}

/* El relleno proporcional al valor. */
/* Se escala en vez de animar el ancho: transform no dispara layout, así que
   las 36 filas pueden re-medirse a la vez al cambiar de jugador sin tirones. */
.attr::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--r-xs);
  background: var(--fill, transparent);
  transform: scaleX(calc(var(--v) / 20));
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}

.attr:hover { background: var(--bg-hover); }

.attr__name {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attr__value {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--val, var(--text-primary));
  font-variant-numeric: tabular-nums;
}

/* Tramos. Un atributo flojo no se pinta de rojo: se apaga.
   El atributo data-tier está RESERVADO en todo el proyecto para la rampa 1–20,
   así que el mapeo vive una sola vez y lo heredan las tres formas de la fila
   de atributo: lectura (.attr), entrada (.thr) y celda (.cell). El tramo 0 es
   "sin exigencia": ni relleno ni cifra encendida. */
[data-tier='0'] { --fill: none; --val: var(--text-muted); }
[data-tier='1'] { --fill: var(--attr-1-fill); --val: var(--attr-1-text); }
[data-tier='2'] { --fill: var(--attr-2-fill); --val: var(--attr-2-text); }
[data-tier='3'] { --fill: var(--attr-3-fill); --val: var(--attr-3-text); }
[data-tier='4'] { --fill: var(--attr-4-fill); --val: var(--attr-4-text); }
[data-tier='5'] { --fill: var(--attr-5-fill); --val: var(--attr-5-text); }

.attr[data-tier='1'] .attr__name { color: var(--text-muted); }
.attr[data-tier='2'] .attr__name { color: var(--ink-350); }
.attr[data-tier='5'] .attr__name { color: var(--text-primary); }
.attr[data-tier='5'] .attr__value { font-weight: 700; }

/* Variante sin barra, para datos que no son escala 1–20. */
.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--row-h);
  font-size: var(--fs-md);
}
.stat-row dt { color: var(--text-muted); }
.stat-row dd { margin: 0; color: var(--text-primary); font-weight: 600; text-align: right; }

/* Segmentado: el control de dos estados del sistema. */
.segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-950);
}

.segmented__btn {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented__btn:hover { color: var(--text-primary); }
.segmented__btn[aria-pressed='true'] { background: var(--accent); color: var(--text-on-accent); }

/* Contador dentro de un botón segmentado. Sobre el relleno de cal se hunde en
   vez de pintarse de otro color: se deriva del token de texto sobre acento. */
.segmented__count {
  margin-left: var(--sp-3);
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.segmented__btn[aria-pressed='true'] .segmented__count {
  background: color-mix(in srgb, var(--text-on-accent) 22%, transparent);
  color: var(--text-on-accent);
}

.band {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-panel);
  min-width: 0;
}

.band__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.band__note { font-size: var(--fs-xs); color: var(--text-muted); }

.dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: none; }
.dot--good { background: var(--good); }
.dot--warn { background: var(--warn); }
.dot--bad  { background: var(--danger); }

.big {
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.form-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; }

.form-bars__bar {
  width: 9px;
  height: 100%;
  border-radius: var(--r-hair) var(--r-hair) 0 0;
  background: var(--ink-700);
  transform: scaleY(calc(var(--r) / 10));
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Variante compacta, para cuando la forma acompaña a otro dato en una fila. */
.form-bars--mini { height: 16px; gap: 2px; }
.form-bars--mini .form-bars__bar { width: 6px; }

.form-bars__bar[data-band='good'] { background: var(--cal-500); }
.form-bars__bar[data-band='ok']   { background: var(--ink-500); }
.form-bars__bar[data-band='bad']  { background: var(--clay-500); }

.meter__track {
  width: 56px; height: 4px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--ink-800);
  overflow: hidden;
}
.meter__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transform: scaleX(var(--pct, 0));
  transform-origin: left;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.meter__fill--warn { background: var(--warn); }

/* Sección no construida: lo dice, en vez de mover un subrayado sin efecto. */
.stub { display: grid; gap: var(--sp-4); max-width: 68ch; padding: var(--sp-9) var(--sp-6); }
.stub--inline { padding: var(--sp-9) var(--sp-3); max-width: 54ch; }
.stub--narrow { margin: auto 0; padding: 0; max-width: 34ch; }
.stub__title { font-size: var(--fs-xl); font-weight: 700; color: var(--text-secondary); }
.stub__body { font-size: var(--fs-md); color: var(--text-muted); line-height: var(--lh-body); }
.stub__body strong { color: var(--text-secondary); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. TABLA DE DATOS
   -------------------------------------------------------------------------- */

.data-table { font-size: var(--fs-sm); }

.data-table th {
  padding: 0 var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}
.data-table th:first-child { text-align: left; padding-left: 0; }

.data-table td {
  padding: var(--sp-3);
  text-align: right;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--line-hairline);
  white-space: nowrap;
}
.data-table td:first-child { text-align: left; padding-left: 0; color: var(--text-primary); }

/* Canalón: una columna de 3px que no lleva texto sino una marca (la zona de
   clasificación). Vive acá y no en la pantalla porque cualquier tabla con una
   franja de estado la necesita — y porque si no, la regla de :first-child de
   arriba obliga a un !important desde fuera para anularse a sí misma. */
.data-table th.gutter,
.data-table td.gutter { width: 3px; padding: 0; }

/* Va después de :first-child a propósito: una columna numérica se alinea a la
   derecha aunque sea la primera, o la cabecera y su dato apuntan a lados
   distintos. */
.data-table th.u-num,
.data-table td.u-num { text-align: right; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.data-table tbody tr:hover { background: var(--bg-hover); }

/* Contenedor con scroll para una tabla larga: la cabecera se queda pegada
   arriba mientras el cuerpo pasa. Lo usan la clasificación y la matriz de
   resultados, y cualquier tabla que venga después. */
.table-scroll {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
}
.table-scroll > table { height: min-content; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-panel); }

.comp { display: flex; align-items: center; gap: var(--sp-3); }

/* Escudo + nombre de club. Flex por obligación: el reset pone los SVG en
   display block y dentro de un span inline el escudo se cae a su propia línea
   y duplica el alto de cada fila. Cualquier pantalla con partidos la usa. */
.team { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.comp .i { color: var(--icon-quiet); }

/* Calificación media: la única cifra de la tabla que se colorea. */
.rating {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding: 1px var(--sp-3);
  border-radius: var(--r-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rating[data-band='good'] { background: var(--tint-good); color: var(--cal-200); }
.rating[data-band='ok']   { background: var(--ink-800); color: var(--text-secondary); }
.rating[data-band='bad']  { background: var(--tint-bad); color: var(--clay-300); }



@media (max-width: 1080px) {
  .nav-primary__item { font-size: var(--fs-md); padding: var(--sp-2) var(--sp-3); }
  .search { width: 40px; padding: 0; justify-content: center; }
  .search span { display: none; }
}



@media (max-width: 860px) {
  .chrome__row { overflow-x: auto; scrollbar-width: none; }
  .chrome__row::-webkit-scrollbar { display: none; }
  .clock { display: none; }
}



@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}