/* ── Ranking público (underground / Spotify charts) ───────────────────── */

.rk-hero {
  position: relative; text-align: center;
  padding: clamp(var(--space-10), 11vh, var(--space-16)) 0 var(--space-8);
}
.rk-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.4rem + 6vw, 5rem); line-height: 1.02; letter-spacing: -0.03em;
  margin: var(--space-4) 0 var(--space-3);
}
.rk-sub { color: var(--color-text-muted); margin: 0 auto; max-width: 620px; font-size: var(--fs-lg); }

/* Tres columnas */
.rk-cols {
  display: grid; gap: var(--space-4); grid-template-columns: 1fr;
  margin-bottom: var(--space-10);
}
@media (min-width: 900px) { .rk-cols { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.rk-panel {
  background: color-mix(in srgb, var(--color-surface) 66%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.6);
}
.rk-panel-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.rk-panel-ic {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
}
.rk-panel-ic.flame { color: #ff5a3c; background: color-mix(in srgb, #ff5a3c 16%, transparent); box-shadow: 0 0 22px rgba(255,90,60,.35); }
.rk-panel-ic.tool  { color: var(--color-primary-hover); background: color-mix(in srgb, var(--color-primary) 16%, transparent); box-shadow: var(--glow-brand); }
.rk-panel-ic.bolt  { color: var(--color-hype); background: color-mix(in srgb, var(--color-hype) 16%, transparent); box-shadow: var(--glow-hype); }
.rk-panel-head h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: -0.01em; }
.rk-panel-head p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }

.rk-vacio { color: var(--color-text-muted); font-size: var(--fs-sm); padding: var(--space-4) 0; text-align: center; }

/* Lista rankeada */
.rk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rk-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text); text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.rk-row:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); transform: translateX(2px); }

.rk-pos {
  flex-shrink: 0; width: 30px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
  color: var(--color-text-muted);
}
.rk-cover-wrap { position: relative; flex-shrink: 0; width: 46px; height: 46px; }
.rk-cover {
  width: 100%; height: 100%; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--color-surface-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.rk-cover img { width: 100%; height: 100%; object-fit: cover; }
.rk-cover-ph { color: var(--color-text-muted); font-size: 1.2rem; }

/* Botón de preview inline (entre el nombre y la métrica). Siempre visible. */
.rk-play {
  flex-shrink: 0;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-brand); color: #fff; cursor: pointer;
  box-shadow: var(--glow-brand);
  transition: transform var(--transition-fast);
}
.rk-play:hover { transform: scale(1.08); }
.rk-play:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.rk-play .rk-ic-pause { display: none; }
.rk-play.is-playing .rk-ic-play { display: none; }
.rk-play.is-playing .rk-ic-pause { display: inline; }

.rk-info {
  min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px;
  color: var(--color-text); text-decoration: none;
}
.rk-info:hover .rk-titulo { color: var(--color-primary-hover); }
.rk-titulo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-meta { color: var(--color-text-muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-metric { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; line-height: 1.1; }
.rk-metric strong { font-family: var(--font-mono); font-weight: 700; }
.rk-metric small { color: var(--color-text-muted); font-size: 10px; }
.rk-metric--time strong {
  font-family: var(--font-display); font-size: var(--fs-sm);
  background: var(--gradient-hype); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Medallas top 3 */
.rk-item.rank-1 .rk-pos { color: #FFD55A; text-shadow: 0 0 14px rgba(255, 213, 90, .55); }
.rk-item.rank-2 .rk-pos { color: #D5DBE6; }
.rk-item.rank-3 .rk-pos { color: #E0A06A; }
.rk-item.rank-1 .rk-row { background: color-mix(in srgb, #FFD55A 8%, transparent); }
.rk-item.rank-1 .rk-cover { box-shadow: 0 0 0 2px color-mix(in srgb, #FFD55A 60%, transparent); }

/* CTA final */
.rk-cta {
  position: relative; text-align: center;
  padding: var(--space-10) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 45%, transparent);
}
.rk-cta h2 { font-family: var(--font-display); margin: 0 0 var(--space-2); }
.rk-cta .muted { color: var(--color-text-muted); margin: 0 0 var(--space-5); }