/* Ranking — selector de métrica visible + podio reforzado (capa sobre estadio.css) */

/* hero "Salón de leyendas": en desktop quedaba muy alto/vacío (watermark + aire antes del podio).
   Bajamos el alto del hero y acercamos filtros + cinta de métricas → el podio sube. */
@media (min-width: 760px) {
    .page-ranking .poster { padding-top: 22px; padding-bottom: 24px; }
    .page-ranking .poster .poster__sub { margin-top: 8px; }
    .page-ranking .poster .poster__row { margin-top: 12px; }
    .page-ranking .rkmetrics { margin-top: 10px; }
}

/* rail de métricas: una sola fila scrolleable (mobile y desktop) — no un muro de chips envueltos */
.rkmetrics { display: flex; gap: 7px; margin-top: 16px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 24px), transparent); }
.rkmetrics::-webkit-scrollbar { display: none; }
/* OLA 3 · ítem 6 (objetivos táctiles) — el chip medía 38px de alto a 320, a 390 y con zoom
   200%, contra el mínimo de 44px del sistema (Apple HIG / WCAG 2.5.5). Son 21 chips en fila
   y el gesto real es un tap con el pulgar sobre un rail que además scrollea en horizontal:
   38px es justo el rango donde el tap se confunde con el arrastre.
   Va acá y no en estadio.css a propósito: estadio.css:1667 declara que `fseg`/metric-chips
   "se tratan en sus propias olas por estar en CSS de página". Este ES ese CSS de página.
   Se sube el `min-height`, NO el `font-size` ni el padding lateral: crece el área de toque,
   no la tipografía — el rail conserva su look compacto y sigue entrando la misma cantidad
   de chips por pantalla. `align-items: center` (ya estaba) mantiene el texto centrado en la
   caja más alta. */
.rkm { flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .77rem; font-weight: 700; color: var(--tx-2); background: rgba(22, 41, 92, .5); border: 1px solid var(--line-2); white-space: nowrap;
    transition: transform var(--mo-fast) var(--ease-out), background var(--mo-fast) ease, border-color var(--mo-fast) ease, color var(--mo-fast) ease; }
.rkm .bi { font-size: .9rem; opacity: .8; }
@media (hover: hover) { .rkm:hover { background: rgba(61, 123, 255, .16); color: #fff; transform: translateY(-1px); } }
.rkm:active { transform: scale(.96); }
.rkm.on { color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-2), var(--gold)); border-color: transparent; box-shadow: var(--sh-gold); }
.rkm.on .bi { opacity: 1; }

/* header de la métrica activa (sobre el podio): grande + descripción → se entiende al instante qué ranking mirás */
.page-ranking #stageK { display: flex; flex-direction: column; gap: 3px; }
.page-ranking .stageK__t { font-family: var(--disp); font-weight: 400; font-size: 1.55rem; line-height: 1; letter-spacing: .02em; color: var(--gold-2); display: inline-flex; align-items: center; gap: 9px; }
.page-ranking .stageK__t .bi { color: var(--gold); font-size: 1.15rem; }
.page-ranking .stageK__t { text-transform: uppercase; }
.page-ranking .stageK__d { font-size: .78rem; color: var(--tx-3); text-transform: none; letter-spacing: 0; font-weight: 600; }

/* entrada del podio: escalonada 3º→2º→1º (--pd lo setea ranking.js por pedestal) + brillo al
   aterrizar el 1º. Sube de rv8 (plano) a pedestal-in (rise+scale); el valor cuenta (count-up). */
.page-ranking .pedestal { animation: pedestal-in var(--mo-enter) var(--ease-out) both; animation-delay: var(--pd, 0s); }
/* 1.2s queda LITERAL a propósito: ped-glow no es una entrada ni un feedback de gesto, es un
   destello celebratorio de acompañamiento (el "flash" del campeón). Ningún token de la escala
   llega a ese rango — el más largo, --mo-bar, es 700ms — y acortarlo a 700 convertiría el brillo
   lento en un parpadeo. Es duración AMBIENTAL, fuera del lenguaje de interacción. */
.page-ranking .pedestal--1 .pedestal__av { animation: ped-glow 1.2s var(--ease-out) 1; animation-delay: calc(var(--pd, 0s) + .4s); }
@media (prefers-reduced-motion: reduce) { .page-ranking .pedestal, .page-ranking .pedestal--1 .pedestal__av { animation: none; } }

/* "Tu posición": barra COMPACTA de 1 línea (antes era un tile grande que robaba protagonismo
   al ranking). Vos · #N/Total · valor · Top X%. */
.page-ranking .miposbar { display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 10px 14px; border-radius: var(--r);
    background: linear-gradient(110deg, color-mix(in srgb, var(--gold) 15%, transparent), color-mix(in srgb, var(--gold) 5%, transparent));
    border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent); box-shadow: var(--inlight); }
.page-ranking .miposbar__av { flex: none; width: 42px; height: 42px; }
.page-ranking .miposbar__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.page-ranking .miposbar__line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.page-ranking .miposbar__k { display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-2); }
.page-ranking .miposbar__rk { font-family: var(--disp); font-size: 1.32rem; color: var(--tx); line-height: 1; }
.page-ranking .miposbar__rk small { font-family: var(--body); font-size: .58rem; color: var(--tx-3); font-weight: 700; }
.page-ranking .miposbar__v { font-size: .8rem; font-weight: 700; color: var(--tx-2); }
.page-ranking .miposbar__top { margin-left: auto; font-size: .66rem; font-weight: 800; color: var(--gold-ink); background: var(--gold); padding: 3px 9px; border-radius: 999px; }
.page-ranking .miposbar__sub { display: inline-flex; align-items: center; gap: 3px; font-size: .73rem; font-weight: 700; color: var(--win-t); }
.page-ranking .miposbar__sub .bi { font-size: 1rem; }
.page-ranking .miposbar__sub--lead { color: var(--gold-2); }
/* "Tu posición" deslogueado: CTA a Login en vez de slot vacío */
.page-ranking .miposbar--cta { flex-wrap: wrap; gap: 8px 12px; }
.page-ranking .miposbar__ctatx { flex: 1; min-width: 150px; font-size: .82rem; font-weight: 600; color: var(--tx-2); }
.page-ranking .miposbar__ctabtn { flex: none; }
/* "Tu posición": sin dato del usuario en esta métrica, o fallo de carga del endpoint.
   Mensaje claro en vez de slot vacío. Panel neutro (sin el oro de "logro") para que un
   error/sin-dato no se lea como un destaque. */
.page-ranking .miposbar--msg { flex-wrap: wrap; gap: 6px 12px;
    background: linear-gradient(110deg, color-mix(in srgb, var(--tx-3) 10%, transparent), transparent);
    border-color: var(--line); }
.page-ranking .miposbar--msg .miposbar__k { color: var(--tx-2); }
.page-ranking .miposbar__msgtx { flex: 1; min-width: 150px; font-size: .82rem; font-weight: 600; color: var(--tx-2); }
/* misma idea para la card grande del rail (desktop): panel neutro con el mensaje */
.rka-you--msg { background: rgba(255, 255, 255, .03); border-color: var(--line-2); }
.rka-you--msg .rka-k { color: var(--tx-2); }
.rka-msgtx { margin-top: 8px; font-size: .85rem; font-weight: 600; color: var(--tx-2); line-height: 1.35; }
/* Nota: el CTA aparece donde el slot #miPos es visible = mobile (la barra full-width). En desktop
   #miPos queda oculto por el layout (la posición vive en el rail), así que el CTA es mobile-first;
   el deslogueado en desktop igual tiene "Ingresar" en la navegación. */

/* ============================================================
   CONTEXTO DESKTOP bajo el podio (rail izquierdo) — SOLO ≥1024px.
   Llena la columna izquierda (que antes moría en navy) con datos
   derivados de la métrica activa: card grande "Tu posición" + vecinos,
   líder/brecha y mini-distribución. Todo se recalcula al cambiar de
   métrica (mismos datos del board completo + miPos). En mobile NO
   aparece: ahí sigue la cinta #miPos full-width de arriba.
   ============================================================ */
.rkaside { display: none; }
@media (min-width: 1024px) {
    .page-ranking #miPos { display: none !important; }   /* en desktop la card reemplaza la cinta */
    .rkaside { display: grid; gap: 12px; margin-top: 14px; align-content: start; }
}

.rka-k { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-2); }
.rka-k .bi { font-size: .9rem; opacity: .9; }

/* card grande "Tu posición" (protagonista, reemplaza la cinta fina) */
.rka-you { border-radius: 16px; padding: 15px 16px 14px;
    background: linear-gradient(165deg, color-mix(in srgb, var(--gold) 17%, transparent), color-mix(in srgb, var(--gold) 4%, transparent));
    border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.rka-you__top { display: flex; align-items: baseline; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.rka-you__rk { font-family: var(--disp, Anton), sans-serif; font-size: 2.4rem; line-height: .85; color: #fff; font-variant-numeric: tabular-nums; }
.rka-you__rk small { font-family: Barlow, sans-serif; font-size: .8rem; font-weight: 700; color: var(--tx-3); }
.rka-you__val { font-size: .9rem; font-weight: 700; color: var(--tx-2); }
.rka-you__chip { margin-left: auto; font-size: .72rem; font-weight: 800; color: #0a1430; background: var(--gold); padding: 4px 10px; border-radius: 999px; }
.rka-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; margin-top: 12px; }
.rka-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.rka-gap { margin-top: 9px; font-size: .78rem; font-weight: 700; color: var(--tx-2); display: inline-flex; align-items: center; gap: 5px; }
.rka-gap .bi { color: var(--gold); font-size: 1rem; }

/* vecinos #13 / VOS / #15 (pinned) */
.rka-neighbors { margin-top: 12px; border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); padding-top: 8px; display: flex; flex-direction: column; gap: 1px; }
.rka-nb { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; }
.rka-nb__n { font-family: var(--disp, Anton), sans-serif; font-size: 1rem; color: var(--tx-3); min-width: 30px; font-variant-numeric: tabular-nums; }
.rka-nb__nm { font-weight: 700; font-size: .84rem; color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.rka-nb__v { font-family: var(--disp, Anton), sans-serif; font-size: 1rem; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.rka-nb.is-you { background: color-mix(in srgb, var(--gold) 20%, transparent); }
.rka-nb.is-you .rka-nb__n, .rka-nb.is-you .rka-nb__v { color: var(--gold); }
.rka-nb.is-you .rka-nb__nm { color: #fff; }

/* cards líder / la métrica */
.rka-card { border-radius: 14px; padding: 13px 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); }
.rka-lead { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.rka-lead__nm { font-weight: 800; font-size: 1rem; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rka-lead__v { font-family: var(--disp, Anton), sans-serif; font-size: 1.55rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.rka-sub { margin-top: 7px; font-size: .74rem; color: var(--tx-3); line-height: 1.4; }
.rka-sub b { color: var(--tx-2); font-weight: 800; }
.rka-dist { display: flex; gap: 6px; margin-top: 10px; }
.rka-dist__cell { flex: 1; text-align: center; padding: 8px 4px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.rka-dist__lab { font-size: .58rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--tx-3); }
.rka-dist__val { font-family: var(--disp, Anton), sans-serif; font-size: 1.05rem; color: var(--tx-2); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* tu fila dentro de la lista general (logueado): destacada para "encontrarte" de un vistazo */
.page-ranking .board__row.is-you { background: color-mix(in srgb, var(--gold) 13%, transparent); box-shadow: inset 3px 0 0 var(--gold); }
.page-ranking .board__row.is-you .board__n { color: var(--gold); }
.page-ranking .board__row.is-you .board__nm { color: var(--tx); }
.page-ranking .board__you { display: inline-block; margin-left: 7px; font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold); padding: 2px 6px; border-radius: 999px; vertical-align: middle; }

/* ============================================================
   PODIO PROTAGONISTA (Fase 2 premium): el top-3 vivía en la columna angosta
   (.92fr) y se veía chico contra la tabla ancha. En desktop le damos a la
   columna izquierda al menos la mitad del ancho, soltamos el cap de 560px del
   stage y agrandamos los avatares → el momento "leyendas del club" pesa.
   ============================================================ */
@media (min-width: 1024px) {
    .page-ranking .rank-cols { grid-template-columns: minmax(360px, 1.04fr) .96fr; }
    .page-ranking .rank-left .stage { max-width: 100%; gap: 22px; }
    .page-ranking .rank-left .pedestal__av { width: 100px; height: 100px; }
    .page-ranking .rank-left .pedestal--1 .pedestal__av { width: 128px; height: 128px; }
    .page-ranking .rank-left .pedestal--1 .pedestal__v { font-size: 2.3rem; }
    .page-ranking .rank-left .pedestal__nm { font-size: .9rem; }
    .page-ranking .rank-left .pedestal--1 .pedestal__base { height: 98px; }
    .page-ranking .rank-left .pedestal--2 .pedestal__base { height: 66px; }
    .page-ranking .rank-left .pedestal--3 .pedestal__base { height: 48px; }
}