/* =====================================================================
   arg20 · hoja de estilos
   1 Fuentes · 2 Tokens · 3 Base · 4 Barra y pie · 5 Controles
   6 Componentes · 7 Tablas · 8 Home · 9 Club · 10 Comunidad vs IA
   11 Flujo /rankear · 12 Páginas de texto · 13 Responsive y preferencias
   Sin estilos inline en las plantillas (CSP): todo vive acá.
   ===================================================================== */

/* ---------- 1. Fuentes (autoalojadas) ---------- */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/manrope-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
}

/* ---------- 2. Tokens ---------- */
:root {
  color-scheme: light;

  /* Superficies y tinta */
  --bg: #f5f4f0;
  --surface: #ffffff;
  --surface-2: #efeee9;
  --ink: #121417;
  --ink-2: #343a43;
  --muted: #5f6672;
  --disabled: #9aa0a9;
  --line: #e3e1da;
  --line-strong: #c8c5bb;
  --rule: #121417;

  /* Marca (una sola familia de azul) */
  --navy: #0a2a5e;
  --brand: #0b3d91;
  --brand-hover: #082c6c;
  --brand-soft: #e8edf7;
  --celeste: #74acdf;       /* solo hover sobre la barra navy: no pasa contraste como texto sobre claro */

  /* Fuente de datos: IA */
  --ia: #2a6fb0;
  --ia-soft: #e6f0fa;

  /* Puesto 1 */
  --gold: #f2b705;
  --gold-ink: #5c4500;

  /* Diferencias (descriptivas, no "bien/mal": por eso no son verde/rojo) */
  --up: var(--brand);      --up-soft: var(--brand-soft);
  --down: #8a5300;         --down-soft: #fdf0d9;

  /* Estados */
  --warning: #8a5300; --warning-soft: #fff2dc;
  --danger: #b42318;  --danger-hover: #8f1c12;  --danger-soft: #fde8e6;
  --focus: #1f6fd1;

  /* Tipografía (la mono queda solo para cifras destacadas) */
  --font-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-display: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);
  --fw-text: 500; --fw-ui: 600; --fw-strong: 700; --fw-heavy: 800;
  --lh-text: 1.55; --lh-tight: 1.15;
  --track-caps: .06em;

  /* Espaciado (base 4px) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;

  /* Anchos */
  --shell: 72rem;
  --page: 64rem;
  --rail: 18rem;
  --prose: 40rem;
  --gutter: 1.5rem;

  /* Bordes y sombras */
  --r-xs: 3px; --r-sm: 4px; --r: 6px;
  --bw: 1px; --bw-rule: 2px;
  --shadow-drag: 0 8px 20px rgba(18, 20, 23, .20);
  --tap: 2.75rem;
  --t-fast: 120ms;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--sp-4); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--fs-base); font-weight: var(--fw-text);
  line-height: var(--lh-text); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; width: 100%; max-width: var(--page); margin: 0 auto; padding: var(--sp-5) var(--gutter) var(--sp-7); }
main > p { max-width: var(--prose); }

h1, h2, h3 { line-height: var(--lh-tight); }
h1 { margin: 0 0 var(--sp-3); font-family: var(--font-text); font-weight: var(--fw-heavy); font-size: var(--fs-display); letter-spacing: -.02em; text-wrap: balance; }
h2 { margin: var(--sp-6) 0 var(--sp-3); padding-top: var(--sp-4); border-top: var(--bw) solid var(--line-strong); font-size: var(--fs-xl); font-weight: var(--fw-heavy); letter-spacing: -.01em; }
h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-base); font-weight: var(--fw-strong); }
.eyebrow + h2, .empty h2 { padding-top: 0; border-top: 0; }
.eyebrow + h2 { margin-top: var(--sp-1); }
p { margin: var(--sp-3) 0; }
a { color: var(--brand); }
code { font-family: var(--font-num); font-size: .9em; }
img, svg { max-width: 100%; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: var(--sp-3); top: -4rem; z-index: 30; padding: var(--sp-3) var(--sp-4); border: 2px solid var(--brand); border-radius: var(--r-sm);
  background: #fff; color: var(--brand); font-weight: var(--fw-strong); text-decoration: none;
}
.skip:focus { top: var(--sp-3); }

/* ---------- 4. Barra y pie ---------- */
/* Móvil: fila 1 = marca + CTA; fila 2 = las 3 secciones a ancho igual. Escritorio (≥ 56rem): todo en una fila. */
header { background: var(--navy); }
header :focus-visible { outline-color: #fff; }
header a { color: #fff; text-decoration: none; }
.bar { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-3); max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.brand-mark { display: inline-flex; flex: none; }
.brand-mark svg { display: block; height: 1.6rem; width: auto; }
.brand-name { margin-right: auto; padding-block: var(--sp-3); font-family: var(--font-text); font-weight: var(--fw-heavy); font-size: 1.3rem; letter-spacing: -.02em; line-height: 1; }
.bar-actions { display: flex; align-items: center; gap: var(--sp-4); padding-block: var(--sp-2); }
.bar-cta {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  background: #fff; color: var(--navy) !important; font-weight: var(--fw-heavy); font-size: var(--fs-sm); line-height: 1.2;
  transition: background var(--t-fast);
}
.bar-account { font-size: var(--fs-sm); font-weight: var(--fw-ui); text-decoration: underline !important; text-underline-offset: 3px; }
.bar-account[aria-current="page"] { font-weight: var(--fw-heavy); }
.sections { order: 3; flex: 1 0 100%; display: flex; }
header a.nav {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--sp-3);
  border-bottom: 3px solid transparent; font-size: var(--fs-sm); font-weight: var(--fw-ui); line-height: 1.2;
}
header a.nav[aria-current="page"] { border-bottom-color: #fff; font-weight: var(--fw-heavy); }
@media (hover: hover) {
  .bar-cta:hover { background: var(--brand-soft); }
  header a.nav:not([aria-current="page"]):hover { border-bottom-color: rgba(255, 255, 255, .5); }
  .bar-account:hover { color: var(--celeste); }
}
.bar-account { display: none; }
@media (min-width: 56rem) {
  .bar { flex-wrap: nowrap; column-gap: var(--sp-5); }
  .brand-name { margin-right: 0; }
  .sections { order: 0; flex: 0 0 auto; align-self: stretch; margin-inline: auto; gap: var(--sp-4); }
  header a.nav { flex: none; min-height: 3.5rem; padding: 0 var(--sp-3); }
  .bar-account { display: inline; }
}

footer { margin-top: auto; background: var(--navy); color: #fff; font-size: var(--fs-sm); }
footer :focus-visible { outline-color: #fff; }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5);
  max-width: var(--shell); margin: 0 auto; padding: var(--sp-3) var(--gutter);
}
.footer-brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.footer-brand strong { font-weight: var(--fw-heavy); font-size: var(--fs-base); letter-spacing: -.02em; }
.footer-note { color: rgba(255, 255, 255, .78); font-size: var(--fs-xs); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.5rem; color: #fff; font-weight: var(--fw-ui); text-decoration: none; }
.footer-links a[aria-current="page"] { font-weight: var(--fw-heavy); text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) { .footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; } }

/* ---------- 5. Controles ---------- */
/* Primario (.btn). Los botones sin clase comparten el estilo hasta que las páginas migren a .btn */
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap);
  padding: .6rem 1.15rem; border: var(--bw) solid transparent; border-radius: var(--r-sm);
  background: var(--brand); color: #fff; font: inherit; font-weight: var(--fw-strong); line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn { font-family: var(--font-text); }
@media (hover: hover) { .btn:hover, button:hover:not(:disabled) { background: var(--brand-hover); } }

.btn-secondary { background: var(--surface); color: var(--brand); border-color: var(--line-strong); }
@media (hover: hover) {
  .btn-secondary:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); }
}
.btn-secondary[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
@media (hover: hover) { .btn-secondary[aria-pressed="true"]:hover:not(:disabled) { background: var(--brand-hover); } }

.btn-ghost { background: transparent; color: var(--muted); }
@media (hover: hover) { .btn-ghost:hover { background: var(--surface-2); color: var(--ink); } }

.btn-danger { background: var(--danger); }
@media (hover: hover) { .btn-danger:hover:not(:disabled) { background: var(--danger-hover); } }

.btn:disabled, button:disabled { background: var(--surface-2); color: var(--disabled); border-color: var(--line); cursor: not-allowed; }

input[type="search"], input[type="text"] {
  width: 100%; min-height: var(--tap); padding: var(--sp-2) var(--sp-3); border: var(--bw) solid var(--muted); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: inherit;
}
input:focus-visible { outline-offset: 0; border-color: var(--focus); }

/* ---------- 6. Componentes ---------- */
.note { color: var(--muted); font-size: var(--fs-sm); }
.lead { max-width: var(--prose); margin: var(--sp-1) 0 var(--sp-4); color: var(--ink-2); font-size: var(--fs-lg); }
.meta { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.eyebrow { margin: 0 0 var(--sp-1); color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-strong); letter-spacing: var(--track-caps); text-transform: uppercase; }
.eyebrow-ia { color: var(--ia); }
.page-head { margin-bottom: var(--sp-4); }
.is-error { color: var(--danger); }
#submit-status.is-error, #image-error { padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--danger); background: var(--danger-soft); color: var(--ink); }

/* Avisos: info (IA) · muestra / web (advertencia) · error. Sin variante = muestra */
.notice { margin: var(--sp-2) 0; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--warning); background: var(--warning-soft); color: var(--ink); font-size: var(--fs-sm); line-height: 1.5; }
.notice-info { border-left-color: var(--ia); background: var(--ia-soft); }
.notice-error { border-left-color: var(--danger); background: var(--danger-soft); }
.notice p { margin: var(--sp-1) 0; }

/* Badges */
.delta { display: inline-block; min-width: 2.6rem; padding: .1rem .5rem; border-radius: 999px; text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
.delta-up { background: var(--up-soft); color: var(--up); }
.delta-down { background: var(--down-soft); color: var(--down); }
.delta-eq { min-width: 0; padding-inline: 0; color: var(--muted); }
.tag { display: inline-block; padding: .1rem .45rem; border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--track-caps); text-transform: uppercase; }
.tag-comunidad { background: var(--brand-soft); color: var(--brand); }
.tag-ia { background: var(--ia-soft); color: var(--ia); }

.empty { padding: var(--sp-1) var(--sp-5) var(--sp-4); background: var(--surface); border: var(--bw) dashed var(--line-strong); border-radius: var(--r); }
.empty h2 { margin-top: var(--sp-4); }

details { margin: var(--sp-3) 0; }
summary { cursor: pointer; min-height: 2rem; font-weight: var(--fw-strong); color: var(--brand); }

/* Escudos: 1.75/2rem en tablas, 3/3.5rem en el selector, 4.5rem en la ficha. Sin círculo ni sombra */
.crest { width: 1.75rem; height: 1.75rem; object-fit: contain; flex: none; vertical-align: middle; }
.crest.crest-xl { width: 6rem; height: 6rem; }
.crest-fallback {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); font-weight: var(--fw-heavy);
}
.crest-fallback.crest-xl { font-size: 2.5rem; }
@media (min-width: 700px) {
  .crest { width: 2rem; height: 2rem; }
}
.club-cell { display: inline-flex; align-items: center; gap: var(--sp-2); }
a.club-cell { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* Lista de clubes candidatos */
.clubs { list-style: none; margin: var(--sp-3) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--sp-2); }
.clubs li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-sm); }
.clubs a { color: var(--ink); font-weight: var(--fw-ui); text-decoration: none; }
@media (hover: hover) { .clubs a:hover { color: var(--brand); } }

/* Número de puesto: 1 en oro, 2–5 en azul (IA: su azul), 6–20 en tinta, el resto apagado */
.rk {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .3rem;
  border-radius: var(--r-xs); color: var(--ink); font-family: var(--font-num); font-weight: var(--fw-strong); font-size: .95rem; font-variant-numeric: tabular-nums;
}
.rk-top { background: var(--brand-soft); color: var(--brand); font-weight: var(--fw-heavy); }
.rk-ia { background: var(--ia-soft); color: var(--ia); }
.rk-1 { background: var(--gold); color: var(--gold-ink); font-weight: var(--fw-heavy); }
.rk-out { color: var(--muted); font-weight: var(--fw-text); }

/* Medidor: número a la izquierda de una barra de 4px (SVG: sin estilos inline). Móvil: número sobre la barra */
.meter { display: inline-flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.meter svg { width: 3.5rem; height: .25rem; flex: none; background: var(--surface-2); overflow: hidden; }
.meter rect { fill: var(--brand); }
.meter-ia rect { fill: var(--ia); }

/* ---------- 7. Tablas ---------- */
.table-wrap { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); overflow-x: auto; }
.ranking { width: 100%; border-collapse: collapse; }
.ranking th, .ranking td { padding: var(--sp-2) var(--sp-3); text-align: right; white-space: nowrap; vertical-align: middle; border-bottom: var(--bw) solid var(--line); }
.ranking td { height: 3rem; font-size: var(--fs-base); }
.ranking thead th {
  background: var(--surface-2); border-bottom: var(--bw-rule) solid var(--rule); color: var(--muted);
  font-size: var(--fs-xs); font-weight: var(--fw-strong); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.ranking tbody tr:last-child td { border-bottom: 0; }
.ranking .c-club { text-align: left; font-weight: var(--fw-strong); }
.ranking-ia th, .ranking-ia td, #compare-table .col-comm, .ranking-club-ia .c-pos { text-align: center; }
.ranking .c-rank { width: 3rem; padding-inline: var(--sp-1); text-align: center; }
.ranking .c-main { font-family: var(--font-num); font-size: var(--fs-lg); font-weight: var(--fw-heavy); color: var(--ink); }
.ranking .c-sec { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-text); }
.no-community .col-comm { display: none; }

/* ---------- 8. Home ---------- */
/* Móvil: CTA, tabla, paneles, CTA final. ≥ 64rem: la tabla ocupa la columna principal y el resto va al costado. */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.panel { padding: var(--sp-4); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); }
.panel h2 { margin: 0 0 var(--sp-2); padding: 0; border: 0; font-size: var(--fs-lg); }
.panel p { margin: var(--sp-2) 0; }
.panel p:last-child { margin-bottom: 0; }
.cta-panel .btn { width: 100%; }
.cta-end h2, .cta-end p { display: none; }
.vs-list, .read-list { margin: 0; padding: 0; list-style: none; }
.vs-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding: var(--sp-2) 0; border-bottom: var(--bw) solid var(--line); }
.read-list li { margin: var(--sp-2) 0; font-size: var(--fs-sm); }
.table-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.more-toggle { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.more-toggle[hidden] { display: none; }
@media (min-width: 64rem) {
  .home-grid { grid-template-columns: minmax(0, 1fr) var(--rail); grid-template-rows: auto auto 1fr; align-items: start; column-gap: var(--sp-5); }
  .home-table { grid-column: 1; grid-row: 1 / span 4; }
  .home-grid > .panel { grid-column: 2; }
  .cta-end { display: none; }
}

/* Pestañas con subrayado */
.tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 var(--sp-4); margin: var(--sp-5) 0 var(--sp-4); border-bottom: var(--bw) solid var(--line-strong); }
.tabs a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-1); margin-bottom: -1px; border-bottom: 3px solid transparent;
  color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-strong); text-decoration: none;
}
.tabs a[aria-current] { border-bottom-color: var(--brand); color: var(--brand); font-weight: var(--fw-heavy); }
.tabs a.is-ai[aria-current] { border-bottom-color: var(--ia); color: var(--ia); }
.tabs-label { align-self: center; color: var(--ia); font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--track-caps); text-transform: uppercase; }
@media (hover: hover) { .tabs a:not([aria-current]):hover { border-bottom-color: var(--line-strong); } }

.hint { margin: var(--sp-1) 0 var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }
.hint::before { content: "›"; margin-right: var(--sp-2); color: var(--brand); font-weight: var(--fw-heavy); }

/* Tabla principal: la fila entera abre el club; cada 5 puestos, una línea más marcada */
.ranking-main tbody tr { position: relative; }
.ranking-main tbody tr:nth-child(5n) td { border-bottom-color: var(--line-strong); }
.ranking-main .c-go { width: 1.5rem; padding-left: 0; }
.ranking-main .c-more { display: none; }
.ranking-main.show-more .c-more { display: table-cell; }
/* Con «Más datos» la columna principal queda angosta: tabla compacta (sin barra del medidor) para que no haga scroll horizontal */
.ranking-main.show-more th, .ranking-main.show-more td { padding-inline: var(--sp-2); }
.ranking-main.show-more .c-rank { padding-inline: var(--sp-1); }
.ranking-main.show-more .meter svg { display: none; }
.ranking-main.show-more .c-main { font-size: var(--fs-base); }
.ranking-main tr.cut td { height: auto; padding: var(--sp-1) var(--sp-3); background: var(--surface-2); border-top: var(--bw-rule) solid var(--rule); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-strong); letter-spacing: var(--track-caps); text-align: center; text-transform: uppercase; white-space: normal; }
.ranking-main tr.is-out .c-main, .ranking-main tr.is-out .club-cell { color: var(--muted); }
.ranking-main .chev { color: var(--disabled); font-weight: var(--fw-heavy); transition: color var(--t-fast); }
.ranking-main a.club-cell { vertical-align: middle; }
.ranking-main a.club-cell::after, .ranking-ia a.club-cell::after { content: ""; position: absolute; inset: 0; }
.ranking-main a.club-cell:focus-visible, .ranking-ia a.club-cell:focus-visible { outline: none; }
.ranking-main a.club-cell:focus-visible::after, .ranking-ia a.club-cell:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .ranking-main tbody tr:hover td { background: var(--surface-2); }
  .ranking-main tbody tr:hover .chev { color: var(--brand); }
}
.is-ia .ranking thead th { background: var(--ia-soft); }

/* ---------- 9. Club ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }
.crumbs a { color: var(--muted); }
@media (hover: hover) { .crumbs a:hover { color: var(--brand); } }
.crumbs [aria-current] { color: var(--ink); font-weight: var(--fw-strong); }

.club-head { display: flex; align-items: center; gap: var(--sp-4); }
.club-head h1 { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-tight); }
.club-head .figures { margin: var(--sp-1) 0 0; color: var(--ink-2); font-size: var(--fs-base); }
.club-head .figures strong { color: var(--ink); font-family: var(--font-num); }
.club-head .tag-muestra { margin-top: var(--sp-2); background: var(--warning-soft); color: var(--ink); text-transform: none; letter-spacing: 0; }
@media (max-width: 520px) { .crest.crest-xl { width: 4.5rem; height: 4.5rem; } .crest-fallback.crest-xl { font-size: 1.9rem; } }

/* Vecinos en el ranking */
.neighbors { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-4); }
.neighbor { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap); color: var(--ink); font-weight: var(--fw-ui); text-decoration: none; }
.neighbor-dir { color: var(--muted); }
.neighbor-pos { color: var(--muted); font-family: var(--font-num); font-size: var(--fs-sm); }
@media (hover: hover) { .neighbor:hover { color: var(--brand); } }

/* Datos clave: filetes entre celdas, sin tarjetas. 2 columnas en móvil, 4 en escritorio */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--sp-3) 0 var(--sp-5); padding: 0; border-top: var(--bw) solid var(--line); }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: var(--bw) solid var(--line); }
.fact dt { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-strong); letter-spacing: var(--track-caps); text-transform: uppercase; }
.fact dd { margin: var(--sp-1) 0 0; font-family: var(--font-num); font-size: var(--fs-xl); font-weight: var(--fw-heavy); }

.not-candidate { margin: var(--sp-4) 0; color: var(--ink-2); }
.not-candidate a { margin-left: var(--sp-2); font-weight: var(--fw-ui); white-space: nowrap; }

/* Gráfico de puntos: comunidad vs cada modelo (SVG, sin estilos inline) */
.plot { display: block; width: 100%; max-width: 40rem; height: auto; margin: var(--sp-3) 0 var(--sp-4); font-family: var(--font-text); }
.plot-grid { stroke: var(--line); stroke-width: 1; }
.plot-cut { stroke: var(--danger); stroke-width: 1; stroke-dasharray: 3 3; }
.plot-row { stroke: var(--line-strong); stroke-width: 1; }
.plot-tick { fill: var(--muted); font-family: var(--font-num); font-size: 10px; }
.plot-label { fill: var(--ink); font-size: 11px; font-weight: var(--fw-ui); }
.dot { stroke: var(--surface); stroke-width: 2; }
.dot-comunidad { fill: var(--brand); }
.dot-ia { fill: var(--ia); }

/* Tabla de fuentes: nombres a la izquierda, sin subrayado */
.ranking-club-ia .c-club { text-align: left; }
.ranking-club-ia .c-club .tag { margin-left: var(--sp-2); }
.ranking-club-ia a.model-link { color: var(--ink); font-weight: var(--fw-strong); text-decoration: none; }
.ranking-club-ia td.c-club { position: relative; }
.ranking-club-ia a.model-link::after { content: ""; position: absolute; inset: 0; }   /* toda la celda es el enlace */
.ranking-club-ia a.model-link:focus-visible { outline: none; }
.ranking-club-ia a.model-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (hover: hover) { .ranking-club-ia a.model-link:hover { color: var(--ia); text-decoration: underline; } }

.dist { width: 100%; border-collapse: collapse; }
.dist th { width: 3.5rem; padding: .1rem var(--sp-3) .1rem 0; text-align: right; color: var(--muted); font-family: var(--font-num); font-size: var(--fs-xs); font-weight: var(--fw-strong); }
.dist td { padding: .1rem 0; }
.dist td:last-child { width: 3rem; padding-left: var(--sp-2); text-align: right; font-family: var(--font-num); font-size: var(--fs-xs); }
.dist svg { display: block; width: 100%; height: .75rem; border-radius: 2px; background: var(--surface-2); }
.dist rect { fill: var(--brand); }
.dist-out rect { fill: var(--disabled); }

/* ---------- 10. Comunidad vs IA ---------- */
.differ { margin: var(--sp-4) 0; }
.differ h2 { margin-top: 0; }
.differ h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); }
.differ-cols { display: grid; gap: var(--sp-4); }
.differ ol { margin: 0; padding: 0; list-style: none; }
.differ li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: var(--bw) solid var(--line); }
@media (min-width: 640px) { .differ-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tag-web { background: var(--warning-soft); color: var(--ink); text-transform: none; letter-spacing: 0; }
.ranking-ia thead th { vertical-align: bottom; }
/* Compacta: los datos son puestos de 1–2 cifras, así que la tabla entra sin scroll horizontal */
.ranking-ia th, .ranking-ia td { padding-inline: var(--sp-2); }
.ranking-ia thead th { white-space: normal; line-height: 1.15; }
.ranking-ia .c-rank { width: 2.6rem; padding-inline: var(--sp-1); }
.ranking-ia .c-club { left: 2.6rem; }
.ranking-ia .c-club, .ranking-ia td.c-club .club-cell { white-space: nowrap; }
.ranking-ia td.heat { background: var(--ia-soft); font-weight: var(--fw-heavy); }
/* Club fijo a la izquierda al deslizar: el # y el club se quedan, los modelos corren */
.ranking-ia .c-rank, .ranking-ia .c-club { position: sticky; z-index: 1; background: var(--surface); }
.ranking-ia thead .c-rank, .ranking-ia thead .c-club { background: var(--surface-2); }
.ranking-ia .c-rank { left: 0; }
.ranking-ia .c-club { box-shadow: 1px 0 0 var(--line); }
.scroll-hint { display: none; margin: 0 0 var(--sp-1); color: var(--muted); font-size: var(--fs-xs); text-align: right; }
.how { margin-top: var(--sp-6); }

/* ---------- 11. Flujo /rankear ---------- */
.steps { display: flex; gap: var(--sp-1); margin: var(--sp-1) 0 var(--sp-4); }
.steps span { flex: 1; height: .3rem; border-radius: 999px; background: var(--line-strong); }
.steps span.is-done, .steps span.is-current { background: var(--brand); }

.stepbar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4); padding: var(--sp-3) 0; background: var(--bg); border-top: var(--bw) solid var(--line-strong);
}
.stepbar-info { flex: 1; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.counter { font-family: var(--font-num); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stepbar progress { flex: 1; min-width: 3rem; height: .6rem; -webkit-appearance: none; appearance: none; border: 0; border-radius: 999px; background: var(--line); overflow: hidden; }
.stepbar progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
.stepbar progress::-webkit-progress-value { background: var(--brand); border-radius: 999px; transition: width var(--t-fast); }
.stepbar progress::-moz-progress-bar { background: var(--brand); border-radius: 999px; }
#finish { margin-left: auto; }

/* Paso 1: elegir quién queda afuera */
.picker { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: var(--sp-3); }
.pick {
  position: relative; width: 100%; min-height: 6.5rem; padding: var(--sp-3) .3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--surface); color: var(--ink); border: 2px solid var(--line-strong);
  font-size: var(--fs-xs); font-weight: var(--fw-ui); line-height: 1.2; text-align: center;
}
.picker .pick .crest { width: 3rem; height: 3rem; transition: opacity var(--t-fast); }
.picker .pick:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
@media (hover: hover) { .picker .pick:not(.is-out):hover:not(:disabled) { border-color: var(--brand); } }
.picker .pick.is-out, .picker .pick.is-out:hover:not(:disabled) { border-color: var(--danger); }
.pick.is-out .crest { opacity: .4; }
.pick.is-out::after { content: "✕"; position: absolute; top: var(--sp-1); right: .4rem; color: var(--danger); font-weight: var(--fw-heavy); }
@media (min-width: 700px) {
  .picker { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
  .picker .pick .crest { width: 3.5rem; height: 3.5rem; }
}

/* Paso 2: lista ordenable, en bloques de cinco */
#step-order { max-width: 34rem; margin-inline: auto; }
.order { list-style: none; margin: 0; padding: 0; counter-reset: pos; }
.order li {
  counter-increment: pos; position: relative; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) .2rem; background: var(--surface); border: var(--bw) solid var(--line); border-top: 0;
  font-weight: var(--fw-strong); cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: pan-y;
}
.order li::before {
  content: counter(pos, decimal-leading-zero); min-width: 2.6rem; text-align: right; color: var(--muted);
  font-family: var(--font-num); font-weight: var(--fw-heavy); font-size: var(--fs-xl); font-variant-numeric: tabular-nums;
}
.order li:nth-child(-n+5)::before { color: var(--brand); }
.order li:active { cursor: grabbing; }
.grip {
  flex: none; width: 12px; height: 18px; margin-left: auto; color: var(--disabled);
  background: radial-gradient(circle at 3px 3px, currentColor 1.5px, transparent 2px) center / 6px 6px;
}
@media (hover: hover) { .order li:hover .grip { color: var(--muted); } }
.pos-select {      /* transparente sobre el número: al tocarlo abre el selector nativo de puesto */
  position: absolute; left: 0; top: 0; bottom: 0; width: 3.4rem; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
  font-size: 1rem; -webkit-appearance: none; appearance: none;
}
.order li.is-grabbed { background: var(--brand-soft); outline: 2px solid var(--brand); outline-offset: -2px; box-shadow: var(--shadow-drag); z-index: 1; }
.order img { pointer-events: none; -webkit-user-drag: none; }
.order li:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .order li:hover { background: var(--surface-2); } }
.sortable-ghost { background: var(--brand-soft) !important; outline: 2px dashed var(--brand); outline-offset: -2px; }
.sortable-ghost > * { opacity: .35; }
.sortable-chosen { background: var(--surface-2); }
.order li.sortable-drag { background: var(--surface); cursor: grabbing; box-shadow: var(--shadow-drag); }
.order li.sortable-fallback::before { content: ""; }
/* Marcadores de bloque: atados a la POSICIÓN (nth-child), fijos mientras se arrastra */
.order li:nth-child(5n+1) { margin-top: 1.9rem; border-top: var(--bw) solid var(--line); border-radius: var(--r) var(--r) 0 0; }
.order li:nth-child(5n) { border-radius: 0 0 var(--r) var(--r); }
.order li:nth-child(5n+1)::after {
  position: absolute; left: 0; top: -1.55rem; color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.order li:nth-child(1)::after { content: "Top 5"; }
.order li:nth-child(6)::after { content: "6–10"; }
.order li:nth-child(11)::after { content: "11–15"; }
.order li:nth-child(16)::after { content: "16–20"; }

/* Paso 3: resultado */
.fan-label { color: var(--muted); font-size: var(--fs-base); font-weight: var(--fw-ui); }
.highlights { list-style: none; margin: var(--sp-2) 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.highlights li { padding: var(--sp-2) var(--sp-3); background: var(--surface); border: var(--bw) solid var(--line); border-left: 3px solid var(--ia); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.fan-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0 0; }
.actions .note { flex: 1 1 100%; margin: 0; }
#download, #share { flex: 1 1 9rem; }
#submit { width: 100%; }
.done-grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); }
.done-main h3 { margin: 0 0 var(--sp-1); }
.done-side { align-self: start; }
.todo { list-style: none; margin: 0; padding: 0; counter-reset: todo; display: grid; gap: var(--sp-5); }
.todo > li { position: relative; padding-left: 2.4rem; counter-increment: todo; }
.todo > li::before {
  content: counter(todo); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-num); font-weight: var(--fw-heavy); font-size: var(--fs-sm);
}
.todo h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-base); line-height: 1.7rem; }
.todo .note { margin: var(--sp-1) 0 var(--sp-2); }
.redo { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: var(--bw) solid var(--line); }
.redo-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.redo-confirm .note { flex: 1 1 100%; margin: 0; }
@media (hover: hover) {   /* button:hover:not(:disabled) pisa a .btn-ghost:hover y .btn-danger:hover */
  .redo .btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
  .redo .btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
}
@media (min-width: 62rem) {
  .done-grid { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
  .done-side { position: sticky; top: var(--sp-4); }
}
.copy-row { display: flex; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-2); }
.copy-row input { flex: 1; min-width: 0; }

/* ---------- 12. Páginas de texto ---------- */
.methodology { max-width: var(--prose); }
.methodology p, .methodology li { line-height: 1.65; }
.methodology h2 { scroll-margin-top: var(--sp-4); }
.methodology details { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-sm); }
.methodology .quick { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: var(--bw) solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-sm); }
.methodology .quick h2 { margin: 0 0 var(--sp-2); padding-top: 0; border-top: 0; font-size: var(--fs-lg); }
.methodology .quick ul { margin: 0; padding-left: var(--sp-5); }
.toc { margin: var(--sp-4) 0; }
.toc ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 .8rem; border: var(--bw) solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-ui); text-decoration: none; }
@media (hover: hover) { .toc a:hover { background: var(--brand-soft); border-color: var(--brand); } }
.methodology summary { margin-block: calc(-1 * var(--sp-3)); padding-block: var(--sp-3); }   /* área táctil de 44px sin mover el layout */
.methodology details[open] summary { margin-bottom: var(--sp-2); }
.methodology pre { margin: var(--sp-2) 0 0; padding: var(--sp-3); overflow-x: auto; white-space: pre-wrap; background: var(--surface-2); border: var(--bw) solid var(--line); border-radius: var(--r-sm); font-family: var(--font-num); font-size: .8rem; }

/* ---------- 13. Responsive y preferencias del sistema ---------- */
.only-sm { display: none; }
@media (max-width: 700px) {
  .hide-sm { display: none; }
  .only-sm { display: inline; }
  .scroll-hint { display: block; }
  .more-toggle, .ranking-main .c-more, .ranking-main.show-more .c-more { display: none; }   /* móvil: solo Promedio y Top */
}

@media (max-width: 600px) {
  .ranking th, .ranking td { padding: var(--sp-2) var(--sp-1); }
  .ranking td { height: 3.25rem; font-size: var(--fs-sm); }
  .ranking thead th { vertical-align: bottom; white-space: normal; line-height: 1.15; }
  .ranking .c-club { white-space: normal; line-height: 1.2; }
  .ranking .c-rank { width: 2.3rem; }
  .ranking-ia .c-club { left: 2.3rem; width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; }
  .ranking-ia td.c-club .club-cell { white-space: normal; }   /* el club fijo ocupa lo justo: Com., IA y Dif. quedan a la vista */
  .ranking-ia .c-model { min-width: 4.5rem; }
  .ranking-model .meter svg, .ranking-club-ia .meter svg { display: none; }
  .ranking-model .c-rank { width: 2rem; padding-inline: 0; }
  .ranking-model .club-cell { gap: var(--sp-1); }   /* tablas de 5 columnas: sin barra para no scrollear en horizontal */
  .ranking-main .c-main { font-size: var(--fs-base); }
  .ranking-main .c-go { width: 1rem; }
  .rk { min-width: 1.75rem; height: 1.75rem; font-size: .85rem; }
  .meter { flex-direction: column-reverse; align-items: flex-end; gap: .2rem; }
  .meter svg { width: 2.6rem; }
}

@media (max-width: 36rem) {
  :root { --gutter: 1rem; }
  .stepbar .counter { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}