.ranking-page .page-hero { padding: 2.5rem 0 2rem; background: linear-gradient(120deg, var(--color-surface-alt), var(--color-bg)); border-bottom: 1px solid var(--color-border); }
.ranking-page h1 { letter-spacing: -.035em; margin-bottom: .7rem; }
.ranking-page .page-hero p { max-width: 650px; color: var(--color-muted); }
.ranking-rules { display: flex; flex-wrap: nowrap; justify-content: center; gap: .5rem; font-size: .75rem; color: var(--color-muted); padding: 1rem; border-top: 1px solid var(--color-border); }
.ranking-rules > span { border: 1px solid var(--color-border); border-radius: 999px; padding: .4rem .7rem; background: var(--color-surface); }
.ranking-rules strong { margin-left: .3rem; color: var(--color-text); }
.ranking-body { padding: 1.8rem 0; }
.ranking-podium-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.ranking-podium-head h2, .ranking-toolbar h2 { margin: 0; font-size: 1.2rem; letter-spacing: -.02em; }
.ranking-podium-head > span { font-size: .8rem; color: var(--color-muted); }
.ranking-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.ranking-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem; }
.ranking-toolbar p { font-size: .8rem; color: var(--color-muted); margin: .35rem 0 0; }
.ranking-search { display: grid; gap: .3rem; font-size: .75rem; font-weight: 600; color: var(--color-muted); width: min(260px, 100%); }
.ranking-search input { width: 100%; min-height: 42px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); color: var(--color-text); padding: .6rem .8rem; font: inherit; font-size: .9rem; }
.ranking-panel .table-wrap { border: 0; border-radius: 0; }
.ranking-table { table-layout: fixed; width: 100%; }
.ranking-col-position { width: 85px; }
.ranking-col-points { width: 110px; }
.ranking-col-km { width: 140px; }
.ranking-caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.ranking-table th, .ranking-table td { padding: 1rem 1.2rem; vertical-align: middle; }
.ranking-table .ranking-name { background: transparent; color: var(--color-text); text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.ranking-position strong { display: inline-block; font-size: 1.1rem; color: var(--color-text); }
.ranking-position > span { display: block; font-size: .7rem; margin-top: .15rem; }
.ranking-numeric, .ranking-points, .ranking-km { text-align: right; font-variant-numeric: tabular-nums; }
.ranking-points { color: var(--color-primary); font-weight: 800; }
.ranking-km { color: var(--color-muted); }
.ranking-table tr.is-top1 > * { background: var(--tint-gold); }
.ranking-table tr.is-top2 > * { background: var(--tint-silver); }
.ranking-table tr.is-top3 > * { background: var(--tint-bronze); }
.ranking-table tbody tr:not([class^="is-top"]):hover > * { background: var(--color-surface-alt); }
.ranking-table tbody tr[hidden] { display: none; }
.ranking-no-results { padding: 1.5rem; text-align: center; color: var(--color-muted); margin: 0; }
.ranking-evolution-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; padding: 1.5rem; margin-top: 1rem; box-shadow: var(--shadow-sm); }
.evolution-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ranking-evolution-panel h2 { font-size: 1.25rem; letter-spacing: -.02em; margin: 0; }
.ranking-evolution-panel p { font-size: .8rem; color: var(--color-muted); }
.ranking-evolution-panel .evolution-season { color: var(--color-primary); font-size: .7rem; font-weight: 700; margin: 0 0 .35rem; }
.evolution-total { background: var(--color-surface-alt); border-radius: 999px; padding: .4rem .7rem; font-size: .75rem; color: var(--color-muted); white-space: nowrap; }
.evolution-description { margin: .65rem 0 1rem; }
.ranking-evolution-chart { position: relative; height: 380px; }
.evolution-legend { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1.2rem; margin-top: .5rem; border-top: 1px solid var(--color-border); }
.evolution-legend-button { display: inline-flex; align-items: center; gap: .5rem; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: .5rem .65rem; min-height: 40px; color: var(--color-text); font: inherit; font-size: .75rem; cursor: pointer; }
.evolution-legend-button[aria-pressed="false"] { color: var(--color-muted); background: var(--color-surface-alt); }
.evolution-legend-button[aria-pressed="false"] .evolution-color { background: transparent; border: 2px solid var(--serie-color); }
.evolution-color { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: var(--serie-color); }
.ranking-evolution-panel .evolution-hint { font-size: .7rem; margin: .8rem 0 0; }
@media (max-width: 640px) { .ranking-evolution-panel { padding: 1rem .7rem; } .ranking-evolution-chart { height: 300px; } .ranking-evolution-panel h2 { font-size: 1.05rem; } .evolution-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .evolution-legend-button { overflow-wrap: anywhere; } }
@media (min-width: 641px) {
  .ranking-col-position { width: 14%; }
  .ranking-col-points, .ranking-col-km { width: 20%; }
  .ranking-table .ranking-position,
  .ranking-table thead th:first-child,
  .ranking-table .ranking-numeric,
  .ranking-table .ranking-points,
  .ranking-table .ranking-km { text-align: center; }
  .ranking-table th, .ranking-table td { padding: 1rem 1.5rem; }
  .ranking-position strong { font-size: 1.2rem; }
  .ranking-table .ranking-points, .ranking-table .ranking-km { font-size: 1rem; }
}
@media (max-width: 640px) {
  .ranking-page .page-hero { padding: 1rem 0 .75rem; }
  .ranking-page .page-hero p, .ranking-podium-head { display: none; }
  .ranking-page h1 { margin: 0; font-size: 1.75rem; }
  .ranking-body { padding: .75rem 0; }
  .ranking-page .podium-celebration { margin-bottom: .75rem; padding-top: .5rem; }
  .ranking-page .podium-celebration .podium-step { padding-top: .25rem; padding-bottom: .65rem; }
  .ranking-page .podium-cup { width: 50px; height: 55px; margin-bottom: .25rem; }
  .ranking-page .podium-step.gold .podium-cup { width: 62px; height: 69px; }
  .ranking-page .podium-step .pos { font-size: 1.4rem; }
  .ranking-page .podium-step .name { margin: .15rem 0; }
  .ranking-toolbar { flex-direction: column; align-items: stretch; gap: .5rem; padding: .7rem; }
  .ranking-toolbar h2 { font-size: 1rem; }
  .ranking-search { gap: .15rem; }
  .ranking-rules { gap: .3rem; padding: .65rem .35rem; font-size: .65rem; }
  .ranking-rules > span { border: 0; background: none; padding: 0; white-space: nowrap; }
  .ranking-rules strong { margin-left: .15rem; }
  .ranking-page .form-actions { margin-top: .75rem; gap: .5rem; }
  .ranking-page .site-footer { margin-top: 1rem; }
  .ranking-search { width: 100%; }
  .ranking-table th, .ranking-table td { padding: .6rem .45rem; font-size: .8rem; }
  .ranking-table .ranking-name { font-size: .85rem; line-height: 1.4; }
  .ranking-table thead th { font-size: .65rem; }
  .ranking-col-position { width: 40px; }
  .ranking-col-points { width: 52px; }
  .ranking-col-km { width: 72px; }
  .ranking-position strong { font-size: 1rem; }
  .ranking-table .ranking-km { overflow-wrap: anywhere; }
}