/* ============================================================================
 * stats.css — página pública de estadísticas y rankings de lectura (/stats).
 * Rediseño «padre»: héroe, podio de los tres primeros, fichas por lector con retrato
 * (foto si la tiene, inicial o cerrojito si no) y sus últimos títulos leídos.
 * Mobile-first y a prueba de tema claro/oscuro (sólo variables semánticas de app.css).
 * CSP: la foto se pinta como background CSS en línea (style-src 'unsafe-inline' permitido);
 * nunca hay JS inline, así que un retrato ausente cae al degradado sin romperse.
 * ==========================================================================*/

/* ── Héroe ── */
.st-hero {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px;
    padding: clamp(20px, 4vw, 34px); margin-top: 8px;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--lumbre-amber) 16%, transparent), transparent 60%),
        linear-gradient(160deg, var(--accent-soft), var(--surface));
    box-shadow: var(--shadow-sm);
}
.st-hero-copy { flex: 1 1 320px; min-width: 0; }
.st-hero-copy h1 { margin: 2px 0 8px; font-size: clamp(26px, 5vw, 40px); line-height: 1.08; }
.st-hero-copy .muted { margin: 0; max-width: 62ch; }

.stats-periods { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-end; }
.period-chip { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.period-chip:hover { color: var(--accent); border-color: var(--accent); }
.period-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }

/* ── Secciones ── */
.st-section { margin-top: clamp(26px, 5vw, 44px); }
.st-section > .section-heading { margin-bottom: 16px; }
.st-section h2 { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 21px; }
.st-section h2 > svg { color: var(--warm); }
.st-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 8px; margin-left: 4px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; }

/* ── Retrato (avatar) ── */
.st-av {
    --st-av-size: 42px;
    display: inline-grid; place-items: center; width: var(--st-av-size); height: var(--st-av-size);
    flex: none; border-radius: 50%; overflow: hidden; box-sizing: border-box;
    background: linear-gradient(150deg, var(--lumbre-discovery), var(--accent));
    color: #fff; font: 700 clamp(15px, 1.4vw, 18px)/1 var(--font-ui, system-ui); text-transform: uppercase;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--line) 70%, transparent);
}
.st-av--lg { --st-av-size: clamp(58px, 9vw, 76px); font-size: 26px; }
.st-av--photo { background-position: center; background-size: cover; background-repeat: no-repeat; }
.st-av--anon { background: linear-gradient(150deg, var(--muted), color-mix(in srgb, var(--muted) 60%, var(--surface))); opacity: .9; }
.st-av--circle { background: linear-gradient(150deg, var(--lumbre-success), var(--ok)); }
.st-av--org { background: linear-gradient(150deg, var(--lumbre-discovery), var(--warm)); }
.st-row-av, .st-podium-av { text-decoration: none; color: inherit; display: inline-grid; }

/* ── Podio (top 3) ── */
.st-podium { list-style: none; margin: 6px 0 20px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
.st-podium-item {
    position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 18px 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.st-podium .st-place-2 { order: -1; }   /* izquierda en el podio (DOM ya va 2,1,3) */
.st-podium-item { transform: translateY(6px); }
.st-place-1 { transform: translateY(-6px); border-color: var(--lumbre-amber); background: linear-gradient(180deg, color-mix(in srgb, var(--lumbre-amber) 14%, var(--surface)), var(--surface)); box-shadow: var(--shadow-md); }
.st-medal { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 14px/1 Georgia, serif; color: #fff; background: var(--muted); }
.st-place-1 .st-medal { background: linear-gradient(150deg, #E9B400, var(--lumbre-amber)); }
.st-place-2 .st-medal { background: linear-gradient(150deg, #AEB6C2, #8B93A1); }
.st-place-3 .st-medal { background: linear-gradient(150deg, #C98A55, #A56A38); }
.st-medal-name { position: absolute; top: 10px; right: 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.st-podium-body { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; max-width: 100%; }
.st-podium-time { font-size: 20px; color: var(--ink); }
.st-place-1 .st-podium-time { font-size: 24px; }
.st-podium-sub { font-size: 12px; }
.st-podium .st-book { max-width: 100%; }

/* ── Tablero / filas ── */
.st-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st-row {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.st-row:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.st-rank { width: 26px; text-align: center; font: 400 16px/1 Georgia, serif; color: var(--muted); }
.st-row-main { min-width: 0; }
.st-row-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.st-name { color: var(--ink); font-weight: 650; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.st-name:hover { color: var(--accent); text-decoration: underline; }
.st-name--anon { color: var(--muted); }
.st-badge { font-size: 11px; color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); padding: 2px 8px; border-radius: 999px; }

/* Últimos títulos leídos */
.st-last { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.st-last--podium { justify-content: center; margin-top: 8px; }
.st-last--podium .st-chips { flex-direction: column; align-items: stretch; width: 100%; }
.st-last-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.st-chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.st-book { display: inline-flex; align-items: center; gap: 5px; max-width: 260px; min-width: 0; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 12px; text-decoration: none; }
.st-book > svg { flex: none; color: var(--accent); }
.st-book > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-book:hover { border-color: var(--accent); color: var(--accent); }

/* Métricas */
.st-metrics { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
.st-metric { font-size: 13px; color: var(--muted); white-space: nowrap; }
.st-metric.lead { font-size: 15px; font-weight: 700; color: var(--ink); }

/* ── Responsive móvil: la métrica baja y la fila respira ── */
@media (max-width: 560px) {
    .st-row { grid-template-columns: auto auto minmax(0, 1fr); }
    .st-metrics { grid-column: 1 / -1; justify-content: flex-start; gap: 16px; padding-top: 4px; margin-top: 2px; border-top: 1px dashed var(--line); }
    /* El podio pasa a una columna con el 1.º arriba: sin desbordes laterales. */
    .st-podium { grid-auto-flow: row; grid-auto-columns: auto; gap: 10px; }
    .st-podium .st-place-1 { order: -1; transform: none; }         /* oro arriba */
    .st-podium .st-place-2 { order: 0; }
    .st-podium .st-place-3 { order: 1; }
    .st-podium-item { padding: 14px; transform: none; }
    .st-podium-sub { display: none; }
}
@media (max-width: 380px) {
    .st-medal-name { display: none; }
}

/* Movimiento reducido: sin elevaciones ni traslados. */
@media (prefers-reduced-motion: reduce) {
    .st-row, .period-chip { transition: none; }
    .st-row:hover { transform: none; }
    .st-podium-item, .st-place-1 { transform: none; }
}