/* pages/ranking.css - estilos exclusivos da pagina "ranking".
 * Use SOMENTE tokens de app.css (var(--bg2), var(--sp-4), var(--r-md), var(--fs-sm)...).
 * Carregado por app.html depois de app.css; escopo: #page-ranking
 * (+ #page-simulados apenas para o componente .rk-pager da aba Ranking).
 * Nao edite app.css para estilos de pagina (evita conflitos de merge). */

#page-ranking{padding:var(--sp-5) var(--sp-6) var(--sp-10)}
@media (max-width:768px){#page-ranking{padding:var(--sp-4) 14px var(--sp-8)}}

/* Abas e ordenação (movidos do antigo <style> injetado por ranking.js) */
#page-ranking .rk-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-4)}
#page-ranking .rk-tab{
  min-height:var(--tap);background:var(--bg3);border:1px solid var(--border);color:var(--text2);
  padding:0 var(--sp-4);border-radius:var(--r-pill);font:600 var(--fs-sm) var(--font-b);cursor:pointer;
  transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);
}
#page-ranking .rk-tab.active{background:var(--blue);border-color:var(--blue);color:#fff}
#page-ranking .rk-sort-box{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 var(--sp-4);padding:var(--sp-3);background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-md)}
#page-ranking .rk-sort-label{font-size:var(--fs-xs);font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
#page-ranking .rk-sort-btn{
  min-height:var(--tap);background:transparent;border:1px solid var(--border);color:var(--text2);
  padding:0 var(--sp-4);border-radius:var(--r-pill);font:600 var(--fs-sm) var(--font-b);cursor:pointer;
  transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out);
}
#page-ranking .rk-sort-btn:hover{background:var(--bg2);border-color:var(--border2);color:var(--text)}
#page-ranking .rk-sort-btn.active{background:var(--blue);border-color:var(--blue);color:#fff}
#page-ranking .rk-tab:focus-visible,#page-ranking .rk-sort-btn:focus-visible,#page-ranking .rk-podium-expand:focus-visible,
#page-ranking [data-rk-retry]:focus-visible{outline:none;box-shadow:var(--focus-ring)}
#page-ranking .rk-podium-expand{min-height:var(--tap)}
#page-ranking .rk-q-stmt{font-size:var(--fs-xs);color:var(--text2);max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#page-ranking .rk-min-note{margin:0 0 var(--sp-3);color:var(--text2)}
#page-ranking .rk-min-note[hidden]{display:none}

/* Estados */
#page-ranking .rk-state{border:1px dashed var(--border2);border-radius:var(--r-lg);background:var(--bg2);padding:var(--sp-6) var(--sp-4)}
#page-ranking .rk-loading{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4) 0}
#page-ranking .rk-skel-row td{background:var(--bg3)}
#page-ranking .rk-row-muted td{opacity:.65}

/* Animação de entrada do pódio e da tabela (fill "backwards": não trava o hover) */
@keyframes rk-rise{from{opacity:0;transform:translateY(12px)}}
#page-ranking .rk-podium>.rk-podium-item{animation:rk-rise var(--dur-3) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 90ms)}
#page-ranking #rk-tbody tr:not(.rk-skel-row){animation:rk-rise var(--dur-3) var(--ease-out) backwards}
#page-ranking #rk-tbody tr:nth-child(2){animation-delay:40ms}
#page-ranking #rk-tbody tr:nth-child(3){animation-delay:80ms}
#page-ranking #rk-tbody tr:nth-child(4){animation-delay:120ms}
#page-ranking #rk-tbody tr:nth-child(5){animation-delay:160ms}
#page-ranking #rk-tbody tr:nth-child(n+6){animation-delay:200ms}
#page-ranking .rk-podium-acc,#page-ranking .rk-podium-total,#page-ranking .rk-rank-num{font-variant-numeric:tabular-nums}

/* ── Paginação (Anterior / página X de Y / Próxima) ────────────────────────
 * Componente usado no ranking de alunos, no ranking do simulado (sub-rota)
 * e na aba Ranking de simulados (#page-simulados). Mobile-first: flex-wrap,
 * alvo de toque >= 44px (var(--tap)), :focus-visible e transições explícitas
 * por propriedade (nunca a forma global). */
#page-ranking .rk-pager,#page-simulados .rk-pager{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-3);flex-wrap:wrap;
  margin:var(--sp-4) 0;padding:var(--sp-2) 0;
}
#page-ranking .rk-pager-btn,#page-simulados .rk-pager-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--tap);min-width:var(--tap);padding:0 var(--sp-4);
  background:var(--bg3);border:1px solid var(--border);color:var(--text2);
  border-radius:var(--r-pill);font:600 var(--fs-sm) var(--font-b);cursor:pointer;
  transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);
}
#page-ranking .rk-pager-btn:hover:not(:disabled),#page-simulados .rk-pager-btn:hover:not(:disabled){
  background:var(--bg2);border-color:var(--border2);color:var(--text);
}
#page-ranking .rk-pager-btn:disabled,#page-simulados .rk-pager-btn:disabled{
  opacity:.45;cursor:not-allowed;
}
#page-ranking .rk-pager-btn:focus-visible,#page-simulados .rk-pager-btn:focus-visible{
  outline:none;box-shadow:var(--focus-ring);
}
#page-ranking .rk-pager-status,#page-simulados .rk-pager-status{
  display:inline-flex;align-items:center;min-height:var(--tap);
  font:600 var(--fs-sm) var(--font-b);color:var(--text2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* Carregando: botões travados enquanto a página é buscada */
#page-ranking .rk-pager.is-loading,#page-simulados .rk-pager.is-loading{opacity:.75}
#page-ranking .rk-pager.is-loading .rk-pager-btn,#page-simulados .rk-pager.is-loading .rk-pager-btn{
  pointer-events:none;
}
@media (max-width:640px){
  #page-ranking .rk-pager,#page-simulados .rk-pager{gap:var(--sp-2)}
  #page-ranking .rk-pager-btn,#page-simulados .rk-pager-btn{flex:1 1 auto;max-width:40%}
}

/* Mobile */
@media (max-width:640px){
  #page-ranking .rk-sort-box{align-items:flex-start}
  #page-ranking .rk-sort-label{width:100%;margin-bottom:2px}
  #page-ranking .rk-sort-btn{flex:1 1 auto}
  #page-ranking .rk-podium-name{font-size:var(--fs-xs)}
  #page-ranking .rk-podium-expand{padding:0 var(--sp-2);white-space:normal}
  #page-ranking .rk-table td{padding:var(--sp-3) var(--sp-2)}
  #page-ranking .rk-acc-bar-wrap{width:48px}
}
@media (prefers-reduced-motion:reduce){
  #page-ranking .rk-podium>.rk-podium-item,#page-ranking #rk-tbody tr{animation:none}
}