/* ====== Rostermania rebuild — minimalista, un equipo a la vez ====== */

/* Registrar --accent como color permite que el navegador lo interpole: al
   cambiar de equipo, todos los acentos viran de un color al otro en vez de
   pegar un salto seco. Si el navegador no lo soporta, cambia sin más. */
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #f97316;
}

:root {
  --bg: #0a0a0b;
  --surface: #141416;
  --surface-2: #1c1c1f;
  --border: #2a2a2e;
  --text: #f4f4f5;
  --text-dim: #9b9ba1;
  --accent: #f97316; /* se sobreescribe con el color del equipo activo */
  --radius: 14px;
  --rail-w: 104px;

  /* Curvas propias: las de fábrica (ease, linear) delatan mucho la animación.
     Estas arrancan rápido y frenan largo, que es lo que se percibe como fino. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.18s;
  --t-mid: 0.32s;
}

html { transition: --accent 0.5s var(--ease-soft); }

* { box-sizing: border-box; }

::selection { background: var(--accent); color: #000; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "topbar topbar"
    "rail   stage"
    "foot   foot";
}

/* Halo del color del equipo. Muy tenue a propósito: no debe leerse como un
   degradado, solo hacer que el negro no sea el mismo negro en cada equipo. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 65%),
    radial-gradient(80% 50% at 50% 105%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
}

img { max-width: 100%; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #000;
  padding: 8px 14px;
  border-radius: 0 0 8px 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Cabecera ---------- */

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* si la marca y el hueco de patrocinio no caben en una fila, el segundo baja en vez de desbordar */
  row-gap: 8px;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f97316, #dc2626);
  color: #fff;
  font-size: 18px;
}

.brand-dot { color: var(--text-dim); font-weight: 600; }

/* La marca lleva a la portada. El color lo hereda el nombre, así que el hover
   tiñe "ROSTERMANIA" de acento sin tocar el ".com" apagado. */
.brand-mark-link { display: inline-flex; border-radius: 9px; }
.brand-home {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-soft);
}
.brand-home:hover { color: var(--accent); }
.brand-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Dos líneas junto al logo: el nombre de la web con su cuenta de X al lado, y
   debajo la firma del autor, deliberadamente más pequeña para que no compita
   con la marca. */
.brand-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.brand-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  line-height: 1.05;
}

.brand-name { font-size: 1rem; }

/* El icono real de la web sustituye a la "R" pintada con CSS: fuera el
   degradado de fondo, que asomaría por las esquinas del círculo. */
.brand-mark-img {
  background: none;
  border-radius: 50%;
  display: block;
  width: 32px;
  height: 32px;
}

/* Pastilla de "Follow" en X, pequeña para no competir con la marca. */
.brand-social {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease-soft),
              background var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft);
}
.brand-social svg { width: 11px; height: 11px; fill: currentColor; flex-shrink: 0; }
.brand-social:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--accent);
}
.brand-social:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* En pantallas muy estrechas se queda solo el pájaro. */
@media (max-width: 520px) { .bs-txt { display: none; } .brand-social { padding: 3px 6px; } }

.brand-by {
  margin: 0;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--text-dim) 80%, transparent);
}
.brand-by a {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
.brand-by a:hover { color: var(--accent); border-bottom-color: currentColor; }
.brand-by a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hueco de patrocinio, al otro extremo de la cabecera (el "space-between"
   del .topbar lo empuja solo, sin necesitar un contenedor extra). Amarillo a
   propósito —lee como cartel publicitario, no como el resto de la UI—, pero
   con las mismas curvas y transición de hover que el resto de la marca. */
.sponsor-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fde047, #facc15);
  color: #1a1400;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
  /* OJO: nada de flex-shrink:0 aquí. Un flex item por defecto no encoge por
     debajo del contenido más ancho que no pueda partirse en dos líneas —y el
     correo, sin espacios, es justo eso—, así que sin min-width:0 el cuadrado
     empuja TODO el grid del body más ancho que la pantalla en móvil (se
     detectó de verdad: el texto de "Share image" se cortaba y aparecía hueco
     al deslizar a la derecha, sin relación con el email a simple vista). */
  min-width: 0;
  transition: transform var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
.sponsor-slot:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(250, 204, 21, 0.3); }
.sponsor-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sponsor-headline {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sponsor-sub { font-size: 0.62rem; font-weight: 600; opacity: 0.82; }
/* Segunda red de seguridad: si aun así no cupiera, que el correo se parta en
   vez de forzar el ancho de toda la página (no tiene espacios donde partir
   por las buenas). */
.sponsor-mail {
  text-decoration: underline;
  text-decoration-color: rgba(26, 20, 0, 0.35);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .sponsor-slot { padding: 5px 10px; }
  .sponsor-headline { font-size: 0.62rem; }
  /* Debajo de esto no cabe el mensaje entero sin romper la cabecera: se
     queda solo el titular y el contacto, que es lo mínimo que hace falta
     para que alguien interesado sepa a qué correo escribir. */
  .sponsor-reach { display: none; }
  .sponsor-mail { font-size: 0.6rem; }
}

@media (max-width: 520px) {
  .sponsor-headline { font-size: 0.56rem; }
  .sponsor-mail { font-size: 0.54rem; }
}

/* ---------- Pie de página ---------- */

.sitefoot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 9px 20px calc(9px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--text-dim) 78%, transparent);
}
.sitefoot p { margin: 0; }
.sitefoot a {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--text-dim) 35%, transparent);
  transition: color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
.sitefoot a:hover { color: var(--accent); border-bottom-color: currentColor; }
.sitefoot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.foot-brand { display: flex; gap: 8px; align-items: center; }
.foot-brand span { color: color-mix(in srgb, var(--text-dim) 45%, transparent); }

.topbar-actions { display: flex; gap: 8px; }

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color var(--t-fast) var(--ease-soft),
              background var(--t-fast) var(--ease-soft),
              translate var(--t-fast) var(--ease);
}
.btn:hover { border-color: var(--accent); background: var(--surface-2); }
.btn:active { translate: 0 1px; }
.btn-ghost { background: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); }
.btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.badge {
  background: var(--accent);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

/* ---------- Barra lateral de equipos ---------- */

.team-rail {
  grid-area: rail;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  display: flex;
  flex-direction: column;
}

/* Botones de vista, encima de los equipos y separados por una línea. */
.rail-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
}

.rail-btn {
  appearance: none;
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 9px;
  padding: 6px 3px 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-dim);
  font: inherit;
  text-decoration: none; /* .rail-btn también viste al enlace de H2H */
  transition: border-color var(--t-fast) var(--ease-soft),
              background var(--t-fast) var(--ease-soft),
              color var(--t-fast) var(--ease-soft);
}
.rail-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-btn-label {
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.05;
  text-align: center;
}
.rail-btn:hover { color: var(--text); border-color: var(--accent); }
.rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rail-btn[aria-pressed="true"], .rail-btn[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
/* El contador va como pastilla en la esquina, no en línea: ahorra altura. */
.rail-btn .badge {
  position: absolute;
  top: -5px;
  right: -4px;
  font-size: 9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
}

.stage { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* En escritorio la página no se desplaza: la cabecera queda siempre visible
   y es el panel el que hace scroll por su cuenta. */
@media (width > 760px) {
  body { height: 100dvh; overflow: hidden; }
  .team-rail { overscroll-behavior: contain; }
  .stage { overflow-y: auto; }
}

/* Ojo: las reglas de la barra según la altura de ventana viven al final del
   archivo, después de los estilos base de .dock-tab, o estos las pisarían. */

/* Los 12 equipos caben siempre: escudo, texto y espaciado escalan con la
   altura de la ventana, así que la barra nunca necesita scroll. */
.rail-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1px, 0.35vh, 5px);
  padding: clamp(6px, 1vh, 12px) 6px;
}

.dock-tab {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: clamp(4px, 0.8vh, 9px) 4px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.45vh, 5px);
  color: var(--text-dim);
  font: inherit;
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}

/* Indicador del equipo activo: una barrita lateral en vez de recuadrar toda
   la pestaña. Crece desde el centro, que es más limpio que aparecer de golpe. */
.dock-tab::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  translate: 0 -50%;
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: var(--tab-color, var(--accent));
  transition: height var(--t-mid) var(--ease);
}
.dock-tab[aria-selected="true"]::before { height: 62%; }

.dock-tab img {
  width: clamp(24px, 3.4vh, 38px);
  height: clamp(24px, 3.4vh, 38px);
  object-fit: contain;
  filter: grayscale(0.75) opacity(0.6);
  transition: filter var(--t-mid) var(--ease-soft), scale var(--t-mid) var(--ease);
}

.dock-tab .tab-label {
  font-size: clamp(0.48rem, 1.05vh, 0.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-tab:hover img, .dock-tab:focus-visible img { filter: none; scale: 1.12; }
.dock-tab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.dock-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.dock-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 11%, transparent);
  color: var(--text);
}
.dock-tab[aria-selected="true"] img { filter: none; }

.dock-tab.drag-over {
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 22%, transparent);
}
.dock-tab.drag-over img { filter: none; scale: 1.18; }

/* ---------- Escenario central ---------- */

/* Dos columnas (cajón y panel) y un pie que cruza las dos por debajo: así el
   cajón se estira exactamente hasta donde acaban las fotos, y la línea de
   atajos ya no arrastra al cajón 50px más abajo.

   El cajón va a la IZQUIERDA, junto a la barra de equipos: quien retransmite
   suele tener la cámara en la esquina derecha, y ahí tapaba justo la lista de
   agentes libres, que es lo que más se mira mientras se fichan jugadores. */
.stage {
  grid-area: stage;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "drawer panel"
    "foot   foot";
  justify-content: start;
  align-items: stretch;
  gap: 20px;
  padding: clamp(16px, 3vh, 28px) 24px clamp(16px, 3.5vh, 40px);
  width: 100%;
  /* La banda ocupa todo el ancho: si se estrecha, las fotos salen como tiras. */
  max-width: 1400px;
  /* Pegado a la barra de equipos en vez de centrado: en una pantalla ancha el
     centrado dejaba un pasillo muerto entre el menú y la lista de agentes
     libres, y empujaba todo hacia la derecha, que es justo donde se pone la
     cámara al retransmitir. Ahora lo que sobra queda a la derecha. */
  margin: 0 auto 0 0;
  min-width: 0;
}
.team-panel { grid-area: panel; }
.fa-drawer { grid-area: drawer; }
.stage-foot { grid-area: foot; min-width: 0; }

/* Con el cajón cerrado su columna mide cero, pero el hueco entre columnas
   seguía ahí y empujaba el panel 20px a la derecha. Ahora que ese hueco está
   al principio se notaba, así que se cierra con el cajón. */
.stage:has(> .fa-drawer[hidden]) { column-gap: 0; }

/* Columna: la banda de jugadores se come toda la altura que sobre. */
.team-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.team-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.team-view[hidden] { display: none; }
/* Primer pintado sin destello: el script inline del head marca la vista que
   toca y así el esqueleto vacío del equipo no asoma cuando se va a entrar en
   ALL TEAMS. app.js retira el atributo en cuanto renderiza. */
html[data-vista="all"] .team-view { display: none; }

/* ---------- Vista general: tarjetas compactas de los 12 equipos ---------- */

/* Cabecera propia de la vista general: hace de pareja del banner de equipo y
   es donde vive el botón que exporta los 12 rosters de una vez. */
.ov-topbar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.ov-topbar[hidden] { display: none; }
.ov-title-wrap { min-width: 0; }

.ov-kicker {
  margin: 0 0 3px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: color-mix(in srgb, var(--accent) 70%, var(--text-dim));
}
.ov-title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* Papelera + revert + compartir, empujados al extremo derecho. */
.ov-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }

.overview {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 12px;
  align-content: start;
  padding-right: 2px;
}
.overview[hidden] { display: none; }

.ov-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--t-fast) var(--ease-soft);
}
.ov-card:hover { border-color: color-mix(in srgb, var(--team-color) 55%, var(--border)); }

/* Cabecera de tarjeta: botón del equipo + atajos (vaciar/revert/descargar). */
.ov-top { display: flex; align-items: center; gap: 4px; }
.ov-top .ov-head { flex: 1; min-width: 0; }
.ov-tools { display: flex; gap: 4px; flex-shrink: 0; }
.ov-icon {
  appearance: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft),
              background var(--t-fast) var(--ease-soft);
}
.ov-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ov-icon:hover { color: var(--text); border-color: var(--team-color, var(--accent)); background: var(--surface-2); }
.ov-icon.peligro:hover { color: #ef4444; border-color: #ef4444; background: color-mix(in srgb, #ef4444 10%, transparent); }
/* En táctil, área digna sin agrandar el dibujo. */
@media (hover: none) {
  .ov-icon { width: 32px; height: 32px; }
}

.ov-head {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-align: left;
}
.ov-head img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.ov-head span:nth-child(2) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-head .ov-go {
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1;
  transition: translate var(--t-fast) var(--ease), color var(--t-fast) var(--ease-soft);
}
.ov-head:hover .ov-go, .ov-head:focus-visible .ov-go { translate: 3px 0; color: var(--team-color); }
.ov-head:focus-visible { outline: 2px solid var(--team-color); }

.ov-roster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.ov-slot {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  padding: 0;
  cursor: grab;
  font: inherit;
  color: inherit;
}
.ov-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.ov-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 2px 4px;
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 900;
  color: color-mix(in srgb, var(--team-color) 80%, #fff);
}

.ov-slot:hover, .ov-slot:focus-visible, .ov-slot.selected {
  outline: 2px solid var(--team-color, var(--accent));
  outline-offset: -2px;
  z-index: 1;
}
.ov-slot.drag-over {
  outline: 3px solid var(--team-color, var(--accent));
  outline-offset: -3px;
  background: color-mix(in srgb, var(--team-color) 20%, var(--surface-2));
  z-index: 2;
}
.ov-slot.dragging { opacity: 0.4; }

.ov-slot.empty {
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
}
.ov-slot.empty:hover, .ov-slot.empty:focus-visible { border-color: var(--team-color); color: var(--text); }

/* En escritorio, la vista general debe enseñar los 12 equipos SIN scroll:
   3 columnas × 4 filas que se reparten toda la altura disponible. Para eso
   las miniaturas dejan de fijar su proporción y estiran hasta llenar la fila
   (la foto recorta con object-fit). Si la ventana es muy baja, el minmax
   evita que las tarjetas se aplasten y entonces sí aparece scroll. */
@media (width > 760px) {
  .overview {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, minmax(122px, 1fr));
    gap: 10px;
  }
  .ov-card { min-height: 0; padding: 8px 10px 10px; gap: 6px; }
  .ov-roster { flex: 1; min-height: 0; gap: 6px; }
  .ov-slot { aspect-ratio: auto; min-height: 0; }
  .ov-name {
    font-size: clamp(0.56rem, 0.75vw, 0.78rem);
    padding: 12px 3px 6px;
  }
  .ov-head { font-size: 0.88rem; }
}

/* Portátiles de poca altura: se recorta lo prescindible para que los 12
   equipos sigan entrando sin scroll. */
@media (width > 760px) and (max-height: 700px) {
  .overview { grid-template-rows: repeat(4, minmax(104px, 1fr)); gap: 8px; }
  .keys-hint { display: none; }
  .hint { margin-top: 8px; }
}

.team-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

/* Revert + compartir se van al extremo opuesto del nombre del equipo. */
.team-share { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }

/* La papelera va solo con icono y avisa en rojo: borra de verdad. */
.btn-clear { padding: 8px 10px; }
.btn-clear:hover {
  border-color: #ef4444;
  background: color-mix(in srgb, #ef4444 10%, var(--surface));
  color: #ef4444;
}
/* En pantallas estrechas el revert también se queda solo con el icono. */
@media (max-width: 700px) { .rv-txt { display: none; } .btn-revert { padding: 8px 10px; } }

.btn-share {
  font-size: 0.82rem;
  padding: 8px 13px;
}
.btn-share svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Diálogo de compartir ---------- */

.share-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  max-width: min(92vw, 900px);
  width: 100%;
}
.share-dialog::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px); }

.share-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* La imagen de un equipo es 16:9 pero la de los 12 es un póster mucho más
   alto: se limita por alto además de por ancho para que quepa entera. */
#share-canvas {
  max-width: 100%;
  max-height: 66vh;
  width: auto;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.share-status:empty { display: none; }
.share-status { margin: 0; font-size: 0.85rem; color: var(--text-dim); }

.share-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.share-actions .btn { text-decoration: none; }
.share-actions .btn[href] { border-color: var(--accent); }
.share-actions .btn:not([href]):not(button) { opacity: 0.45; pointer-events: none; }

.share-note { margin: 0; font-size: 0.75rem; color: var(--text-dim); }

.team-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 45%, transparent));
}

.team-city {
  margin: 0 0 3px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: color-mix(in srgb, var(--accent) 70%, var(--text-dim));
}

.team-name {
  margin: 0;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  /* Tracking negativo en un peso tan grueso: es lo que da el aire editorial
     de las cabeceras deportivas modernas frente al look de plantilla. */
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-wrap: balance;
}
.team-name::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  margin-top: 12px;
  border-radius: 99px;
  background: var(--accent);
  transform-origin: left center;
  animation: bar-in 0.55s var(--ease) both;
}

@keyframes bar-in { from { scale: 0 1; } to { scale: 1 1; } }

/* Entrada al cambiar de equipo, para navegadores sin View Transitions. */
@keyframes team-in {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: none; }
}
.team-panel.switching .team-header,
.team-panel.switching .roster {
  animation: team-in var(--t-mid) var(--ease);
}

/* ---------- Cambio de equipo con View Transitions ----------
   El navegador fotografía el equipo saliente y el entrante y los cruza. Se le
   pone nombre a la cabecera y a cada hueco para poder escalonar la entrada:
   los cuatro jugadores aparecen uno detrás de otro, no todos de golpe. */
.team-header { view-transition-name: team-head; }

@keyframes vt-out { to { opacity: 0; scale: 0.99; } }
@keyframes vt-in { from { opacity: 0; scale: 1.01; translate: 0 10px; } }

::view-transition-old(team-head),
::view-transition-old(slot-0), ::view-transition-old(slot-1),
::view-transition-old(slot-2), ::view-transition-old(slot-3) {
  animation: vt-out 0.2s var(--ease-soft) both;
}
::view-transition-new(team-head),
::view-transition-new(slot-0), ::view-transition-new(slot-1),
::view-transition-new(slot-2), ::view-transition-new(slot-3) {
  animation: vt-in 0.45s var(--ease) both;
}
::view-transition-new(slot-0) { animation-delay: 0.03s; }
::view-transition-new(slot-1) { animation-delay: 0.09s; }
::view-transition-new(slot-2) { animation-delay: 0.15s; }
::view-transition-new(slot-3) { animation-delay: 0.21s; }

/* ---------- Roster: banda a sangre ----------
   Las cuatro fotos van pegadas, sin marcos ni huecos, como un póster de equipo.
   El truco del `gap: 1px` sobre un fondo del color del borde dibuja las líneas
   divisorias sin necesidad de bordes por tarjeta (y funciona con 4 o 2 columnas). */

.roster {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.slot {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  padding: 0;
  cursor: grab;
  font: inherit;
  color: inherit;
  text-align: center;
}

/* Sin separación entre tarjetas hace falta un realce fuerte al pasar por encima,
   porque es lo único que delata que el jugador se puede arrastrar. */
.slot:hover, .slot:focus-visible, .slot.selected {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  z-index: 2;
}
.slot:focus-visible { outline-width: 4px; }

/* Además del contorno, el color del equipo sube desde abajo. Da sensación de
   foco sin tener que separar la tarjeta, que rompería la banda. */
.slot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--accent) 32%, transparent), transparent);
  transition: opacity var(--t-mid) var(--ease-soft);
}
.slot:hover::after, .slot:focus-visible::after, .slot.selected::after { opacity: 1; }

.slot img.player-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: scale 0.5s var(--ease);
}
.slot:hover img.player-photo, .slot:focus-visible img.player-photo { scale: 1.05; }

/* Velo en varias paradas: una sola rampa deja un corte visible a media foto. */
.slot .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.62) 18%,
    rgba(0, 0, 0, 0.24) 38%,
    rgba(0, 0, 0, 0.06) 55%,
    transparent 72%
  );
}

.slot .plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2; /* por encima del brillo de hover */
  padding: 14px 10px 16px;
  transition: translate 0.42s var(--ease);
}

/* ---------- Panel de estadísticas al pasar por encima ----------
   Ocupa el tercio inferior justo, y el nombre sube exactamente esa misma
   distancia para quedar pegado encima. Se usa `cqh` (altura del contenedor)
   en lugar de porcentajes porque `translate: %` se mide sobre el propio
   elemento, no sobre la tarjeta, y no cuadraría. */
.slot.has-stats { container-type: size; }

/* Con 8 pastillas el panel necesita más alto que con las 4 barras antiguas. */
:root { --sp-h: 44cqh; }

.stats-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sp-h);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1.8cqh;
  padding: 2.6cqh 6% 2.8cqh;
  background: linear-gradient(to top, rgba(6, 6, 8, 0.97), rgba(10, 10, 13, 0.93));
  border-top: 2px solid var(--accent);
  translate: 0 100%;
  opacity: 0;
  transition: translate 0.42s var(--ease), opacity 0.28s var(--ease-soft);
  pointer-events: none; /* no debe estorbar al arrastrar */
}

/* Solo en dispositivos con puntero real. En táctil el hover no existe y se
   quedaría el panel "pegado" tras el primer toque; ahí no se muestra. */
@media (hover: hover) {
  .slot.has-stats:hover .stats-panel { translate: 0 0; opacity: 1; }
  .slot.has-stats:hover .plate { translate: 0 calc(-1 * var(--sp-h)); }
}

/* Con teclado funciona en cualquier dispositivo. */
.slot.has-stats:focus-visible .stats-panel { translate: 0 0; opacity: 1; }
.slot.has-stats:focus-visible .plate { translate: 0 calc(-1 * var(--sp-h)); }

.sp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: clamp(0.56rem, 1.55cqh, 0.62rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  flex-shrink: 0;
}
.sp-head .sp-game { color: var(--accent); letter-spacing: 0.08em; }

/* Ocho pastillas fijas, dos por modo y el mismo set para todos: el #puesto
   delante, grande y coloreado por su franja; la etiqueta a dos líneas y el
   valor al final, ambos en blanco (elección del usuario, 2026-08-04). */
.sp-chips {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 1.3cqh 5px;
}

/* Los tamaños van en `cqw` (ancho de la tarjeta): el texto entero escala con
   la pastilla y SIEMPRE cabe — nada de elipsis (petición expresa del usuario:
   antes que "…", texto más pequeño). Los `clamp` solo frenan los extremos. */
.sp-chip {
  display: flex;
  align-items: center;
  gap: clamp(3px, 1.3cqw, 6px);
  min-width: 0;
  border-radius: clamp(5px, 1.8cqw, 8px);
  padding: 2px clamp(3px, 1.7cqw, 8px);
  background: color-mix(in srgb, var(--tier) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 35%, transparent);
}

.sp-chip .sp-rk {
  flex-shrink: 0;
  font-size: clamp(0.62rem, 6cqw, 1.22rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--tier);
  font-variant-numeric: tabular-nums;
}

.sp-chip .sp-lbl {
  flex: 1;
  min-width: 0;
  font-size: clamp(0.34rem, 3cqw, 0.62rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  white-space: nowrap; /* el <br> ya marca las dos líneas; nada re-envuelve */
}

.sp-chip .sp-val {
  flex-shrink: 0;
  font-size: clamp(0.4rem, 3.3cqw, 0.74rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.94);
  font-variant-numeric: tabular-nums;
}

/* Jugador sin ese dato concreto: pastilla neutra apagada. */
.sp-chip.sp-vacia {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.sp-chip.sp-vacia .sp-rk { color: #3f3f46; }

/* Tarjeta muy estrecha (ventana de escritorio diminuta): una sola columna de
   pastillas — cada una dobla su ancho y el texto vuelve a caber con holgura. */
@container (max-width: 150px) {
  .sp-chips { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-panel, .slot .plate, .slot .p-bio { transition: none; }
}

.slot .p-name {
  display: block;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(0.9rem, 1.7vw, 1.4rem);
  letter-spacing: 0.03em;
  text-shadow: 0 2px 8px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ficha personal sobre el nombre. Se despliega con el truco de animar
   grid-template-rows de 0fr a 1fr, que es la forma limpia de animar una
   altura automática sin saber cuánto mide. */
.slot .p-bio {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.42s var(--ease), opacity 0.26s var(--ease-soft);
}
.slot .p-bio-in { overflow: hidden; min-height: 0; }

.slot .bio-name {
  display: block;
  /* Un punto más grande que antes, pero siempre por debajo del nickname. */
  font-size: clamp(0.7rem, 1.9cqh, 0.88rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.94);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 5px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Una sola línea: el rol destacado (define al jugador) y a su lado la edad y
   el país como contexto. Antes eran tres pastillas iguales y no se distinguía
   qué era cada cosa. */
.slot .bio-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 7px;
}

.slot .bio-role {
  font-size: clamp(0.56rem, 1.5cqh, 0.7rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
  background: var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.25;
}

.slot .bio-facts {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(0.58rem, 1.55cqh, 0.75rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px #000;
}
.slot .bio-sep { color: rgba(255, 255, 255, 0.3); }
.slot .bio-fact { white-space: nowrap; }

.slot .bio-tag {
  font-size: clamp(0.46rem, 1.2cqh, 0.58rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, rgba(0, 0, 0, 0.55));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

@media (hover: hover) {
  .slot.has-stats:hover .p-bio { grid-template-rows: 1fr; opacity: 1; }
}
.slot.has-stats:focus-visible .p-bio { grid-template-rows: 1fr; opacity: 1; }

/* Palmarés bajo el nombre: anillos de Champs, trofeos y temporadas en CDL.
   Todo en blanco y con el mismo trazo, para que no compita con el nombre. */
.slot .p-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 9px;
  margin-top: 5px;
  font-size: clamp(0.58rem, 0.82vw, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 5px #000;
}

.slot .p-stats .stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.slot .p-stats .szn { letter-spacing: 0.09em; }

.slot .p-stats svg {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px #000);
}

/* Placeholder cuando no hay foto del jugador */
.slot .photo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 18%;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--accent) 85%, #fff);
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%),
    var(--surface-2);
}

/* Hueco vacío (TBD): dentro de la banda no puede llevar borde discontinuo propio,
   así que el trazo va en la etiqueta interior. */
.slot.empty {
  background: var(--surface-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--text-dim);
}
.slot.empty .tbd {
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 12px 18px;
}
.slot.empty:hover .tbd, .slot.empty:focus-visible .tbd { border-color: var(--accent); color: var(--text); }

/* Botón quitar jugador */
.slot .remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.slot:hover .remove, .slot:focus-within .remove { opacity: 1; }
.remove:hover { background: #dc2626; }
.remove:focus-visible { opacity: 1; outline: 2px solid #fff; }

/* Espejo de la cruz en la esquina izquierda: cambia al jugador por otro. */
.slot .swap {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.slot .swap svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.slot:hover .swap, .slot:focus-within .swap { opacity: 1; }
.swap:hover { background: var(--accent); color: #000; }
.swap:focus-visible { opacity: 1; outline: 2px solid #fff; }

/* Estados de arrastre / selección */
.slot.drag-over {
  outline: 4px solid var(--accent);
  outline-offset: -4px;
  z-index: 3;
}
.slot.drag-over::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.slot.dragging { opacity: 0.4; }

/* El margen superior ya lo aporta el `gap` de la rejilla del escenario. */
.hint {
  min-height: 1.4em;
  margin: 0 2px;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.keys-hint {
  margin: 4px 2px 0;
  color: color-mix(in srgb, var(--text-dim) 65%, transparent);
  font-size: 0.72rem;
}

/* ---------- Cajón agentes libres ---------- */

/* El cajón es hermano del panel dentro de `.stage`, que reparte en fila con
   `align-items: stretch`: sin tope de altura llega justo hasta abajo, a la
   altura de las fotos en «one team» y de la rejilla en «all teams».
   Se organiza en columna para que solo ruede la lista: título, pestañas y
   buscador quedan fijos y siempre a la vista. */
.fa-drawer {
  /* Escala con la ventana en vez de quedarse en 250px fijos: en la pantalla
     grande de quien retransmite la lista se lee de un vistazo, y en ventanas
     pequeñas se queda en los 250px de siempre para no robarle sitio a las
     fotos (la rejilla de los 12 equipos ya va justa por debajo de 1100px). */
  width: clamp(250px, 21vw, 360px);
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.fa-drawer[hidden] { display: none; }

/* Todo lo que va sobre la lista mantiene su tamaño: en un contenedor flex, si
   no se marca, el navegador lo encogería para dejar sitio a la lista. */
.fa-head, .fa-tabs, .fa-help, .fa-search { flex-shrink: 0; }

.fa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.fa-close {
  appearance: none;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft),
              background var(--t-fast) var(--ease-soft);
}
.fa-close:hover { color: var(--text); border-color: var(--accent); background: var(--surface-2); }
.fa-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.fa-title { margin: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
.fa-total { color: var(--text-dim); font-weight: 600; font-size: 0.8rem; letter-spacing: 0; }
.fa-help { margin: 0 0 10px; font-size: 0.78rem; color: var(--text-dim); }

/* Dos pestañas: agentes libres y jugadores con equipo. Así se puede cambiar
   un titular por otro titular sin salir del cajón. */
.fa-tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0 10px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.fa-tab {
  flex: 1;
  appearance: none;
  border: 0;
  border-radius: 7px;
  padding: 6px 4px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.fa-tab:hover { color: var(--text); }
.fa-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.fa-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fa-tab .fa-total { font-size: 0.7rem; }

.fa-search {
  width: 100%;
  margin-bottom: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  transition: border-color var(--t-fast) var(--ease-soft);
}
.fa-search::placeholder { color: color-mix(in srgb, var(--text-dim) 75%, transparent); }
.fa-search:focus { outline: none; border-color: var(--accent); }

/* Se queda con toda la altura que sobre y es la única que hace scroll, así el
   cajón llega hasta abajo sin que se pierdan las pestañas ni el buscador. */
.fa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* Sitio para el contorno de foco de las filas, que si no se recorta. */
  padding: 2px;
  margin: -2px;
  overscroll-behavior: contain;
}

.fa-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: inherit;
  font: inherit;
  cursor: grab;
  transition: border-color var(--t-fast) var(--ease-soft),
              background var(--t-fast) var(--ease-soft),
              translate var(--t-fast) var(--ease);
}
/* Separador de grupos del cajón: los prospectos del ranking arriba y el resto
   debajo, para no tener que recorrer 114 nombres a ciegas. */
.fa-grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 2px 2px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--text-dim) 85%, transparent);
}
/* El título es a su vez caja flex para que la rayita crezca ENTRE él y el
   crédito, en vez de quedar detrás de todo. */
.fg-txt {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.fg-txt::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.fg-src {
  flex-shrink: 0;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--text-dim) 35%, transparent);
  transition: color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
.fg-src:hover { color: var(--accent); border-bottom-color: currentColor; }
.fg-src:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fa-list > .fa-grupo:first-child { margin-top: 0; }

.fa-item:hover, .fa-item:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  translate: 2px 0;
}

/* ---------- Ficha flotante de estadísticas ----------
   La usan la vista general y el cajón, donde las tarjetas son demasiado
   pequeñas para el panel interno. Solo aparece al señalar o enfocar. */

.stat-tip {
  position: fixed;
  z-index: 60;
  width: 268px;   /* ancho para que las 8 pastillas no recorten etiquetas */
  padding: 11px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--tip-color, var(--accent)) 45%, var(--border));
  border-radius: 12px;
  background: rgba(9, 9, 11, 0.97);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  pointer-events: none; /* nunca debe estorbar al clic ni al arrastre */
  animation: tip-in 0.16s var(--ease-soft);
}
.stat-tip[hidden] { display: none; }

@keyframes tip-in { from { opacity: 0; translate: -4px 0; } to { opacity: 1; translate: none; } }

/* La foto manda: en el cajón las filas son diminutas y con el nombre no basta
   para reconocer a nadie. Va a sangre arriba de la ficha, con el nombre y el
   equipo encima como en las tarjetas del roster. */
.tip-foto {
  position: relative;
  margin: -11px -12px 0;
  height: 146px;
  overflow: hidden;
  border-radius: 11px 11px 0 0;
  background: var(--surface-2);
}
/* Clase propia y no `.tip-foto > img`: el escudo también es hijo directo y un
   selector de elemento le ganaba en especificidad, dejándolo a pantalla
   completa encima de la foto. */
.tip-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Las fotos EWC26 traen la cabeza a un 4% del borde: un desplazamiento
     vertical mayor le cortaría el pelo. */
  object-position: 50% 2%;
  display: block;
}
.tip-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(9, 9, 11, 0.97) 4%, rgba(9, 9, 11, 0.35) 44%, transparent 70%),
    radial-gradient(75% 70% at 50% 28%, color-mix(in srgb, var(--tip-color, var(--accent)) 24%, transparent), transparent 70%);
}
/* Sin foto en el almacén: iniciales sobre el color del equipo, como el roster. */
.tip-iniciales {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--tip-color, var(--accent)) 85%, #fff);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tip-color, var(--accent)) 22%, transparent), transparent 65%);
}

.tip-crest {
  position: absolute;
  top: 8px;
  right: 9px;
  z-index: 2;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}

.tip-foto-txt {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  z-index: 2;
  min-width: 0;
}
.tip-name {
  display: block;
  font-size: 1.02rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 8px #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tip-team {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tip-color, var(--accent));
  text-shadow: 0 1px 5px #000;
}

.tip-real {
  margin: 9px 0 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text);
}
.tip-meta {
  margin: 2px 0 0;
  font-size: 0.68rem;
  color: var(--text-dim);
}

.tip-honours {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}
.tip-honours .stat { display: inline-flex; align-items: center; gap: 3px; }
.tip-honours .szn { letter-spacing: 0.08em; color: var(--text-dim); }
.tip-honours svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tip-stats { margin-top: 10px; }

/* Las pastillas reutilizan `.sp-chip`, pero sus tamaños van en `cqh` porque
   allí viven dentro de una tarjeta con contención. Aquí no hay contenedor,
   así que se fijan en rem. */
.stat-tip .sp-head { font-size: 0.6rem; }
.stat-tip .sp-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }
.stat-tip .sp-chip { padding: 4px 7px; gap: 5px; }
.stat-tip .sp-chip .sp-rk { font-size: 1.05rem; }
.stat-tip .sp-chip .sp-lbl { font-size: 0.5rem; letter-spacing: 0.02em; }
.stat-tip .sp-chip .sp-val { font-size: 0.66rem; }

.tip-nodata {
  margin: 9px 0 0;
  font-size: 0.68rem;
  font-style: italic;
  color: color-mix(in srgb, var(--text-dim) 80%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .stat-tip { animation: none; }
}

/* El cajón entra deslizando en vez de aparecer de golpe. Desde la izquierda,
   que es el lado por el que ahora asoma en escritorio. */
@keyframes drawer-in { from { opacity: 0; translate: -12px 0; } to { opacity: 1; translate: none; } }
.fa-drawer:not([hidden]) { animation: drawer-in var(--t-mid) var(--ease); }
.fa-item.selected { outline: 2px solid var(--accent); }

.fa-item img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  object-position: top;
  background: var(--surface);
}

.fa-item .fa-name { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; }

/* Fila de jugador con equipo: nombre arriba, equipo debajo y su escudo a la
   derecha. El color del borde es el del equipo, que hace de guía visual. */
.fa-item-team { border-color: color-mix(in srgb, var(--row-color) 40%, var(--border)); }
.fa-item-team:hover, .fa-item-team:focus-visible {
  border-color: var(--row-color);
  background: color-mix(in srgb, var(--row-color) 14%, var(--surface-2));
}
.fa-item-team.selected { outline-color: var(--row-color); }

.fa-lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.fa-lines .fa-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-team {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--row-color) 62%, var(--text-dim));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Con `.fa-item img` delante hace falta la misma fuerza o ganaría el retrato. */
.fa-item img.fa-crest {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  opacity: 0.85;
}

/* Iniciales para los agentes libres sin foto en el almacén. */
.fa-fallback {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: color-mix(in srgb, var(--accent) 80%, #fff);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.fa-empty { color: var(--text-dim); font-size: 0.85rem; }

/* ---------- Barra de equipos según la altura de ventana ----------
   Van aquí, después de los estilos base de .dock-tab, para que ganen ellas.
   Objetivo: que los 12 escudos quepan siempre y nunca salga barra de scroll. */

/* Los 12 escudos SE REPARTEN la altura que sobra bajo los botones de vista.
   Al ser `flex: 1 1 0` con `min-height: 0` se encogen lo que haga falta, así
   que nunca hay scroll sea cual sea la altura de la ventana. Es más robusto
   que ir persiguiendo tamaños con media queries. */
@media (width > 760px) {
  .team-rail { overflow: hidden; }
  .rail-tabs {
    flex: 1;
    min-height: 0;
    gap: clamp(1px, 0.3vh, 4px);
    padding: clamp(4px, 0.8vh, 10px) 6px;
  }
  .dock-tab {
    flex: 1 1 0;
    min-height: 0;
    justify-content: center;
    padding: 2px 4px;
    gap: clamp(1px, 0.35vh, 4px);
  }
  /* Sin `min-height: 0` una imagen se niega a bajar de su tamaño intrínseco
     y desbordaría la barra por mucho que la pestaña encoja. */
  .dock-tab img {
    flex: 0 1 auto;
    min-height: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: clamp(20px, 3.4vh, 38px);
  }
  .dock-tab .tab-label { flex-shrink: 0; }
}

/* Con los dos botones arriba ya no caben 12 nombres: se dejan solo los
   escudos (el nombre sigue en el tooltip y para lectores de pantalla). */
@media (width > 760px) and (max-height: 800px) {
  :root { --rail-w: 76px; }
  .dock-tab .tab-label { display: none; }
}

/* Ventana muy baja: los botones pierden también su texto. */
@media (width > 760px) and (max-height: 560px) {
  :root { --rail-w: 62px; }
  .rail-btn-label { display: none; }
  .rail-actions { padding: 6px 5px; gap: 3px; }
  .rail-btn { padding: 5px 3px; }
}

/* ---------- Responsive: en pantallas estrechas la barra pasa abajo ---------- */

@media (max-width: 760px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "topbar"
      "stage"
      "foot"
      "rail";
  }

  /* Los créditos van con el contenido, encima de la barra de equipos, que
     sigue siendo la última fila para que su `sticky bottom` funcione. */
  .sitefoot {
    justify-content: center;
    text-align: center;
    padding: 10px 16px 12px;
    font-size: 0.66rem;
    line-height: 1.5;
  }
  .sitefoot .foot-brand { justify-content: center; }

  .team-rail {
    position: sticky;
    bottom: 0;
    border-right: none;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(14px);
    overflow-y: visible;
    overflow-x: auto;
    z-index: 40;
    /* En horizontal los botones van a la izquierda y los equipos se deslizan
       a su derecha, sin arrastrarlos fuera de la vista. */
    flex-direction: row;
    align-items: stretch;
  }

  .rail-actions {
    flex-direction: row;
    gap: 5px;
    padding: 8px 8px;
    border-bottom: none;
    border-right: 1px solid var(--border);
    position: sticky;
    left: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(14px);
  }
  .rail-btn { min-width: 54px; justify-content: center; }
  .rail-btn svg { width: 15px; height: 15px; }
  .rail-btn-label { font-size: 0.44rem; }

  .rail-tabs {
    flex-direction: row;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 10px;
  }

  .dock-tab { min-width: 64px; flex-shrink: 0; padding: 8px 6px 6px; }
  .dock-tab img { width: 32px; height: 32px; }

  /* Con la barra abajo, el indicador del equipo activo pasa de lateral a
     inferior: si no, la barrita quedaría flotando a la izquierda del escudo. */
  .dock-tab::before {
    left: 50%;
    top: auto;
    bottom: 0; /* dentro de la pestaña: la barra recorta lo que sobresalga */
    translate: -50% 0;
    width: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    transition: width var(--t-mid) var(--ease);
  }
  .dock-tab[aria-selected="true"]::before { width: 58%; height: 3px; }

  /* Todo apilado en una columna: panel, cajón y pie, en ese orden. */
  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "panel" "drawer" "foot";
    align-items: stretch;
    padding: 20px 16px 24px;
  }
  /* Aquí el cajón se apila debajo y la página crece con el contenido: sin un
     tope, la lista de 108 agentes libres se estiraría sin fin. */
  .fa-drawer { width: 100%; max-height: 70vh; }
  /* Aquí la página crece con el contenido, así que la banda no puede estirarse
     a lo alto o las tarjetas saldrían como tiras estrechas. Se le fija la
     proporción del conjunto para que cada foto mantenga su formato vertical. */
  .roster { flex: 0 0 auto; aspect-ratio: 2.2 / 1; }
  .keys-hint { display: none; }
}

@media (max-width: 520px) {
  /* 2 columnas × 2 filas: la proporción del bloque es la de una sola tarjeta. */
  .roster { grid-template-columns: repeat(2, 1fr); aspect-ratio: 0.72 / 1; }
  /* La tarjeta es mucho más baja aquí: el panel necesita más fracción para
     que las cuatro filas no se salgan. */
  :root { --sp-h: 58cqh; }
  .stats-panel { gap: 1.6cqh; padding: 2.4cqh 5% 2.6cqh; }
  .sp-chips { gap: 1cqh 4px; }
  .team-logo { width: 48px; height: 48px; }
  .slot .plate { padding: 10px 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Táctil y móvil (la mayoría del tráfico) ---------- */

/* Los toques rápidos seguidos (elegir jugador + destino) no deben disparar el
   doble-tap-zoom de iOS. Solo en los controles; el pellizco sigue funcionando. */
.slot, .ov-slot, .fa-item, .dock-tab, .rail-btn, .fa-tab, .btn, .remove, .swap {
  touch-action: manipulation;
}

/* Sin hover no hay reveladores: los botones de quitar (✕) y cambiar (⇄) están
   siempre a la vista y con área táctil digna. Invisibles-pero-tocables era
   una trampa: un roce en la esquina soltaba al jugador sin aviso. */
@media (hover: none) {
  .slot .remove, .slot .swap { opacity: 1; width: 34px; height: 34px; }
  .slot .remove::after, .slot .swap::after {
    content: "";
    position: absolute;
    inset: -6px;
  }
}

@media (max-width: 760px) {
  /* iOS Safari amplía la página al enfocar inputs de menos de 16px. */
  .fa-search { font-size: 16px; }
  /* Objetivos táctiles de los controles primarios del cajón. */
  .fa-tab { padding: 11px 4px; }
  .fa-close { width: 40px; height: 40px; font-size: 14px; }
  /* Etiquetas de la navegación inferior en tamaño legible. */
  .rail-btn-label { font-size: 0.56rem; }
  .dock-tab .tab-label { font-size: 0.6rem; }
  /* iPhones sin botón: la barra no debe pisarse con el gesto del sistema. */
  .team-rail { padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* vh clásico miente en móvil (se mide con las barras del navegador fuera). */
  .fa-drawer { max-height: 70dvh; }
  /* El diálogo de compartir siempre con las acciones alcanzables. */
  .share-body { max-height: calc(100dvh - 3rem); overflow-y: auto; }
  #share-canvas { max-height: 56dvh; }
}

/* ---------- Cruz de la vista general ----------
   Soltar a un jugador sin abrir su equipo. Con ratón se revela al pasar por
   encima de la miniatura (y es inerte mientras está invisible: una cruz
   transparente pero pulsable soltaría gente por un roce). En táctil, donde no
   hay hover que la revele, está siempre a la vista. */
.ov-slot .ov-x {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 3;
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  font-size: 0.62rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease-soft);
}
.ov-slot:hover .ov-x,
.ov-slot .ov-x:focus-visible { opacity: 1; pointer-events: auto; }
.ov-slot .ov-x:hover { background: #dc2626; }
.ov-slot .ov-x:focus-visible { outline: 2px solid #fff; }

@media (hover: none) {
  .ov-slot .ov-x {
    opacity: 1;
    pointer-events: auto;
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
  }
  /* El dibujo se queda pequeño para no comerse la foto, pero el objetivo de
     toque llega a los 38px que pide el dedo. */
  .ov-slot .ov-x::after {
    content: "";
    position: absolute;
    inset: -6px;
  }
}

/* ---------- Estadísticas en línea (SOLO TÁCTIL) ----------
   Sin ratón no hay hover que enseñe la ficha, y la flotante tapaba media
   pantalla justo encima de la lista de agentes libres. Aquí las estadísticas
   se despliegan como un bloque más de la página: bajo los cuatro titulares en
   la vista de equipo y dentro de la tarjeta del equipo en la vista general, sin
   mover el scroll ni tapar nada. Con ratón este bloque no se rellena nunca. */
.stats-inline[hidden] { display: none; }

.si-card {
  container-type: inline-size;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--team-color, var(--accent)) 45%, var(--border));
  border-radius: 12px;
  background: var(--surface);
  animation: si-in var(--t-mid) var(--ease);
}
@keyframes si-in { from { opacity: 0; translate: 0 -6px; } }

.si-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.si-mini {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  object-position: top center;
  background: color-mix(in srgb, var(--team-color, var(--accent)) 22%, var(--surface-2));
}
.si-ini {
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--team-color, var(--accent)) 80%, #fff);
}
.si-id { flex: 1; min-width: 0; }
.si-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.si-meta {
  margin: 1px 0 0;
  font-size: 0.7rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-hon {
  display: flex;
  gap: 10px;
  margin: 3px 0 0;
  font-size: 0.68rem;
  font-weight: 800;
  color: #e4e4e7;
}
.si-hon .stat { display: inline-flex; align-items: center; gap: 3px; }
.si-hon .stat svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.si-close {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  touch-action: manipulation;
}

/* Las ocho pastillas a 4 columnas × 2 filas: la rejilla que pidió el usuario.
   Reutilizan `.sp-chip`, pero sus tamaños se recalculan contra el ancho de la
   tarjeta (`cqw`), que aquí es mucho mayor que en el panel de una foto. */
.si-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 5px;
}
/* En cuatro columnas la pastilla mide ~70 px: en fila (puesto · etiqueta ·
   valor) "OPEN DUELS" se comía al valor. Aquí se apila —puesto y valor arriba,
   etiqueta debajo a todo el ancho—, que es como cabe entero sin recortes ni
   letra ilegible. Nada de "…": el proyecto prefiere texto más pequeño. */
.si-chips .sp-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 1px 4px;
  padding: 5px 6px;
  border-radius: 8px;
}
.si-chips .sp-chip .sp-rk { grid-column: 1; font-size: clamp(0.7rem, 3.6cqw, 1.02rem); }
.si-chips .sp-chip .sp-val { grid-column: 2; justify-self: end; font-size: clamp(0.46rem, 2.3cqw, 0.74rem); }
.si-chips .sp-chip .sp-lbl {
  grid-column: 1 / -1;
  white-space: normal;
  font-size: clamp(0.42rem, 2cqw, 0.62rem);
  line-height: 1.2;
}
/* Tarjeta estrecha (tablet con la vista general a varias columnas): las ocho
   no caben en fila de cuatro sin encoger el texto a ilegible. El umbral está
   bajo el ancho de un móvil en vertical (~320 px), que sí va a cuatro. */
@container (max-width: 260px) {
  .si-chips { grid-template-columns: 1fr 1fr; }
  .si-chips .sp-chip .sp-rk { font-size: clamp(0.7rem, 5.6cqw, 1.02rem); }
  .si-chips .sp-chip .sp-val { font-size: clamp(0.46rem, 3.4cqw, 0.74rem); }
  .si-chips .sp-chip .sp-lbl { font-size: clamp(0.42rem, 3cqw, 0.62rem); }
}

.si-nodata {
  margin: 0;
  padding: 10px 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* Las dos acciones que en una miniatura eran imposibles de apuntar. */
.si-actions { display: flex; gap: 8px; margin-top: 10px; }
.si-act {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.si-act svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.si-replace {
  border-color: color-mix(in srgb, var(--team-color, var(--accent)) 60%, var(--border));
  background: color-mix(in srgb, var(--team-color, var(--accent)) 16%, var(--surface));
}
.si-drop { color: var(--text-dim); }

/* En la vista de equipo el bloque va bajo los titulares: la banda de fotos deja
   de estirarse para hacerle sitio, en vez de empujarlo fuera de la pantalla. */
@media (max-width: 760px) {
  .team-view:has(.stats-inline:not([hidden])) .roster { aspect-ratio: auto; min-height: 34dvh; }
}


/* ---------- Novedades del mercato ---------- */
/* Tira de historias al lado del nombre del equipo (solo las suyas) y al lado
   de "All Teams" (todas). Ocupa el hueco que queda entre el título y los
   botones: se lleva el espacio sobrante y, cuando no cabe, hace scroll
   horizontal en vez de empujar a los botones fuera de la fila. */
/* El título manda: ni "All Teams" ni el nombre del equipo encogen nunca. La
   que cede espacio es la tira, que para eso hace scroll. Sin esto, con la
   tira puesta, "All Teams" se partía en dos líneas. */
.ov-topbar > .ov-title-wrap,
.team-header > .team-ident { flex: 0 0 auto; }

.news-strip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;                     /* toma lo que sobra, nunca lo reclama */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 4px 4px;
  margin-left: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.news-strip::-webkit-scrollbar { height: 4px; }
.news-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.news-strip[hidden] { display: none; }

/* Cuando quedan historias fuera de la vista, la última se desvanece contra el
   borde: es la única pista de que la tira sigue. La pone el JS al medir. */
.news-strip.hay-mas {
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
/* En táctil no hay barra de scroll que valga: se arrastra y punto. */
@media (hover: none) {
  .news-strip { scrollbar-width: none; }
  .news-strip::-webkit-scrollbar { display: none; }
}

/* Los círculos de la tira, a tamaño de PC: es donde más sitio hay y donde se
   ven más pequeños si no se fuerza (el hover de ratón además pide un blanco
   más grande). Móvil los reduce un poco más abajo, nunca por debajo de esto. */
.nw-dot {
  flex: 0 0 auto;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  scroll-snap-align: start;
  transition: color var(--t-fast) var(--ease-soft);
}
.nw-dot:hover, .nw-dot:focus-visible { color: var(--text); }
.nw-dot:focus-visible { outline: 2px solid var(--nw-color); outline-offset: 3px; border-radius: 8px; }

/* El aro de color es lo que dice de un vistazo qué clase de noticia es:
   verde oficial, naranja rumor, azul encuesta, morado entrada de blog.
   position:relative es para anclar el pip (la insignia FA/RFA/NEW…) a su
   esquina inferior derecha. */
.nw-aro {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 2px;
  background: var(--nw-color);
  flex-shrink: 0;
}
.nw-dot:hover .nw-aro { scale: 1.06; }
.nw-aro { transition: scale var(--t-fast) var(--ease), background var(--t-fast) var(--ease-soft); }

/* Ya vista: el anillo de color (lo que llama la atención de "hay algo
   nuevo") se apaga a gris neutro, como en Instagram. Solo el anillo — la
   insignia (.nw-pip) se queda con su color, sigue diciendo qué tipo de
   movimiento es aunque ya se haya mirado. */
.nw-dot.vista .nw-aro { background: var(--border); }

.nw-cara {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;         /* las fotos son de cuerpo: encuadra la cara */
  background: var(--surface-2);
  border: 2px solid var(--bg);
}
.nw-ini {
  display: grid;
  place-items: center;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* La insignia de qué tipo de movimiento es (FA, RFA, NEW…), pegada a la
   esquina del círculo — mismo lenguaje visual que el badge de agentes libres
   de la barra lateral (píldora, borde que recorta contra el fondo). */
.nw-pip {
  position: absolute;
  right: -4px;
  bottom: -2px;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--nw-color);
  color: #000;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--bg);
  line-height: 1;
}

.nw-pie {
  max-width: 100%;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* En la vista general la fila se alinea abajo (align-items: flex-end), así
   que la tira necesita bajar el pie para no quedar flotando sobre el título. */
.ov-topbar .news-strip { align-self: flex-end; }

/* ---------- Visor de una novedad: historia estilo Instagram ---------- */
/* El <dialog> se queda sin chrome propio (fondo, borde, padding): es solo el
   marco nativo que da Escape, atrapa el foco y aloja el ::backdrop. Todo lo
   visible vive en .sf-frame, que es la "tarjeta de teléfono" de verdad. */
.news-dialog {
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #fff;
  padding: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
}
.news-dialog::backdrop { background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(6px); }

.sf-frame {
  position: relative;
  width: min(400px, 92vw);
  aspect-ratio: 9 / 16;
  max-height: 88vh;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.sf-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;   /* las fotos son de cuerpo entero: encuadra la cara */
}
.sf-fondo-color { position: absolute; inset: 0; }
.sf-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 12%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.75));
}

/* Barras de progreso: una por historia de la cola actual. La activa se rellena
   sola y dispara el paso a la siguiente; sin esto no hay pista de que la
   historia avanza sola, que es la seña de identidad del formato. */
.sf-barras { position: absolute; top: 9px; left: 9px; right: 9px; z-index: 5; display: flex; gap: 4px; }
.sf-barras i {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
  display: block;
}
.sf-barras i b { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.sf-barras i.hecha b { width: 100%; }
.sf-barras i.activa b { animation: sf-crece var(--sf-dur, 6s) linear forwards; }
@keyframes sf-crece { from { width: 0; } to { width: 100%; } }

.sf-top { position: absolute; top: 22px; left: 12px; right: 12px; z-index: 5; display: flex; align-items: center; gap: 9px; }
.sf-avatar {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: var(--surface-2);
  flex-shrink: 0;
}
.sf-avatar.sf-avatar-equipo { object-fit: contain; padding: 4px; background-color: color-mix(in srgb, var(--nw-color, #333) 30%, #000); }
.sf-quien { min-width: 0; }
.sf-nombre {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-cuando { margin: 0; font-size: 0.66rem; color: rgba(255, 255, 255, 0.65); font-weight: 700; }
.sf-cerrar {
  margin-left: auto;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  border: 0;
  cursor: pointer;
}

/* Zonas de toque para pasar de historia, como en Instagram: la izquierda
   retrocede, la derecha (más ancha, es la que más se pulsa) avanza. Van por
   DEBAJO del texto y de la cabecera (z-index más bajo), así que tocar un
   enlace o el aspa nunca navega por error. */
.sf-zona { position: absolute; top: 0; bottom: 0; z-index: 4; border: 0; background: none; padding: 0; cursor: pointer; }
.sf-zona-izq { left: 0; width: 34%; }
.sf-zona-der { right: 0; width: 66%; }

.sf-cuerpo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 18px 16px 20px; text-align: left; }
.sf-tipo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--nw-color);
  color: #000;
  margin-bottom: 9px;
}
/* "restricted" describe el CONTRATO, no la fiabilidad: por eso va en gris al
   lado de la etiqueta de color y no la sustituye. */
.sf-matiz {
  display: inline-flex;
  align-items: center;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  margin: 0 0 9px 5px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.sf-titular { margin: 0; font-size: 1.3rem; font-weight: 900; line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); }
.sf-texto { margin: 7px 0 0; font-size: 0.84rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.sf-fuente { margin: 11px 0 0; font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); position: relative; z-index: 6; }
.sf-fuente a { color: #fff; text-decoration: none; font-weight: 800; position: relative; z-index: 6; }
.sf-fuente a:hover { text-decoration: underline; }

@media (max-width: 460px) {
  .sf-frame { width: 96vw; max-height: 92vh; }
}

/* En móvil la cabecera ya va justa con el nombre y los botones: metida ahí,
   la tira se quedaba en 8 px y no se veía nada. Baja a su propia fila, a lo
   ancho, que además es como se leen las historias en cualquier app. */
@media (max-width: 760px) {
  .team-header, .ov-topbar { flex-wrap: wrap; }
  .news-strip {
    order: 9;                    /* la última, debajo del nombre y los botones */
    flex: 1 0 100%;
    margin-left: 0;
    margin-top: 2px;
    padding-bottom: 2px;
  }
  .ov-topbar .news-strip { align-self: stretch; }
  /* Más grandes que antes, pero por debajo del tamaño de PC: en el móvil el
     ancho es el recurso escaso. */
  .nw-dot { width: 62px; }
  .nw-aro { width: 52px; height: 52px; }
  .nw-pip { min-width: 20px; height: 17px; font-size: 0.54rem; right: -3px; }
  .nw-pie { font-size: 0.6rem; }
  .news-strip { gap: 9px; }
}

/* Sin animaciones para quien las tenga desactivadas en el sistema. */
@media (prefers-reduced-motion: reduce) {
  .nw-aro, .nw-dot { transition: none; }
  .nw-dot:hover .nw-aro { scale: 1; }
}