/* jugador.css */
/* ==========================================================================
   El Camino DT — Ficha del jugador
   --------------------------------------------------------------------------
   SEGUNDA VUELTA DEL 1/10/2026. La ficha era una banda de 150 px arriba y
   cinco columnas iguales abajo: el ojo no sabía por dónde empezar y los
   textos más chicos eran los más importantes. Ahora son dos partes con un
   orden de lectura:

     · EL RIEL (izquierda): quién es y cuánto vale. La carta con el color del
       club y el dorsal, la identidad, el nivel, el potencial, el valor y el
       perfil de los seis atributos del partido. No cambia de lugar entre
       solapas: es la referencia.
     · EL DETALLE (derecha): la barra con las solapas y las acciones, las
       posiciones y los roles, los treinta y seis atributos en tres grupos con
       su media, y cómo está hoy.

   Todo lo que no es de esta pantalla sale de app.css.
   ========================================================================== */

.ficha {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4);
  background: var(--bg-page);
}

/* --------------------------------------------------------------------------
   1. EL RIEL
   --------------------------------------------------------------------------
   Se TIÑE DEL CLUB DEL FUTBOLISTA, de arriba hacia abajo, con la cuenta de
   `app.js` (`--club-fondo` y `--club-tinte`, que sale de la luminancia: un
   club blanco tiñe poco y uno oscuro, más). Es lo que hacía la banda de antes,
   girado: la carta concentra el color y el perfil queda sobre el panel. */
.player {
  --club-tinte: 12;
  display: grid;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-tarjeta);
  overflow: hidden;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--club-fondo, transparent) calc(var(--club-tinte) * 1.1%), var(--bg-panel)) 0,
      color-mix(in srgb, var(--club-fondo, transparent) calc(var(--club-tinte) * 0.45%), var(--bg-panel)) 300px,
      var(--bg-panel) 520px);
}
/* Sobre el tinte, el rótulo sube un escalón: `--text-muted` no llega al piso
   de contraste en uno de cada cinco clubes (medido el 8/9/2026). */
.player .label { color: var(--text-secondary); }

/* --- la carta: dorsal calado y silueta con la camiseta del club --- */
.carta {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 72% 100%,
    color-mix(in srgb, var(--club-fondo, transparent) 34%, transparent), transparent 70%);
}
/* EL DORSAL COMO DIBUJO. Calado —sólo el trazo— para que sea marca y no
   dato: el dato es la pastilla al lado del nombre. */
/* EL ESCUDO DEL CLUB, grande, arriba a la izquierda: de quién es se lee antes
   que el nombre. */
.carta__escudo { position: absolute; left: var(--sp-6); top: var(--sp-6); z-index: 1; }
.carta__escudo .crest { width: 56px; height: 56px; --halo: 1px; }
.carta__dorsal {
  position: absolute;
  left: 76px;
  bottom: -30px;
  font-size: 136px;
  font-weight: 800;
  font-stretch: var(--wd-condensed);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--club-fondo, var(--text-primary)) 55%, var(--text-primary));
  opacity: 0.42;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
.portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 186px;
  height: 160px;
  margin: 0;
}
.portrait svg { width: 100%; height: 100%; }
/* La silueta apoya en una sombra de piso, y se ilumina apenas al pasar. */
.portrait::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -10px; height: 26px;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.5), transparent);
  pointer-events: none;
}

.pager {
  position: absolute;
  right: var(--sp-5);
  top: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  z-index: 2;
}
.pager__btn {
  display: grid;
  place-items: center;
  width: 26px; height: 22px;
  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);
}
@media (hover: hover) {
  .pager__btn:hover { background: var(--ink-1000); color: var(--accent); }
}

/* --- identidad --- */
.identity { display: grid; gap: var(--sp-4); padding: var(--sp-5) var(--sp-7) var(--sp-6); }
.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: 1.05;
  text-wrap: balance;
}
.squad-no {
  display: grid;
  place-items: center;
  min-width: 28px; height: 26px;
  padding: 0 var(--sp-3);
  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;
}
.identity__pos {
  display: flex; align-items: center; gap: var(--sp-4);
  margin: 0;
  font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary);
}
.identity__datos { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.identity__datos li {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  min-width: 0;
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.identity__datos strong { color: var(--text-primary); font-weight: 600; }
.identity__datos .i { color: var(--text-muted); }
.identity__sep { color: var(--text-muted); }
.fact__sub { font-size: var(--fs-xs); color: var(--text-secondary); }

/* --- nivel, potencial, valor ---
   EL NIVEL VA GRANDE Y TEÑIDO CON LA RAMPA de los atributos: es el número que
   se mira primero, en la escala de 99 del resto del juego. Con niebla es un
   rango y las estrellas no se dibujan (salían del valor real). */
.facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'nivel pot' 'valor valor';
  gap: var(--sp-6) var(--sp-7);
  padding: var(--sp-6) var(--sp-7);
  border-top: 1px solid var(--line-hairline);
}
.nivel { grid-area: nivel; display: grid; justify-items: start; gap: var(--sp-3); }
.nivel__n {
  display: grid; place-items: center;
  min-width: 84px; height: 56px; padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--val, var(--text-primary)) 14%, var(--bg-chrome));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--val, var(--text-primary)) 45%, transparent);
  color: var(--val, var(--text-primary));
  font-size: 2.5rem; font-weight: 700; font-stretch: var(--wd-condensed);
  font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ability { grid-area: pot; display: grid; align-content: start; justify-items: start; gap: var(--sp-3); }
.nivel .stars .i, .ability .stars .i { width: 15px; height: 15px; }
.nivel__sub { font-size: var(--fs-xs); line-height: 1.3; color: var(--text-secondary); }
.fact { grid-area: valor; display: grid; gap: var(--sp-2); }
.fact__value { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* --- las características --- */
.rasgos { display: grid; gap: var(--sp-4); padding: var(--sp-5) var(--sp-7) var(--sp-6); border-top: 1px solid var(--line-hairline); }
.rasgos:has(.traits:empty) { display: none; }

/* --- el perfil --- */
.perfil { display: grid; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) var(--sp-6); border-top: 1px solid var(--line-hairline); }
.perfil__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.perfil__radar { display: block; width: 100%; height: auto; overflow: visible; }
.perfil__aro { fill: none; stroke: var(--line); stroke-width: 1; }
.perfil__aro--borde { stroke: var(--line-strong); }
.perfil__eje { stroke: var(--line); stroke-width: 1; }
.perfil__banda { fill: color-mix(in srgb, var(--verde-400) 16%, transparent); }
.perfil__forma {
  fill: color-mix(in srgb, var(--verde-400) 26%, transparent);
  stroke: var(--verde-400); stroke-width: 2; stroke-linejoin: round;
}
.perfil__otro { fill: color-mix(in srgb, var(--azul-300) 8%, transparent); stroke: var(--azul-300); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.perfil__punto { fill: var(--val, var(--verde-400)); stroke: var(--bg-panel); stroke-width: 2; }
.perfil__rot { fill: var(--text-secondary); font-size: 13px; }
.perfil__val { fill: var(--val, var(--text-primary)); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   2. EL DETALLE
   -------------------------------------------------------------------------- */
/* La pista EXPLÍCITA en `minmax(0, 1fr)`: implícita es `auto`, y la barra de
   solapas —que no se achica por debajo de sus tres botones— la estiraba y
   corría la página 45 px de costado en el teléfono. */
.ficha__main { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--sp-4); min-width: 0; }

/* --- la barra: acciones, solapas, contra quién, convocar, comparar ---
   DOBLA CUANDO NO ENTRA: su min-content pasa los 540 px y un flex que no dobla
   empuja la página. */
.player__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  min-height: 54px;
  padding: 0 var(--sp-2) var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.tabs { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
/* LAS SECCIONES SE NOTAN (2/10/2026): botones grandes y la activa rellena
   con el acento, como la sección abierta de la navegación de arriba. Un
   subrayado fino sobre texto gris no decía que ahí había tres pantallas. */
.tab {
  flex: none;
  height: 38px;
  padding: 0 var(--sp-7);
  border-radius: var(--r-md);
  white-space: nowrap;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-raised);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
@media (hover: hover) { .tab:hover { color: var(--text-primary); background: var(--bg-hover); } }
.tab[aria-selected='true'] { color: var(--text-on-accent); background: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.vs {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  height: 30px; padding: 0 var(--sp-2) 0 var(--sp-4);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--azul-300) 12%, var(--bg-chrome));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--azul-300) 45%, transparent);
  font-size: var(--fs-sm); color: var(--text-primary); white-space: nowrap;
}
.vs b { font-weight: 600; }
.vs__quitar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-xs); color: var(--text-secondary); }
@media (hover: hover) { .vs__quitar:hover { background: var(--bg-hover); color: var(--text-primary); } }

.comparar { position: relative; }
.comparar__pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  width: min(340px, 86vw); max-height: 400px;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  box-shadow: var(--sombra-modal);
  animation: comparar-abre 160ms var(--ease) both;
}
@keyframes comparar-abre { from { opacity: 0; transform: translateY(-4px); } }
.comparar__buscar {
  height: 32px; padding: 0 var(--sp-4); margin-bottom: var(--sp-3);
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-page);
  color: var(--text-primary); font: inherit; font-size: var(--fs-sm);
}
.comparar__lista { margin: 0; padding: 0; list-style: none; overflow: auto; overscroll-behavior: contain; }
.comparar__lista li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4);
  min-height: 40px; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); cursor: pointer;
}
.comparar__lista li:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
@media (hover: hover) { .comparar__lista li:hover { background: var(--bg-hover); } }
.comparar__lista li[aria-selected='true'] { background: var(--bg-selected); }
.comparar__quien { display: grid; min-width: 0; }
.comparar__quien b { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comparar__quien small { font-size: var(--fs-xs); color: var(--text-muted); }
.comparar__nivel { font-size: var(--fs-md); font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.comparar__lista .comparar__nada { display: block; cursor: default; color: var(--text-muted); font-size: var(--fs-sm); }

/* --- la retícula: posiciones y los tres grupos ---
   La columna de posiciones es fija; las tres de atributos se reparten el resto
   por igual porque SON equivalentes. Técnico y balón parado suman catorce
   filas, mental catorce, físico ocho más la información: las tres terminan a
   la misma altura. */
.report {
  display: grid;
  grid-template-columns: 250px repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.report__col { display: grid; align-content: start; gap: var(--sp-4); min-width: 0; }

/* Los títulos de grupo, más grandes y con su media a la derecha. */
.report .panel__title { font-size: var(--fs-xs); }
.grupo__media {
  margin-left: auto;
  font-size: var(--fs-lg); font-weight: 700; line-height: 1;
  color: var(--val, var(--text-primary));
  font-variant-numeric: tabular-nums;
}

/* LA FILA DE ATRIBUTO: nombre, barra fina y cifra (2/10/2026). La fila ya no
   se rellena entera ni lleva rayado: el color vive en la barra y en la cifra,
   y el nombre se lee limpio sobre el panel. 26 px de alto, nombre en gris
   claro y cifra en negrita. La barra mide el valor sobre 20; con niebla, el
   tramo sólido es lo seguro y el tramo claro lo que podría ser. */
.report .attr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(56px, 34%) auto 3.4em;
  align-items: center;
  gap: var(--sp-4);
  height: 26px;
}
.report .attr::before { display: none; }
.report .attr__name { font-size: var(--fs-sm); color: var(--ink-200); }
.report .attr__value { font-size: var(--fs-md); font-weight: 700; text-align: right; }
.report .attr[data-tier='1'] .attr__name { color: var(--text-secondary); }
.attr__barra {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--ink-800);
  overflow: hidden;
}
.attr__lleno, .attr__rango { position: absolute; top: 0; bottom: 0; border-radius: inherit; }
.attr__lleno {
  left: 0; width: 100%;
  background: var(--val, var(--text-secondary));
  transform-origin: left center;
  transform: scaleX(calc(var(--v, 0) / 20));
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.attr__rango {
  left: calc(var(--lo, 0) / 20 * 100%);
  width: calc((var(--hi, 0) - var(--lo, 0)) / 20 * 100%);
  background: color-mix(in srgb, var(--val, var(--text-secondary)) 38%, transparent);
  transition: left var(--dur) var(--ease), width var(--dur) var(--ease);
}
.report .attr[data-tier='1'] .attr__lleno { background: var(--ink-600); }
/* EN COLUMNA ANGOSTA LA BARRA BAJA AL PIE DE LA FILA, a lo ancho. Al lado del
   nombre le quedaban 24 px a 1440 y el nombre se cortaba —«Acelerac…»—; abajo
   mide la fila entera y el nombre entra completo. Lo decide el ancho de la
   COLUMNA y no el de la ventana: a 1440 con el riel y a 1100 sin él las
   columnas miden distinto. */
.report .attrs { container-type: inline-size; }
@container (max-width: 380px) {
  .report .attr { grid-template-columns: minmax(0, 1fr) auto minmax(2.6em, auto); height: 28px; padding-bottom: 5px; }
  .report .attr__barra { position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: 3px; height: 3px; }
}
.report .attr[data-tier='2'] .attr__lleno { background: var(--ink-400); }
.attr--niebla .attr__value { font-style: italic; }
.attr__name { flex: 1; min-width: 0; }
.attr__delta { min-width: 2.6em; text-align: right; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.attr__delta:empty { display: none; }
.attr__delta[data-signo='mas'] { color: var(--verde-300); }
.attr__delta[data-signo='menos'] { color: var(--clay-300); }
.attr__delta[data-signo='igual'] { color: var(--text-muted); }

/* --- posiciones --- */
.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%);
}
.pitch__pos { transition: r var(--dur) var(--ease), fill var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.pitch__ring { transition: cx var(--dur) var(--ease), cy var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.pitch__sigla { font-size: 8.5px; font-weight: 700; fill: var(--text-primary); opacity: 0; transition: opacity var(--dur) var(--ease); }
.pitch__sigla[data-nivel='1'], .pitch__sigla[data-nivel='2'], .pitch__sigla[data-nivel='3'] { opacity: 0.92; }
.pos-caption { text-align: center; font-size: var(--fs-sm); color: var(--text-secondary); padding: var(--sp-2) 0 0; margin: 0; }
.pos-caption strong { color: var(--text-primary); font-weight: 600; }

.roles { display: grid; gap: 1px; }
.roles__head {
  display: grid; grid-template-columns: 14px 66px 1fr; gap: var(--sp-3);
  padding: 0 var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.role {
  position: relative;
  display: grid; grid-template-columns: 14px 66px 1fr; gap: var(--sp-3); align-items: center;
  min-height: 30px; padding: 0 var(--sp-3);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
@media (hover: hover) { .role:hover { background: var(--bg-hover); } }
.role:has(input:checked) { background: var(--bg-selected); }
.role input { position: absolute; opacity: 0; pointer-events: none; }
.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: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: 12px; height: 12px; }
.role__name { font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role:has(input:checked) .role__name { color: var(--text-primary); font-weight: 600; }

/* --- información: compacta, sin aire entre el título y la primera fila ---
   El hueco era el margen que el navegador le pone a todo `<dl>`. */
.report dl { margin: 0; }
/* Con y sin posesión a partes iguales: en 250 px el segundo botón se salía
   del panel. */
.report__col--positions .segmented { display: grid; grid-template-columns: 1fr 1fr; }
.report__col--positions .segmented__btn { justify-content: center; padding-inline: var(--sp-3); font-size: var(--fs-sm); white-space: nowrap; }
.report__col:last-child .tarjeta:last-child { gap: var(--sp-4); }
.report__col:last-child .tarjeta:last-child .stat-row { min-height: 26px; }
.traits { display: grid; gap: var(--sp-3); }
.trait { display: flex; gap: var(--sp-3); margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-snug); }
.trait .i { color: var(--accent-dim); margin-top: 2px; flex: none; }
.feet { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.foot { display: grid; gap: var(--sp-3); }
.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: 4px; 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); }

/* --------------------------------------------------------------------------
   3. LA TIRA: CÓMO ESTÁ HOY
   --------------------------------------------------------------------------
   El estado a la izquierda y alto —cinco renglones con su nota—; a la
   derecha la temporada arriba y la forma y la carrera abajo. Para uno de
   afuera casi todo se esconde (`pintarLaTira()`), y lo que queda va en fila.
   -------------------------------------------------------------------------- */
.strip {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  grid-template-areas: 'estado puesto' 'temporada puesto';
  gap: var(--sp-4);
}
.strip > .band--estado { grid-area: estado; }
.strip > .band--temporada { grid-area: temporada; }
.strip > .band--puesto { grid-area: puesto; }
/* Para uno de afuera quedan una o dos bandas —su puesto y, en el modo
   selección, la de la selección—: van en fila, la de la selección más ancha.
   Los tuyos tienen tres (estado, temporada y su puesto) y usan las áreas. */
.strip[data-cuantas='1'] { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
.strip[data-cuantas='2'] { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: none; }
.strip[data-cuantas='1'] > .band, .strip[data-cuantas='2'] > .band { grid-area: auto; }

/* --- su puesto --- */
.puesto__cab { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.puesto { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.puesto__fila a {
  display: grid; grid-template-columns: 1.6em 26px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4);
  min-height: 34px; padding: 0 var(--sp-3);
  border-radius: var(--r-xs);
  color: inherit; text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
@media (hover: hover) { .puesto__fila a:hover { background: var(--bg-hover); } }
.puesto__fila a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
/* ÉL, marcado con el naranja de pertenencia: es «cuál de estas filas es la
   que estás mirando», no un valor ni algo que se pulse. */
.puesto__fila--yo a { background: color-mix(in srgb, var(--tuyo, var(--naranja)) 14%, transparent); box-shadow: inset 3px 0 0 var(--tuyo, var(--naranja)); }
.puesto__n { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.puesto__fila--yo .puesto__n { color: var(--tuyo, var(--naranja)); }
.puesto__quien { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.puesto__quien b { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puesto__quien small { flex: none; font-size: var(--fs-2xs); color: var(--accent-texto); }
.puesto__nivel { font-size: var(--fs-md); font-weight: 700; color: var(--val, var(--text-primary)); font-variant-numeric: tabular-nums; }
.puesto__nivel--niebla { font-style: italic; }

.state {
  display: grid;
  grid-template-columns: minmax(100px, max-content) minmax(96px, auto) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
  min-height: 30px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  transition: background var(--dur-fast) var(--ease);
}
@media (hover: hover) { .state:hover { background: var(--bg-hover); } }
.state-list { display: grid; gap: 1px; margin: 0; }
.state__name { font-size: var(--fs-sm); color: var(--text-secondary); }
.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; flex-wrap: wrap; gap: 0 var(--sp-4); margin: 0; font-size: var(--fs-xs); line-height: 1.35; color: var(--text-secondary); min-width: 0; }
/* La nota se PARTE cuando no entra en vez de cortarse con puntos: «Le …» y
   «Toda…» no decían nada. */
.band--estado .state__note > * { white-space: normal; overflow: visible; }

/* --- la temporada: cuatro cifras, la forma y la carrera en una línea --- */
.temporada { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-7); }
.temporada__cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); margin: 0; }
.temporada__cifra { display: grid; gap: var(--sp-2); min-width: 0; }
.temporada__cifra dt { font-size: var(--fs-xs); color: var(--text-secondary); }
.temporada__cifra dd { margin: 0; justify-self: start; font-size: var(--fs-2xl); font-weight: 700; font-stretch: var(--wd-condensed); line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.temporada__cifra dd.rating { font-size: var(--fs-lg); padding: 3px var(--sp-4); }
.temporada__forma { display: grid; gap: var(--sp-2); justify-items: end; }
.temporada__carrera { margin: 0; padding-top: var(--sp-4); border-top: 1px solid var(--line-hairline); font-size: var(--fs-sm); color: var(--text-secondary); }
.temporada__carrera b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* La forma: las cinco últimas en barras con su nota encima y la media grande. */
.forma { display: flex; align-items: flex-end; gap: var(--sp-5); }
.band .form-bars { height: 40px; gap: 4px; }
.band .form-bars__bar { width: 12px; }

/* La selección, cuando va sola, es una FILA de datos. */
.strip[data-cuantas='1'] .band--seleccion .state-list,
.strip[data-cuantas='2'] .band--seleccion .state-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.strip[data-cuantas='1'] .band--seleccion .state,
.strip[data-cuantas='2'] .band--seleccion .state { grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }

/* --------------------------------------------------------------------------
   4. DATOS PERSONALES
   -------------------------------------------------------------------------- */
.personal { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); align-items: start; }
.datos { display: grid; margin: 0; }
.dato { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-hairline); }
.dato:last-child { border-bottom: 0; }
.dato dt { font-size: var(--fs-sm); color: var(--text-secondary); }
.dato dd { margin: 0; font-size: var(--fs-md); color: var(--text-primary); font-weight: 600; line-height: 1.35; }
.dato dd .crest, .dato dd .flag { vertical-align: -3px; margin-right: 4px; }
.dato small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   5. ANCHOS
   -------------------------------------------------------------------------- */
@media (min-width: 1760px) {
  .ficha { grid-template-columns: 380px minmax(0, 1fr); }
  .report { grid-template-columns: 280px repeat(3, minmax(0, 1fr)); }
}
/* Abajo de 1280 el riel se acuesta arriba, en dos columnas —carta e
   identidad a la izquierda, nivel y perfil a la derecha—, y los atributos
   pasan a dos columnas. */
@media (max-width: 1280px) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .player { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .player > .facts { border-top: 0; border-left: 1px solid var(--line-hairline); }
  .player > .perfil { border-left: 1px solid var(--line-hairline); }
  .report { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .strip { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'estado' 'temporada' 'puesto'; }
}
@media (max-width: 760px) {
  .ficha { padding: var(--sp-3); }
  .player { grid-template-columns: minmax(0, 1fr); }
  .player > .facts, .player > .perfil { border-left: 0; border-top: 1px solid var(--line-hairline); }
  .report { grid-template-columns: minmax(0, 1fr); }
  .strip, .strip[data-cuantas] { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'estado' 'temporada' 'puesto'; }
  .temporada { grid-template-columns: minmax(0, 1fr); }
  .temporada__forma { justify-items: start; }
  .strip[data-cuantas] > .band { grid-area: auto; }
  .state { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-1); }
  .state__note { grid-column: 1 / -1; }
  /* Las solapas se deslizan en vez de partirse; `min-width: 0` para que el
     desplazamiento que tienen puesto llegue a usarse. */
  .tabs { order: 1; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .comparar__pop { right: auto; left: 0; }
  .pitch { max-width: 360px; margin-inline: auto; }
  .carta__dorsal { font-size: 140px; }
  /* Las dos tablas se desplazan adentro y no empujan la página. */
  .band > .data-table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .attr__rango, .attr__lleno, .comparar__pop, .pitch__sigla { transition: none; animation: none; }
}

/* ==========================================================================
   DATOS PERSONALES Y CARRERA, A FONDO (2/10/2026)
   ========================================================================== */
.personal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.per-club { display: flex; align-items: center; gap: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-hairline); }
.per-club .crest { width: 52px; height: 52px; }
.per-club b { display: block; font-size: var(--fs-xl); color: var(--text-primary); }
.per-club small { font-size: var(--fs-xs); color: var(--text-secondary); }
.dato__rol { display: flex; align-items: center; gap: var(--sp-3); }
.dato__rol .stars .i { width: 11px; height: 11px; }

/* La proyección */
.band--proy { grid-column: span 1; }
.proy { display: block; width: 100%; height: auto; }
.proy__pico { fill: color-mix(in srgb, var(--verde-400) 14%, transparent); }
.proy__base { stroke: var(--line); stroke-width: 1; }
.proy__linea { fill: none; stroke: var(--verde-400); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.proy__hoy { fill: var(--accent); stroke: var(--bg-panel); stroke-width: 2; }
.proy__edad { fill: var(--text-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.proy__val { fill: var(--text-primary); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.proy__pie { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.4; }
.proy__muestra { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; background: color-mix(in srgb, var(--verde-400) 30%, transparent); }

/* La carrera */
#panel-carrera { display: grid; gap: var(--sp-4); }
#panel-carrera[hidden] { display: none; }
.carrera__cifras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.carrera__cifras li { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-tarjeta); background: var(--bg-panel); border: 1px solid var(--line-hairline); }
.carrera__cifras b { font-size: var(--fs-2xl); font-weight: 700; font-stretch: var(--wd-condensed); line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.carrera__cifras small { font-size: var(--fs-xs); color: var(--text-secondary); }
.carrera { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.carrera__tray { grid-column: 1 / -1; }
.hitos { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hitos li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-hairline); }
.hitos li:last-child { border-bottom: 0; }
.hitos__anio { font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hitos__que b { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.hitos__que small { font-size: var(--fs-xs); color: var(--text-secondary); }
.hitos li.hitos__nada { display: block; font-size: var(--fs-sm); color: var(--text-secondary); }
.carrera__sel-resumen { margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }

@media (max-width: 1280px) {
  .personal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carrera__cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .personal, .carrera { grid-template-columns: minmax(0, 1fr); }
  .carrera__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dato dd .flag { display: inline-block; width: 20px; height: 14px; }
.proy__cab { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }

/* --------------------------------------------------------------------------
   LA FICHA REAL (1/10/2026) — ver `ficha-real.js`
   -------------------------------------------------------------------------- */
/* La foto: recortada a la caja del retrato y fundida con la carta por la
   izquierda y por abajo, como los recortes de FM. El encuadre lo calcula
   `encuadrar()` sobre la cara. */
.portrait .portrait__foto { overflow: hidden; }
.portrait__img--real {
  position: absolute;
  max-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 18%);
  mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 18%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Con la foto puesta, la silueta de abajo no se asoma por los bordes fundidos. */
.portrait--foto > svg { visibility: hidden; }
.portrait--foto::after { display: none; }
.portrait__credito {
  position: absolute;
  right: 6px;
  bottom: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  color: rgb(255 255 255 / 0.85);
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
}
.portrait__credito:hover, .portrait__credito:focus-visible { background: rgb(0 0 0 / 0.8); color: #fff; }
.portrait__credito[hidden] { display: none; }

/* Un club de la carrera real: escudo del juego, bandera de selección o nada. */
.real__club { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.real__club > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.real__club .crest { width: 18px; height: 18px; flex: none; }
.real__club .flag { width: 18px; height: 13px; flex: none; }
.real__num { color: var(--text-secondary); font-weight: 400; font-variant-numeric: tabular-nums; }

/* La trayectoria: una fila por temporada y club; al tocarla, sus torneos. */
.real__tabla td.num, .real__tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.real__tabla td:nth-child(2) { text-align: left; color: var(--text-primary); }
.real__tabla th:nth-child(2) { text-align: left; }
.real__temp { font-variant-numeric: tabular-nums; }
.real__fila { cursor: pointer; }
.real__fila > td:first-child::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-right: 8px;
  border-left: 4px solid var(--text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  vertical-align: 1px;
  transition: transform 0.15s ease;
}
.real__fila[aria-expanded='true'] > td:first-child::before { transform: rotate(90deg); }
.real__mas > td { text-align: center !important; color: var(--accent); cursor: pointer; font-weight: 600; }
.real__mas:hover > td { text-decoration: underline; }
.real__fila:hover > td { background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
.real__fila:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.real__sub > td { font-size: var(--fs-xs); color: var(--text-muted); }
.real__sub > td.real__comp { padding-left: var(--sp-6); color: var(--text-secondary); }

/* Los pases: de un club al otro, con la flecha en el medio. */
.hitos__que b.real__pase { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.real__pase > .i { color: var(--text-muted); }

/* El valor en el tiempo y los últimos partidos. */
.real__valor { display: block; width: 100%; height: auto; max-height: 190px; }
.real__valor-area { fill: color-mix(in srgb, var(--verde-400) 12%, transparent); }
.real__valor-hoy { fill: var(--text-primary); }
.real__res {
  display: inline-block;
  min-width: 2.6em;
  margin-right: var(--sp-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #0b0d0c;
}
.real__res--g { background: var(--good); }
.real__res--e { background: var(--text-muted); }
.real__res--p { background: var(--danger); color: #fff; }
#panel-carrera .hitos__que b .real__club { vertical-align: -3px; }
.real__ult--no .hitos__que b { color: var(--text-secondary); font-weight: 500; }

/* Las lesiones: una barra por temporada, en la escala de la peor. */
.real__lesiones li { align-items: center; }
.real__barra { display: grid; grid-template-columns: minmax(0, 1fr) 2.2em; align-items: center; gap: var(--sp-3); }
.real__barra i { display: block; height: 8px; border-radius: 4px; background: var(--warn); width: calc(var(--pct) * 100%); min-width: 4px; }
.real__barra b { font-size: var(--fs-sm); text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.real__fuente { grid-column: 1 / -1; margin: 0; }
.real__fuente[hidden] { display: none; }

/* SIN HUECOS (1/10/2026), «acomodemos todo para evitar espacios vacíos».
   «Datos personales»: tres columnas armadas a mano en el HTML (ver allá por
   qué esas parejas), cada una una pila; la última banda de cada pila se estira
   lo poco que falta para que las tres cierren a la misma altura. Va al final
   porque pisa la grilla de más arriba. */
.personal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: stretch; }
.personal__col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.personal__col > .band[hidden] { display: none; }
/* La de abajo de cada pila es la que se estira: la primera queda a su alto. */
.personal__col > .band ~ .band { flex: 1 1 auto; }
/* «Carrera»: dos pilas que crecen juntas (ver el HTML), la de la tabla más
   ancha; la última banda de cada una se estira hasta la otra. */
.carrera { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--sp-4); align-items: stretch; }
.carrera__col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.carrera__col > .band[hidden] { display: none; }
.carrera__col > .band:last-child { flex: 1 1 auto; }
.carrera > .real__fuente { grid-column: 1 / -1; }
/* SIN LA COLUMNA DEL COSTADO —sin últimos partidos, que es lo que trae el
   partido por partido: sin ficha real, o uno sin partido por partido— las pilas se
   (`data-pilas` lo pone `ficha-real.js`: `:not(:has())` no lo acepta `revisar.mjs`)
   deshacen y las bandas vuelven a la grilla de dos de antes, con la
   trayectoria a lo ancho. Si no, «Premios» se estiraba vacío a toda la altura
   de la otra columna. */
.carrera:not([data-pilas]) { align-items: start; }
.carrera:not([data-pilas]) > .carrera__col { display: contents; }
.carrera:not([data-pilas]) .carrera__tray { grid-column: 1 / -1; }
.carrera:not([data-pilas]) .band { flex: none; }
/* La tabla del juego vacía, con la carrera real arriba, no dice nada. */
[data-ficha-real] .carrera__tray--juego:has([data-f="career-empty"]:not([hidden])) { display: none; }
@media (max-width: 1280px) {
  .personal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .personal__col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .personal, .personal__col:last-child, .carrera { grid-template-columns: minmax(0, 1fr); }
  .personal__col:last-child { display: flex; }
}

/* Títulos y premios reales en mosaico: el número, el nombre y los años. */
.real__mosaico-li { display: block !important; padding: var(--sp-3) 0 0 !important; border-bottom: 0 !important; }
.real__mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.real__mosaico > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.real__mosaico b { grid-row: span 2; font-size: var(--fs-xl); font-weight: 700; font-stretch: var(--wd-condensed); color: var(--accent); font-variant-numeric: tabular-nums; }
.real__mosaico span { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.real__mosaico small { font-size: var(--fs-2xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* Las lesiones en barras verticales, una por temporada. */
.real__lesiones > .real__barras { display: flex !important; align-items: flex-end; gap: 6px; height: 128px; padding: var(--sp-3) 0 0 !important; border-bottom: 0 !important; }
.real__barra-v { flex: 1 1 0; min-width: 0; overflow: visible; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.real__barra-v i { display: block; width: 100%; max-width: 26px; height: calc(var(--pct) * 70px); min-height: 3px; border-radius: 3px 3px 0 0; background: var(--warn); }
.real__barra-v b { font-size: var(--fs-2xs); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.real__barra-v small { font-size: 10px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Los últimos partidos: fecha y resultado a la izquierda; el rival arriba y
   el torneo con los minutos debajo. En una sola línea, a 1440 px el rival se
   cortaba («Nas…»). */
.hitos > li.real__ult { grid-template-columns: 2.8rem auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: var(--sp-3); row-gap: 1px; padding: var(--sp-3) 0; }
.real__ult > .hitos__anio, .real__ult > .real__res { grid-row: 1 / 3; }
.real__ult .real__res { margin: 0; }
.real__ult-rival { min-width: 0; display: flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; }
.real__ult-rival > i { font-style: normal; color: var(--text-muted); }
.real__ult > small { grid-column: 3; font-size: var(--fs-2xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.real__ult--no .real__ult-rival { color: var(--text-secondary); font-weight: 500; }

/* En el teléfono la trayectoria entra en el ancho: sin minutos, con el club
   cortado y el rótulo de la banda en dos renglones. Medido a 375 px: la tabla
   pedía 414 y ensanchaba la página entera a 575. */
@media (max-width: 760px) {
  .real__tabla .real__min { display: none; }
  .real__tabla .real__club > span { max-width: 8.5em; }
  [data-f="car-real-band"] .band__head { flex-wrap: wrap; }
  [data-f="car-real-band"] .band__head .label { white-space: normal; }
  .carrera__cifras li { min-width: 0; }
  .carrera__cifras small { overflow-wrap: anywhere; }
  /* Doce temporadas de lesiones no entran con todos sus rótulos: uno sí y uno no. */
  .real__barras { gap: 3px; }
  .real__barra-v small { font-size: 9px; }
  .real__barra-v:nth-child(even) small { visibility: hidden; }
}

/* menu.css */
/* ==========================================================================
   El Camino DT — El menú del botón derecho
   --------------------------------------------------------------------------
   Cero tokens nuevos. Es la superficie del diálogo —panel sobre línea fuerte—
   con las medidas de la fila de estado: 24px de alto útil, icono apagado a la
   izquierda y texto en 13px.

   SIN SOMBRA, a diferencia del diálogo. La única sombra del sistema existe
   porque un modal tapa la pantalla entera y tiene que despegarse del plano;
   este menú mide 200px y se apoya sobre lo que estabas mirando, así que le
   alcanza con un borde en Línea Fuerte, que es un paso más claro que
   cualquier borde de la pantalla que hay debajo.
   ========================================================================== */

.menu {
  position: fixed;
  /* Por encima del chrome pegajoso (20), que es lo más alto del sistema. */
  z-index: var(--z-flotante);
  display: grid;
  /* `minmax(0, 1fr)` y no la columna automática: una fila del menú lleva el
     texto de la acción a la izquierda y su pista a la derecha —«Cambiar el
     número · Ahora lleva el 2»— y las dos juntas piden más que el ancho máximo
     del menú. Con la columna midiéndose por su contenido, las filas se salían y
     el menú aparecía con una BARRA DE DESPLAZAMIENTO HORIZONTAL abajo, que en
     un menú de cinco renglones no es un control, es un defecto. Con la columna
     acotada a cero, `.menu__texto` hace lo que ya sabía hacer: recortarse. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  min-width: 200px;
  /* Y un poco más de ancho antes de recortar nada: el menú de un futbolista
     lleva su nombre entero —«Ver la ficha de Lucas Ruiz»— y a 280 empezaba a
     comerse el apellido con una pista al lado que sí entraba. */
  max-width: 340px;
  max-height: calc(var(--alto-ventana) - 2 * var(--sp-4));
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-panel);
}

.menu__item {
  display: flex;
  align-items: center;
  /* Sin esto la fila se niega a bajar de su contenido —es el `min-width: auto`
     de todo elemento flexible— y la columna acotada de arriba no sirve de
     nada: el que tiene que ceder es el texto de la acción. */
  min-width: 0;
  gap: var(--sp-4);
  min-height: 26px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  font-size: var(--fs-md);
  color: var(--text-secondary);
  text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

/* CON EL DEDO, 44. La lista de los mínimos táctiles vive en `app.css` —«EL
   DEDO»— y ahí están los ochenta controles del juego; éste es la excepción que
   tiene que estar acá, porque `menu.css` se carga después de `app.css` y la
   regla base de arriba declara `min-height`: a igual especificidad ganaría la
   de este archivo, y el renglón de allá sería una regla muerta que se lee como
   si funcionara. Se corrigió después de escribirlo así y medir 30 px igual.

   POR QUÉ IMPORTA MÁS ACÁ QUE EN UNA TABLA. En una lista, errarle a un renglón
   por dos píxeles abre la ficha del futbolista de al lado y se vuelve; acá
   EJECUTA. Los renglones de este menú venden, mandan a la reserva, sacan del
   banco y cambian el número de la camiseta, y ninguno pregunta después. Un
   menú es la superficie donde el error de puntería es más caro del juego, y
   era la única que había quedado en 30.

   Y LA MISMA VARA QUE EL RESTO: `pointer: coarse` más el ancho, que es la
   pareja con la que `app.css` reparte los 44. Con qué se toca decide el
   mínimo; el ancho está para que una tableta apaisada, que muestra el juego en
   su forma de escritorio, no pierda densidad. */
@media (pointer: coarse) and (max-width: 860px) {
  .menu__item { min-height: 44px; }
}

.menu__item .i { color: var(--icon-quiet); }

/* El hueco de un ítem sin icono. Mide lo que mide un `.i--sm` para que el texto
   quede en la misma columna que el de los ítems que sí lo llevan. */
.menu__hueco { width: 13px; flex: none; }

/* El foco se dibuja como el hover y no sólo con el anillo: en un menú abierto
   con el teclado, el ítem enfocado ES la selección. */
.menu__item:focus {
  background: var(--bg-hover);
  color: var(--text-primary);
}
@media (hover: hover) {
  .menu__item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
}

.menu__item:focus .i { color: inherit; }
@media (hover: hover) {
  .menu__item:hover .i { color: inherit; }
}

/* Una acción que no se puede hacer se muestra apagada con su motivo al lado,
   igual que la tabla del plantel muestra el veto: esconderla dejaría al DT
   buscando una acción que él cree que existe. */
.menu__item[disabled] {
  color: var(--text-disabled);
  cursor: default;
  background: none;
}

.menu__item[disabled] .i { color: var(--text-disabled); }

.menu__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__pista {
  margin-left: auto;
  padding-left: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  /* Y cede antes de empujar. La pista la escribe el dato —el motivo por el que
     algo no se puede, que puede ser una frase entera— y sin esto no se recorta
     ninguna de las dos: el `max-width` del menú corta la pista contra el borde
     con `overflow: hidden`, o sea en silencio y sin puntos suspensivos. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El pie. Aparece sólo en el menú que no tenía ninguna acción que ofrecer —el
   mapa— y dice cómo llegar al menú del navegador. No es un ítem: no se enfoca,
   no se pulsa y no entra en el recorrido del teclado, así que se dibuja como lo
   que es, la letra chica de abajo, separada por la misma línea que separa los
   grupos. */
.menu__pie {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--line-hairline);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.menu__sep {
  height: 1px;
  margin: var(--sp-2) 0;
  border: 0;
  background: var(--line-hairline);
}

/* Aparece fundiéndose y no creciendo: el menú ya sale del punto que tocaste,
   que es toda la relación de causa que necesita. Esa decisión sigue en pie —el
   desplegable SÍ crece desde su botón porque su botón está en un sitio fijo de
   la pantalla y el menú nace bajo el puntero—; lo que faltaba era irse. */
.menu { animation: menu-aparece var(--dur-fast) var(--ease); }

@keyframes menu-aparece { from { opacity: 0; } }

/* Y SE VA, que hasta el 1/9/2026 no hacía: `menu.js` llamaba a `.remove()` y el
   menú desaparecía entre dos fotogramas después de haber llegado fundiéndose.
   Es la Regla de la Mitad que Falta —ver `movimiento.css`, punto 4— en el
   hermano del desplegable, y se resuelve igual: el guion pone la marca, espera
   lo que dura esto y recién ahí lo saca del DOM.

   Deja de recibir clics en el mismo instante en que empieza a irse. Importa más
   acá que en el desplegable: los ítems de este menú venden a un futbolista y lo
   mandan a la reserva, y un menú que ya se está yendo no puede aceptar el
   segundo clic de un doble clic apurado. */
.menu[data-yendose] {
  animation: menu-se-va var(--dur-fast) var(--ease-salida) forwards;
  pointer-events: none;
}

@keyframes menu-se-va { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .menu { animation: none; }
  /* La salida no se apaga, se acorta: la regla global de `app.css` la deja en
     1ms, y su `forwards` es lo que mantiene al menú invisible hasta que el
     guion lo saca. Con `none` se quedaría a la vista los 140ms de la espera. */
  .menu[data-yendose] { animation-duration: 1ms; }
}