/* ════════════════════════════════════════════════════════════════════════════
   TopScorers — opción C. Hoja única, sin framework, ~6 KB.
   Concepto: marcador. Cifras tabulares, jerarquía fuerte, oscuro por defecto.
   ════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  color-scheme: dark light;

  --gold: #ffc233;
  /* Llegaron con los componentes de la D (tarjeta del líder, carril, píldoras)
     y no estaban definidas aquí: sin ellas, el degradado del oro no se aplicaba
     y la píldora de la sección activa se veía en blanco. */
  --gold-2: #ff9e1b;
  --glass: rgba(255, 255, 255, .045);
  --sh: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.8);
  --lime: #9ef01a;
  --cyan: #38d6c4;
  --rose: #ff5c7a;

  --bg: #08090c;
  --bg-2: #0e1015;
  --card: #12141b;
  --card-2: #171a23;
  --line: #242836;
  --line-2: #323848;
  --tx: #f2f4f8;
  --tx-2: #a8aec0;
  --tx-3: #6d748a;

  --r: 16px;
  --r-s: 10px;
  --gut: clamp(16px, 4vw, 44px);
  --ez: cubic-bezier(.2, .8, .2, 1);
}

:root[data-t="light"] {
  --bg: #f7f8fa; --bg-2: #ffffff; --card: #ffffff; --card-2: #f1f3f7;
  --line: #e3e7ee; --line-2: #ccd3e0; --tx: #0b0d12; --tx-2: #4d5467; --tx-3: #868fa6;
  --gold: #b07d00; --gold-2: #946a00; --lime: #4e8f00; --cyan: #0f8c7e;
  --glass: rgba(255, 255, 255, .7);
  --sh: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 30px -22px rgba(16,24,40,.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0; background: var(--bg); color: var(--tx);
  font: 400 16px/1.6 Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: Archivo, Inter, sans-serif; font-weight: 800; letter-spacing: -.025em; margin: 0; line-height: 1.05; }
a { color: inherit; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gut); }
.num { font-variant-numeric: tabular-nums; font-family: Archivo, sans-serif; font-weight: 700; }

/* ── Barra superior ───────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px) saturate(170%);
  border-bottom: 1px solid var(--line);
}
.bar__in { display: flex; align-items: center; gap: 14px; height: 58px; }
.logo {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -.02em;
}
.logo svg { flex: none; color: var(--tx); }
.logo span { color: var(--tx); }
.links { display: flex; gap: 2px; margin-left: 8px; }
.links a {
  padding: 8px 12px; border-radius: var(--r-s); text-decoration: none;
  color: var(--tx-2); font-size: 14.5px; font-weight: 500;
  transition: background .16s var(--ez), color .16s var(--ez);
}
.links a:hover { background: var(--card-2); color: var(--tx); }
.links a[aria-current] { color: var(--tx); background: var(--card-2); }
.bar__sp { margin-left: auto; }

.ghost {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: transparent; color: var(--tx-2); cursor: pointer;
  transition: border-color .16s var(--ez), color .16s var(--ez);
}
.ghost:hover { border-color: var(--line-2); color: var(--tx); }
.ghost svg { width: 16px; height: 16px; }

/* ── Portada ──────────────────────────────────────────────────────────────── */
.hero { padding: clamp(32px, 7vw, 64px) 0 20px; text-align: center; }
.hero h1 { font-size: clamp(32px, 7vw, 62px); }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p { color: var(--tx-2); max-width: 50ch; margin: 14px auto 0; font-size: clamp(15px, 2vw, 18px); }

.live {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); font-size: 12.5px; font-weight: 600;
  color: var(--tx-2); letter-spacing: .04em; text-transform: uppercase;
}
.live b { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

/* ── Buscador (la pieza central) ──────────────────────────────────────────── */
.finder { margin: 26px auto 0; max-width: 680px; position: relative; }
.finder__box {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 6px 6px 6px 18px;
  transition: border-color .16s var(--ez), box-shadow .16s var(--ez);
}
.finder__box:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent);
}
.finder svg { width: 19px; height: 19px; color: var(--tx-3); flex: none; }
.finder input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--tx);
  font: 500 17px/1 Inter, sans-serif; padding: 13px 0;
}
.finder input::placeholder { color: var(--tx-3); }
.finder input:focus { outline: none; }
.finder__go {
  border: 0; border-radius: 999px; padding: 11px 20px; cursor: pointer;
  background: var(--gold); color: #0a0a0a;
  font: 700 14.5px Archivo, sans-serif; white-space: nowrap;
}
.hint { color: var(--tx-3); font-size: 13.5px; margin-top: 10px; }
.hint b { color: var(--tx-2); font-weight: 500; }

/* ── Filtros ──────────────────────────────────────────────────────────────── */
.filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 22px 0 14px;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--card);
  color: var(--tx-2); font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: border-color .16s var(--ez), color .16s var(--ez);
}
.pill:hover { border-color: var(--line-2); color: var(--tx); }
.pill[aria-pressed="true"], .pill[aria-current] {
  border-color: var(--gold); color: var(--tx);
  background: color-mix(in srgb, var(--gold) 12%, var(--card));
}
.filters__sp { margin-left: auto; display: flex; gap: 8px; align-items: center; }
select.pill { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--tx-3) 50%), linear-gradient(135deg, var(--tx-3) 50%, transparent 50%); background-position: right 13px center, right 8px center; background-size: 5px 5px; background-repeat: no-repeat; }

.empty { text-align: center; color: var(--tx-3); padding: 40px 0; }

.more {
  display: block; margin: 18px auto 0; padding: 11px 22px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--card);
  color: var(--tx); font: 600 14.5px Inter, sans-serif;
}
.more:hover { border-color: var(--gold); }

/* ── Bloques ──────────────────────────────────────────────────────────────── */
.sec { margin: 44px 0; }
.sec__h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sec__h h2 { font-size: clamp(20px, 3vw, 26px); }
.sec__h a { margin-left: auto; color: var(--cyan); text-decoration: none; font-size: 14px; font-weight: 600; }
.sec__h a:hover { text-decoration: underline; }

.cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.c {
  display: block; padding: 16px; border-radius: var(--r); text-decoration: none;
  background: var(--card); border: 1px solid var(--line);
  transition: border-color .16s var(--ez);
}
.c:hover { border-color: var(--line-2); }
.c__t { font-size: 12px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.c__v { font: 800 clamp(22px, 4vw, 30px)/1.05 Archivo, sans-serif; margin: 6px 0 3px; }
.c__s { color: var(--tx-2); font-size: 13.5px; }

/* ── Tabla ────────────────────────────────────────────────────────────────── */
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { padding: 11px 14px; text-align: left; white-space: nowrap; }
thead th {
  /* `top: 0` y no un valor mayor: .tw lleva `overflow-x: auto` para poder
     deslizar las tablas anchas en el móvil, y eso lo convierte en el contenedor
     al que se agarra `position: sticky`. Con un desplazamiento mayor, la
     cabecera caía dentro de la tabla y tapaba la primera fila. */
  position: sticky; top: 0; z-index: 5;
  background: var(--card-2); color: var(--tx-3); font: 600 11px Inter, sans-serif;
  text-transform: uppercase; letter-spacing: .08em;
}
tbody tr { border-top: 1px solid var(--line); }
tbody tr:hover { background: var(--card-2); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.g { font: 800 17px Archivo, sans-serif; color: var(--gold); text-align: right; }
.who2 { display: flex; align-items: center; gap: 10px; }
.who2 img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.who2 a { font-weight: 600; text-decoration: none; }
.who2 a:hover { text-decoration: underline; }
.who2 small { display: block; color: var(--tx-3); font-weight: 400; }

/* ── Ficha ────────────────────────────────────────────────────────────────── */
.ph { display: grid; gap: 24px; align-items: start; margin: 28px 0; }
@media (min-width: 780px) { .ph { grid-template-columns: 220px 1fr; } }
.ph img.face { width: 100%; max-width: 220px; aspect-ratio: 1; border-radius: var(--r); object-fit: cover; background: var(--card-2); border: 1px solid var(--line); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 18px 0; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; }
.kpi b { display: block; font: 800 24px/1 Archivo, sans-serif; }
.kpi span { font-size: 11px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .06em; }
.prose { color: var(--tx-2); max-width: 70ch; }
.prose p { margin: 0 0 12px; }
.prose h2 { color: var(--tx); font-size: 20px; margin: 26px 0 10px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.ft { border-top: 1px solid var(--line); margin-top: 56px; padding: 32px 0 44px; color: var(--tx-3); font-size: 14px; background: var(--bg-2); }
.ft__g { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ft h4 { font: 600 12px Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--tx-2); margin: 0 0 8px; }
.ft a { color: var(--tx-3); text-decoration: none; display: block; padding: 3px 0; }
.ft a:hover { color: var(--tx); }
.ft__b { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 14px; flex-wrap: wrap; }

:where(a, button, input, select):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Móvil ────────────────────────────────────────────────────────────────── */
.tabs { display: none; }
@media (max-width: 760px) {
  .links { display: none; }
  .bar__in { height: 54px; }
  .tabs {
    position: fixed; inset: auto 0 0 0; z-index: 50; display: flex;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(16px); border-top: 1px solid var(--line);
    padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
  }
  .tabs a {
    flex: 1; display: grid; justify-items: center; gap: 2px; min-height: 46px;
    padding: 6px 2px; text-decoration: none; color: var(--tx-3);
    font-size: 11px; font-weight: 600; border-radius: var(--r-s);
  }
  .tabs a svg { width: 20px; height: 20px; }
  .tabs a[aria-current] { color: var(--gold); }
  body { padding-bottom: 72px; }
  .grid { grid-template-columns: 1fr; }
  .finder__go { padding: 11px 15px; font-size: 13.5px; }
}

/* ── EL TABLERO ───────────────────────────────────────────────────────────────
   Una sola definición de columnas (--cols) que comparten la cabecera y las
   filas. Es lo que mantiene el botón de ordenar justo ENCIMA de su columna de
   cifras — y por eso las filas ya no repiten el nombre de la estadística
   debajo de cada número: lo dice la cabecera, una vez.

   El mismo bloque sirve para las dos vistas: en tabla la cabecera es una
   rejilla alineada; en tarjetas se convierte en una fila de píldoras. */
.board { --cols: 46px minmax(0, 1fr) 54px 54px 58px 62px 58px 76px; }

.bhead {
  display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: end;
  position: sticky; top: 58px; z-index: 20; padding: 9px 14px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-bottom-color: var(--line-2);
  border-radius: var(--r) var(--r) 0 0;
}
.bhead > span { font: 600 10.5px Inter, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--tx-3); }
.bhead > span:first-child { text-align: center; }
/* Cabecera numerica NO ordenable (PJ): es un <span>, no un <button>, asi que
   no heredaba el text-align:right de los botones y su rotulo quedaba a la
   izquierda mientras sus cifras iban a la derecha de la columna. */
.bhead > span.nos { text-align: right; }
.bhead button {
  position: relative; border: 0; background: none; cursor: pointer; padding: 3px 0;
  font: 600 10.5px Inter, sans-serif; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tx-3); text-align: right; transition: color .16s var(--ez);
}
.bhead button:hover { color: var(--tx); }
.bhead button[aria-pressed="true"] { color: var(--gold); }
/* La flecha va PEGADA a la etiqueta, no flotando encima. */
.bhead button[aria-pressed="true"] .so::before { content: ' ↓'; font-size: 10px; }

.rows { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r); overflow: hidden; background: var(--card); }
.p {
  display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center;
  padding: 11px 14px; text-decoration: none; position: relative;
  border-top: 1px solid var(--line); transition: background .16s var(--ez);
}
.p:first-child { border-top: 0; }
.p:hover { background: var(--card-2); }
.p__rk { font: 700 15px Archivo, sans-serif; color: var(--tx-3); text-align: center; font-variant-numeric: tabular-nums; }
.p:nth-child(1) .p__rk, .p:nth-child(2) .p__rk, .p:nth-child(3) .p__rk { color: var(--gold); }
.p__id { min-width: 0; display: flex; gap: 10px; align-items: center; }
.p__id img { width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover; background: var(--card-2); }
.p__nm, .p__cl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p__nm { font-weight: 600; font-size: 15px; }
.p__cl { color: var(--tx-3); font-size: 12.5px; }
.p__mt { display: none; }
.p__x { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--tx-2); }
.p__x b { font-weight: 600; color: var(--tx); }
.p__x span { display: none; }                 /* el nombre está en la cabecera */
.p__g { text-align: right; }
.p__g b { font: 800 21px/1 Archivo, sans-serif; color: var(--gold); font-variant-numeric: tabular-nums; }
.p__g span { display: none; }

.board[data-sort="j"] .p__x[data-k="j"] b, .board[data-sort="a"] .p__x[data-k="a"] b,
.board[data-sort="ga"] .p__x[data-k="ga"] b, .board[data-sort="m"] .p__x[data-k="m"] b,
.board[data-sort="r"] .p__x[data-k="r"] b { color: var(--gold); }

/* Vista de tarjetas: la cabecera pasa a ser una fila de píldoras y las
   estadísticas vuelven a la línea de contexto bajo el nombre. */
.board[data-v="grid"] .bhead {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center; position: static;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 0 0 12px; background: none; backdrop-filter: none;
}
.board[data-v="grid"] .bhead > span:first-child { display: none; }
.board[data-v="grid"] .bhead > span:nth-child(2) { margin-right: auto; }
.board[data-v="grid"] .bhead button { padding: 7px 12px; border-radius: 999px; text-align: center; font-size: 12px; letter-spacing: .02em; text-transform: none; border: 1px solid transparent; }
.board[data-v="grid"] .bhead button:hover { background: var(--card-2); }
.board[data-v="grid"] .bhead button[aria-pressed="true"] { background: color-mix(in srgb, var(--gold) 12%, var(--card)); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.board[data-v="grid"] .bhead button[aria-pressed="true"] .so::before { content: ' ↓'; position: static; font-size: 10px; }
.board[data-v="grid"] .rows { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); border: 0; border-radius: 0; background: none; overflow: visible; margin-top: 14px; }
.board[data-v="grid"] .p { grid-template-columns: 40px minmax(0, 1fr) auto; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--card); }
.board[data-v="grid"] .p:hover { border-color: var(--line-2); }
.board[data-v="grid"] .p__x { display: none; }
.board[data-v="grid"] .p__mt { display: block; color: var(--tx-3); font-size: 11.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.board[data-v="grid"] .p__g span { display: block; font-size: 10.5px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .08em; }

/* Selector de vista. */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg__b { display: grid; place-items: center; width: 34px; height: 32px; cursor: pointer; border: 0; background: transparent; color: var(--tx-3); transition: background .16s var(--ez), color .16s var(--ez); }
.seg__b svg { width: 16px; height: 16px; }
.seg__b:hover { color: var(--tx); }
.seg__b[aria-pressed="true"] { background: color-mix(in srgb, var(--gold) 16%, var(--card)); color: var(--gold); }

@media (max-width: 880px) {
  .board { --cols: 34px minmax(0, 1fr) 44px 46px 54px 66px; }
  .bhead [data-k="ga"], .p__x[data-k="ga"],
  .bhead [data-k="m"], .p__x[data-k="m"],
  .bhead [data-k="a90"], .p__x[data-k="a90"] { display: none; }
  .bhead { top: 54px; }
  .board[data-v="grid"] .rows { grid-template-columns: 1fr; }
}

/* ── MUNDIAL: cuadro final y acta ───────────────────────────────────────── */
/* Cuadro final: una escalera de verdad.
   Cada columna reparte sus partidos con `space-around` dentro de la MISMA
   altura, así que el partido de una ronda queda centrado entre los dos de los
   que sale. Los muñones de los lados rematan la lectura. En móvil se desliza
   en horizontal, que es la única forma honesta de meter cinco rondas. */
.br { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 14px; margin: 0 calc(var(--gut) * -1); padding-inline: var(--gut); }
.br__col { flex: 0 0 min(216px, 70vw); display: flex; flex-direction: column; }
/* Con sitio para las cinco rondas, las columnas se REPARTEN el ancho en vez de
   desbordar. Antes pedian 1168px (5x216 + 4x22 de hueco) contra los 1092
   disponibles y el sobrante se comia justo la ultima columna: la FINAL, que es
   el desenlace del cuadro. El hueco de 22px no se toca — los munones de
   conexion (::before/::after, 11px a 12px) viven dentro. */
@media (min-width: 1024px) { .br__col { flex: 0 1 216px; min-width: 168px; } }
.br__ms { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
.br__h { font: 600 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: .11em; color: var(--tx-3); padding: 0 2px 10px; display: flex; gap: 7px; }
.br__h b { color: var(--tx-2); }
.m {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 9px 11px; background: color-mix(in srgb, var(--card) 88%, transparent); font-size: 13.5px;
}
/* Muñones de conexión entre rondas. */
.br__col:not([data-final]) .m::after,
.br__col + .br__col .m::before {
  content: ''; position: absolute; top: 50%; width: 11px; height: 1px; background: var(--line-2);
}
.br__col:not([data-final]) .m::after { right: -12px; }
.br__col + .br__col .m::before { left: -12px; }
.m--f { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--card)); box-shadow: 0 0 40px -18px var(--gold); }
.m__r { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--tx-2); }
.m__r b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.m__r.w { color: var(--tx); font-weight: 600; }
.m__r.w b { color: var(--gold); }
.m__x { font-size: 11px; color: var(--tx-3); margin-top: 5px; padding-top: 5px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); display: flex; gap: 8px; }
.m__x em { font-style: normal; margin-left: auto; }

/* El partido por el tercer puesto no alimenta a nada: va fuera del árbol. */
.tercero { max-width: 260px; margin-top: 18px; }
.tercero .br__h { padding-bottom: 7px; }
.tercero .m::after, .tercero .m::before { display: none; }

.tl { position: relative; padding-left: 26px; margin: 0; list-style: none; }
.tl::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold), transparent); }
.tl li { position: relative; padding: 7px 0; color: var(--tx-2); font-size: 14.5px; }
.tl li::before { content: ''; position: absolute; left: -23px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--line-2); }
.tl li.gol::before { background: var(--gold); border-color: var(--gold); }
.tl li.roja::before { background: var(--rose); border-color: var(--rose); }
.tl li.amarilla::before { background: #e8c547; border-color: #e8c547; }
.tl b { color: var(--tx); font-weight: 600; }
.tl i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--tx-3); font-weight: 600; margin-right: 8px; }

/* ── El tablero en el móvil ───────────────────────────────────────────────────
   A 375 px no caben seis columnas de cifras: la del nombre se quedaba en nada
   y las filas aparecían sin jugador. Por debajo de 560 px se dejan solo PJ y
   goles, el resto de datos vuelve a la línea de contexto bajo el nombre, y la
   cabecera pasa a ser una fila de píldoras para que se pueda seguir ordenando
   por cualquier estadística. */
@media (max-width: 560px) {
  .board { --cols: 26px minmax(0, 1fr) 42px 56px; }
  .board .p__x[data-k="a"], .board .p__x[data-k="m"],
  .board .bhead [data-k="a"], .board .bhead [data-k="m"] { display: none; }
  .board .bhead {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center; position: static;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    padding: 0 0 10px; background: none; backdrop-filter: none;
  }
  .board .bhead > span:first-child { display: none; }
  .board .bhead > span:nth-child(2) { margin-right: auto; }
  .board .bhead [data-k="a"], .board .bhead [data-k="m"], .board .bhead [data-k="a90"],
  .board .bhead [data-k="ga"], .board .bhead [data-k="iig"] { display: inline-block; }
  .board .bhead button {
    padding: 6px 11px; border-radius: 999px; text-align: center; font-size: 12px;
    letter-spacing: .02em; text-transform: none; border: 1px solid transparent;
  }
  .board .bhead button[aria-pressed="true"] {
    background: color-mix(in srgb, var(--gold) 13%, var(--card));
    border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  }
  .board .bhead button[aria-pressed="true"] .so::before { content: ' ↓'; position: static; font-size: 10px; }
  .board .rows { border-radius: var(--r); border-top: 1px solid var(--line); margin-top: 10px; }
  .board .p__mt { display: block; color: var(--tx-3); font-size: 11.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
}

/* La línea de contexto nunca parte en dos: una fila de tabla con dos alturas
   distintas rompe el ritmo de lectura, que es justo lo que se busca aquí. */
.p__mt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  /* En el móvil todos los botones de orden se ven como botones: sin borde
     parecían una fila de etiquetas y nadie los pulsaba. */
  .board .bhead button { border-color: var(--line); }
}
/* ── Tablas estáticas ordenables ──────────────────────────────────────────────
   Las filas ya vienen en el HTML; pulsar una cabecera solo las reordena en el
   navegador. Cero descargas, cero CPU de Worker. */
.tw--sort th[data-k] { cursor: pointer; user-select: none; }
.tw--sort th[data-k]:hover { color: var(--tx); }
.tw--sort th.on { color: var(--gold); }
.tw--sort th[data-k] .so::before { content: ' ↓'; opacity: 0; font-size: 10px; }
.tw--sort th.on .so::before { opacity: 1; }
.who2 .rk { font: 400 14px Bricolage Grotesque, sans-serif; color: var(--tx-3); min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; }
td.who { min-width: 218px; }
/* Estas tablas llevan hasta nueve columnas: con el relleno de siempre, la de la
   nota (que es por la que se ordenan) se salía de la pantalla. */
.tw--sort table { font-size: 13.5px; }
.tw--sort th, .tw--sort td { padding: 10px 10px; }
.tw--sort th:first-child, .tw--sort td:first-child { padding-left: 14px; }
.tw--sort th:last-child, .tw--sort td:last-child { padding-right: 14px; }
@media (max-width: 880px) { thead th { top: 57px; } }

/* ── Enlaces externos de la ficha ─────────────────────────────────────────────
   Web oficial del club, buscador de Transfermarkt y buscador de Wikipedia.
   Escritos al generar, con rel="noopener nofollow": no se pide nada a esas
   webs, no se copia ningún dato suyo y no cuestan ni un ms de CPU. */
.outs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.outs a {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--tx-2); font-size: 13.5px; font-weight: 500;
  transition: border-color .18s var(--ez), color .18s var(--ez);
}
.outs a:hover { border-color: var(--gold); color: var(--tx); }
.outs svg { width: 13px; height: 13px; opacity: .6; }
a.ext { color: var(--tx); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }
a.ext:hover { color: var(--gold); }

/* Reclamo de marca encima del titular. */
.strap { margin: 0 0 12px; font: 600 12px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
.strap em { font-style: normal; color: var(--gold); }

/* La tecla del atajo, dibujada como tecla: "pulsa /" a secas no se entendía. */
.hint kbd {
  display: inline-block; min-width: 20px; text-align: center;
  font: 600 12px/1 Inter, sans-serif; color: var(--tx-2);
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px;
  padding: 3px 5px; margin: 0 1px; background: var(--card);
}

/* ── Escenario de portada: titular + líder ────────────────────────────────────
   Antes el titular ocupaba la mitad izquierda y la derecha se quedaba vacía.
   Ahora esa mitad la ocupa el líder de la sección, que es el dato que la página
   viene a dar: lo primero que se ve es quién va primero y con cuánto. */
.stage--duo {
  display: grid; gap: clamp(22px, 4vw, 54px); align-items: center;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  padding: clamp(24px, 5vw, 56px) 0 8px;
}
@media (max-width: 980px) { .stage--duo { grid-template-columns: 1fr; } }
.stage__t { min-width: 0; }
.strap { margin: 0 0 14px; font: 600 12px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
.strap em { font-style: normal; color: var(--gold); }

/* Carril de secciones. Cinco rankings, cada uno con sus estadísticas. */
.segs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 2px; margin: 18px calc(var(--gut) * -1) 10px; padding-inline: var(--gut); }
.segs::-webkit-scrollbar { display: none; }
.segs a {
  flex: 0 0 auto; padding: 9px 16px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: var(--glass); color: var(--tx-2);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: border-color .18s var(--ez), color .18s var(--ez), background .18s var(--ez);
}
.segs a:hover { border-color: var(--line-2); color: var(--tx); }
.segs a[aria-current] { border-color: transparent; color: #140f02; background: linear-gradient(135deg, var(--gold), var(--gold-2)); font-weight: 600; }

/* Tarjeta del líder + los tres siguientes. */
.lead { display: grid; gap: 8px; min-width: 0; }
.lead__hero {
  position: relative; display: grid; gap: 4px 14px; text-decoration: none; overflow: hidden;
  grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center;
  padding: 18px 20px; border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 62%),
    linear-gradient(165deg, var(--card-2), var(--card));
  box-shadow: var(--sh);
  transition: transform .26s var(--ez), border-color .26s var(--ez);
}
.lead__hero:hover { transform: translateY(-3px); border-color: var(--gold); }
/* El puesto va en su columna, alineado con el 2, el 3 y el 4 de abajo. Antes
   era una marca de agua gigante detrás de la cifra de goles y se solapaban. */
/* Cada pieza en SU columna, explícita. Con la columna en `auto` y la foto
   ocupando dos filas, el navegador colocaba la foto y el puesto en la misma
   celda: la columna se quedaba en 6 px y la foto se montaba encima del nombre.
   Es el fallo que se veía entre 560 y 980 px de ancho. */
.lead__rk { grid-column: 1; grid-row: 1; font: 400 20px/1 Archivo, sans-serif; color: var(--gold); text-align: center; font-variant-numeric: tabular-nums; }
.lead__hero img {
  grid-column: 2; grid-row: 1 / span 2;
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  background: var(--card-2); border: 2px solid var(--gold);
  box-shadow: 0 0 40px -10px color-mix(in srgb, var(--gold) 80%, transparent);
}
.lead__meta { grid-column: 3; grid-row: 1; min-width: 0; }
.lead__k { display: block; font: 600 11px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.lead__n { display: block; font: 400 clamp(24px, 3vw, 34px)/1.05 Archivo, sans-serif; margin-top: 5px; }
.lead__c { display: block; color: var(--tx-2); font-size: 13.5px; margin-top: 3px; }
.lead__g { grid-column: 4; grid-row: 1; text-align: right; }
.lead__g b { display: block; font: 400 clamp(40px, 5vw, 58px)/1 Archivo, sans-serif; color: var(--gold); }
.lead__g span { font: 600 10px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.lead__s { grid-column: 3 / -1; grid-row: 2; color: var(--tx-2); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .lead__hero { grid-template-columns: 20px auto minmax(0, 1fr); padding: 16px; }
  /* La foto deja de ocupar dos filas: si no, la cifra de la segunda fila cae
     en su misma celda y se montan. */
  .lead__hero img { grid-row: 1; width: 66px; height: 66px; }
  .lead__g { grid-column: 2 / -1; grid-row: 2; text-align: left; }
  .lead__s { grid-column: 2 / -1; grid-row: 3; }
}

.lead__r {
  display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; gap: 11px; align-items: center;
  padding: 9px 14px; border-radius: var(--r-s); text-decoration: none;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 72%, transparent);
  transition: border-color .18s var(--ez), background .18s var(--ez);
}
.lead__r:hover { border-color: var(--line-2); background: var(--card-2); }
.lead__rk2 { font: 400 15px Archivo, sans-serif; color: var(--tx-3); text-align: center; }
.lead__r img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.lead__n2 { min-width: 0; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead__n2 small { display: block; font-weight: 400; color: var(--tx-3); font-size: 12px; }
.lead__r b { font: 400 20px Archivo, sans-serif; color: var(--gold); font-variant-numeric: tabular-nums; }


/* ── Ayuda al pasar el ratón ──────────────────────────────────────────────────
   Sin una línea de JavaScript: es un atributo y una regla CSS. Lleva también
   `tabindex` y `aria-label`, así que se abre con el teclado y la lee un lector
   de pantalla; el `title` del navegador tarda dos segundos en salir y en el
   móvil no sale nunca. */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: min(340px, 70vw); z-index: 60;
  background: var(--bg-2); color: var(--tx-2); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 10px 12px; box-shadow: 0 18px 40px -16px #000;
  font: 400 12.5px/1.5 Inter, sans-serif; text-transform: none; letter-spacing: 0; text-align: left;
  pointer-events: none; white-space: normal;
  /* `display: none` y no `opacity: 0`: un elemento posicionado, aunque sea
     invisible, sigue sumando al ancho desplazable de la página, y en el móvil
     eso provocaba scroll horizontal en la portada. */
  display: none;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { display: block; transform: translateX(-50%) translateY(0); }
/* En los extremos de la tabla la burbuja se saldría de la pantalla. */
.bhead button:last-child[data-tip]::after, th:last-child[data-tip]::after { left: auto; right: 0; transform: translateY(4px); }
.bhead button:last-child[data-tip]:hover::after, th:last-child[data-tip]:focus-visible::after,
.bhead button:last-child[data-tip]:focus-visible::after, th:last-child[data-tip]:hover::after { display: block; transform: translateY(0); }
@media (max-width: 760px) { [data-tip]::after { max-width: 78vw; } }

/* ── Leyenda de columnas ─────────────────────────────────────────────────────
   Va visible (plegada) debajo de cada tabla. No es solo accesibilidad: una
   tabla de cifras sin explicar es justo lo que AdSense llama "poco valor". */
.ley { margin: 14px 0 0; border: 1px solid var(--line); border-radius: var(--r-s); background: color-mix(in srgb, var(--card) 60%, transparent); }
.ley > summary { cursor: pointer; padding: 11px 15px; font: 600 13.5px Inter, sans-serif; color: var(--tx-2); list-style: none; }
.ley > summary::-webkit-details-marker { display: none; }
.ley > summary::before { content: '+ '; color: var(--gold); font-weight: 700; }
.ley[open] > summary::before { content: '− '; }
.ley > summary:hover { color: var(--tx); }
.ley dl { margin: 0; padding: 0 15px 15px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ley dt { font-size: 13.5px; color: var(--tx); }
.ley dt b { color: var(--gold); }
.ley dd { margin: 3px 0 0; font-size: 13px; color: var(--tx-2); line-height: 1.55; }

/* Titulares de las secciones, con la tipografía de la C. */
.stage { padding: clamp(24px, 5vw, 52px) 0 8px; }
.stage h1 { font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: clamp(34px, 6.6vw, 72px); line-height: 1.02; letter-spacing: -.035em; }
.stage h1 em { font-style: normal; color: var(--gold); }
.stage p { color: var(--tx-2); max-width: 54ch; margin: 14px 0 0; font-size: clamp(15px, 1.6vw, 17.5px); }
h1.pg { font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: clamp(30px, 5.4vw, 54px); line-height: 1.04; letter-spacing: -.03em; }

/* ── Destacados (propuesta) ───────────────────────────────────────────────── */
.dst { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.dc {
  position: relative; display: block; text-decoration: none; overflow: hidden;
  padding: 20px; border-radius: var(--r); border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--card-2), var(--card)); box-shadow: var(--sh);
  transition: transform .24s var(--ez), border-color .24s var(--ez);
}
.dc:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); }
/* Tarjeta de jugador SIN ficha: misma caja, pero no finge ser un enlace. Antes
   enviaba a la pagina de su liga y parecia rota (8-oct-2026). */
.dc--off { cursor: default; }
.dc--off:hover { transform: none; border-color: var(--line); }
.dc img {
  float: right; width: 74px; height: 74px; border-radius: 50%; object-fit: cover; margin-left: 14px;
  background: var(--card-2); border: 2px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
.dc__k { display: block; font: 600 11px Inter, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--gold); }
.dc__v { display: block; font: 400 clamp(28px, 3.4vw, 40px)/1 Archivo, sans-serif; margin: 8px 0 10px; }
.dc__n { display: block; font-weight: 600; font-size: 16px; }
.dc__c { display: block; color: var(--tx-3); font-size: 12.5px; margin-top: 2px; }
.dc__d { display: block; clear: both; color: var(--tx-2); font-size: 13.5px; line-height: 1.55; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ── Clasificaciones ──────────────────────────────────────────────────────────
   Una tabla de liga tiene once columnas y se lee de un vistazo o no sirve: los
   números van tabulares para que las cifras se alineen, y la franja de color de
   la izquierda dice de un golpe quién sube, quién juega Europa y quién baja. */
.t--cl { font-size: 13.5px; }
.t--cl th, .t--cl td { padding: 9px 10px; }
.t--cl th:first-child, .t--cl td:first-child { padding-left: 14px; }
.t--cl th:last-child, .t--cl td:last-child { padding-right: 14px; }
.t--cl td.n, .t--cl th.n { text-align: right; font-variant-numeric: tabular-nums; }
.t--cl th.on { color: var(--gold); }
.t--cl tbody tr { border-top: 1px solid var(--line); }
.t--cl tbody tr:hover { background: var(--card-2); }

.cl__p { position: relative; color: var(--tx-3); }
/* Franja de zona. `currentColor` no vale aquí: la fija cada clase de fila. */
.t--cl tbody tr td:first-child::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent;
}
.cl--cl td:first-child::before   { background: var(--gold); }
.cl--el td:first-child::before   { background: #5aa9e6; }
.cl--ec td:first-child::before   { background: #6fcf97; }
.cl--sube td:first-child::before { background: #6fcf97; }
.cl--baja td:first-child::before { background: var(--red, #e05c5c); }

.cl__e { display: flex; align-items: center; gap: 9px; min-width: 190px; }
.cl__e img { flex-shrink: 0; object-fit: contain; }
.cl__pts { font-weight: 800; color: var(--tx); }
.cl__g { margin: 26px 0 10px; font-size: 15px; color: var(--tx-2); }

/* Racha: cinco puntos, el más reciente a la derecha. */
.cl__f { white-space: nowrap; }
.fm { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; }
.fm--g { background: #6fcf97; }
.fm--e { background: var(--tx-3); }
.fm--p { background: var(--red, #e05c5c); }

@media (max-width: 620px) {
  /* En móvil la tabla entera no cabe, y lo que se salía de pantalla eran los
     PUNTOS: justo el dato por el que se entra a una clasificación. Se quedan
     las seis columnas que importan (#, equipo, PJ, DG, Pts y racha) y se van
     ganados/empatados/perdidos y los goles a favor/en contra, que son el
     desglose de lo mismo. En pantalla grande siguen estando todas. */
  .t--cl th:nth-child(4), .t--cl td:nth-child(4),
  .t--cl th:nth-child(5), .t--cl td:nth-child(5),
  .t--cl th:nth-child(6), .t--cl td:nth-child(6),
  .t--cl th:nth-child(7), .t--cl td:nth-child(7),
  .t--cl th:nth-child(8), .t--cl td:nth-child(8) { display: none; }
  .t--cl th, .t--cl td { padding: 9px 7px; }
  .cl__e { min-width: 0; }
  .cl__e span { overflow: hidden; text-overflow: ellipsis; max-width: 128px; white-space: nowrap; }
}

/* Con seis pestañas en 375 px las etiquetas se pisaban. Van cortas (ver NAV en
   layout.mjs, campo `c`) y además no parten línea: el nombre completo sigue en
   el aria-label para quien use lector de pantalla. */
@media (max-width: 760px) {
  .tabs a { font-size: 10px; letter-spacing: -.01em; }
  .tabs a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* La cabecera NO va sticky en la clasificación. La regla global
   `thead th { top: 57px }` está pensada para la página entera, pero dentro de
   `.tw` (que es un contenedor con overflow) el sticky se ancla a ESE contenedor:
   como no tiene scroll vertical, la cabecera se bajaba 57 px y se dibujaba
   encima de la primera fila. Con 20 equipos no hace falta cabecera flotante. */
.t--cl thead th { position: static; top: auto; }

/* ── Qué se puede ordenar y qué no ────────────────────────────────────────────
   La flecha de orden vive en su propio `<span class="so">`: antes usaba el
   mismo `::after` que la burbuja de ayuda, así que en la columna activa la
   flecha tapaba la explicación — por eso al pasar el ratón por "Asist." en
   asistentes, o por cualquier columna de defensas, no salía nada.

   Las columnas que NO se ordenan van a la izquierda y con menos opacidad, para
   que se vea de un vistazo por dónde se puede ordenar. Siguen teniendo su
   burbuja de ayuda: no poder ordenarlas no las hace menos importantes. */
.bhead .nos, .tw--sort th.nos { opacity: .55; font-weight: 600; cursor: help; }
.tw--sort th.nos { cursor: help; }
.tw--sort th.nos:hover { color: inherit; }

/* ── Cuadro final: que se vea quién ganó cada duelo ───────────────────────────
   `.br__ms` existía en el CSS pero el HTML había dejado de emitirlo, así que
   los partidos se apilaban arriba en vez de repartirse por la columna y no
   había forma de seguir el camino de un equipo de una ronda a la siguiente.
   Además el ganador se marcaba solo con color: ahora lleva una barra lateral y
   el perdedor baja de opacidad, que se lee aunque el contraste falle. */
.m__r.w { position: relative; }
.m__r.w::before {
  content: ''; position: absolute; left: -11px; top: 4px; bottom: 4px;
  width: 3px; border-radius: 2px; background: var(--gold);
}
.m__r:not(.w) { opacity: .62; }
.m { padding-left: 14px; }

/* Palmarés del Mundial: una tabla de 23 ediciones que se lee de un vistazo. */
.pal__p { display: flex; align-items: center; gap: 8px; }
.pal__y { font-size: 12px; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.t--pal tbody tr { border-top: 1px solid var(--line); }
.pal--now { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.pal--now td { font-weight: 600; }
@media (max-width: 620px) {
  /* En móvil sobra la lista de años y las finales perdidas: el dato es cuántos. */
  .t--pal th:nth-child(4), .t--pal td:nth-child(4),
  .t--pal th:nth-child(5), .t--pal td:nth-child(5) { display: none; }
}