/* ==========================================================================
   El Camino DT — Buscador de jugadores (scouting)
   --------------------------------------------------------------------------
   Composición y controles propios de esta pantalla. Cero tokens nuevos.
   El chrome, el panel, el botón, el segmentado, la tabla de datos y la rampa
   de atributos vienen tal cual de app.css y tokens.css.
   ========================================================================== */

/* Igual que el portal: la pantalla ocupa el alto de la ventana y lo que
   scrollea es la tabla, no la página. */
body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.scout {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 296px minmax(520px, 1fr) 372px;
  gap: 1px;
  background: var(--line-hairline);
  border-bottom: 1px solid var(--line);
}

.col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-height: 0;
  min-width: 0;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  background: var(--bg-panel);
}

/* --------------------------------------------------------------------------
   1. CRITERIOS
   -------------------------------------------------------------------------- */

.criteria { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink-700) transparent; }

.field { display: grid; gap: var(--sp-4); border: 0; padding: 0; margin: 0; }
.field--grow { flex: 1 1 auto; align-content: start; }
.field legend { padding: 0; }
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); }

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

/* Botón discreto: la acción secundaria de una cabecera de panel, sin caja. */
.btn--quiet {
  height: 22px;
  padding: 0 var(--sp-3);
  border-color: transparent;
  background: none;
}
.btn--quiet:hover { background: var(--bg-hover); border-color: var(--line); }

.range { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.range__value { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }

/* Control de rango simple. No se reinventa: es un input nativo con la pista y
   el pulgar vestidos con los tokens del sistema. */
.range__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  margin: 0;
  background: none;
  cursor: ew-resize;
}
.range__input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-row);
}
.range__input::-moz-range-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-row);
}
.range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.range__input::-moz-range-thumb {
  width: 12px; height: 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.range__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-pill); }

/* --------------------------------------------------------------------------
   EL MÍNIMO POR ATRIBUTO
   --------------------------------------------------------------------------
   La fila de atributo haciendo de ENTRADA. Misma altura, mismo relleno
   proporcional y misma rampa de tramos que en la ficha: lo que allá era "esto
   tiene el jugador", acá es "esto exijo". Que sean el mismo objeto es lo que
   permite comparar el criterio con el resultado de un vistazo.
   -------------------------------------------------------------------------- */

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

.thr {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 18px;
  gap: var(--sp-4);
  align-items: center;
  height: var(--row-h);
}

.thr__name { font-size: var(--fs-sm); color: var(--text-secondary); }

.thr__track {
  position: relative;
  height: var(--row-h);
  border-radius: var(--r-xs);
  background: var(--bg-row);
  isolation: isolate;
}

/* El mismo relleno escalado que .attr::before, con la misma rampa. */
.thr__track::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);
}


.thr__track input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  cursor: ew-resize;
}
.thr__track input::-webkit-slider-runnable-track { height: 100%; background: none; }
.thr__track input::-moz-range-track { height: 100%; background: none; }

/* El pulgar es la marca de lo que elegiste, y eso es uno de los tres usos del
   acento. Una línea, no una bolita: hace de borde del relleno. */
.thr__track input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3px;
  height: var(--row-h);
  border: 0;
  border-radius: var(--r-hair);
  background: var(--accent);
}
.thr__track input::-moz-range-thumb {
  width: 3px;
  height: var(--row-h);
  border: 0;
  border-radius: var(--r-hair);
  background: var(--accent);
}
.thr__track input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-radius: var(--r-xs); }

.thr__value {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--val, var(--text-primary));
  text-align: right;
}
.thr[data-tier='0'] .thr__value { color: var(--text-muted); }
.thr[data-tier='0'] .thr__track input::-webkit-slider-thumb { background: var(--line-strong); }
.thr[data-tier='0'] .thr__track input::-moz-range-thumb { background: var(--line-strong); }

/* --------------------------------------------------------------------------
   2. RESULTADOS
   -------------------------------------------------------------------------- */


.results__count { font-size: var(--fs-sm); color: var(--text-muted); }
.results__count strong { color: var(--text-primary); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Modificador de verdad: hereda los 24px y el radio de .chip y sólo añade
   sitio para la × . Antes reclamaba el nombre del componente y contradecía su
   geometría. */
.chip--filter { padding-right: var(--sp-2); gap: var(--sp-3); }
.chip--filter button {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  color: var(--icon-quiet);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip--filter button:hover { background: var(--bg-active); color: var(--text-primary); }
.chip--filter .i { width: 10px; height: 10px; }

.matrix td { padding-block: var(--sp-2); }

.matrix tbody tr { cursor: pointer; }

/* El único momento autorizado de la pantalla: al estrechar la búsqueda, las
   filas que sobreviven se encienden desde un estado ya visible. No se anima
   alto ni se reemplaza el cuerpo de la tabla — los nodos persisten, así que
   las barras de coincidencia se vuelven a medir en el mismo gesto. */
@keyframes fila-entra { from { opacity: 0.15; } to { opacity: 1; } }
.matrix tbody tr.is-enter { animation: fila-entra var(--dur) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .matrix tbody tr.is-enter { animation: none; }
}
.matrix tbody tr[aria-current='true'] { background: var(--bg-selected); }
.matrix tbody tr[aria-current='true'] .who__name { color: var(--text-primary); }

/* Cabecera ordenable. La flecha aparece sólo en la columna activa. */
.sort {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color var(--dur-fast) var(--ease);
}
.sort:hover { color: var(--text-primary); }
th[aria-sort] .sort { color: var(--text-primary); }
.sort .i { width: 11px; height: 11px; opacity: 0; }
th[aria-sort] .sort .i { opacity: 1; }

/* Marca de lista corta dentro del nombre: es una elección del usuario, y eso
   es uno de los tres usos del acento. */
.who__mark { display: inline-flex; vertical-align: -1px; color: var(--accent); }
.who__mark .i { width: 11px; height: 11px; }

.who { display: grid; gap: 1px; min-width: 0; }
.who__name { font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.who__meta { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }

/* Celda de atributo: la fila de atributo comprimida a una casilla. Leer la
   columna en vertical es lo que convierte la tabla en una comparación. */
.cell {
  display: grid;
  place-items: center;
  width: 26px; height: 20px;
  margin-left: auto;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Toma el relleno y la cifra del mapeo compartido de tramos. */
.cell { background: var(--fill); color: var(--val); }
.cell[data-tier='5'] { font-weight: 700; }

/* Coincidencia: qué tan bien cumple lo que pediste. Es una escala ordenada,
   así que se lee por brillo con la misma rampa. */
.match { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; }
.match__bar { width: 34px; height: 4px; border-radius: var(--r-pill); background: var(--bg-row); overflow: hidden; }
.match__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent-dim); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform var(--dur) var(--ease); }
.match__fill[data-tier='5'] { background: var(--accent); }
.match__num { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }


/* --------------------------------------------------------------------------
   3. VISTA PREVIA
   -------------------------------------------------------------------------- */

.preview { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink-700) transparent; }

.card-id { display: grid; gap: var(--sp-4); }
.card-id__top { display: flex; align-items: center; gap: var(--sp-5); }

/* Registro Display: 30px comprimido, el slot que el sistema reserva para el
   nombre de un jugador. 22px comprimido es el slot de las cifras. */
.card-id__name {
  font-size: var(--fs-3xl);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.card-id__nac { display: flex; align-items: center; gap: var(--sp-3); }
.card-id__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); color: var(--text-secondary); }
.card-id__club { display: flex; align-items: center; gap: var(--sp-3); }

.abilities { display: flex; gap: var(--sp-7); }
.ability { display: grid; gap: var(--sp-3); }

/* El informe del ojeador: lo único de prosa en la pantalla, con su medida. */
.report {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-block: 1px solid var(--line-hairline);
}
.report__quote { max-width: 46ch; font-size: var(--fs-md); color: var(--text-secondary); line-height: var(--lh-body); }
.report__by { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); }

.actions { display: flex; gap: var(--sp-4); margin-top: auto; padding-top: var(--sp-5); }
.actions .btn { flex: 1 1 auto; justify-content: center; }

/* --------------------------------------------------------------------------
   4. RESPUESTA A PANTALLA
   Estructural. Igual que en el portal, el anclaje al alto de ventana sólo se
   sostiene mientras las tres columnas caben juntas.
   -------------------------------------------------------------------------- */

@media (max-width: 1400px) {
  body { height: auto; min-height: 100dvh; overflow: visible; }
  .scout { flex: 0 0 auto; grid-template-columns: 280px minmax(0, 1fr); }
  .scout > .preview { grid-column: 1 / -1; }
  .col { min-height: auto; }
  .criteria, .preview { overflow: visible; }
  .table-scroll { flex: 0 1 auto; max-height: 460px; }
  .actions { margin-top: var(--sp-5); }
}

@media (max-width: 1080px) {
  .matrix .u-optional { display: none; }
}

@media (max-width: 860px) {
  .scout { grid-template-columns: 1fr; }
  .scout > .preview { grid-column: auto; }
  .table-scroll { max-height: none; }
}