/* ══════════════════════════════════════════════════════════════════
   PAGINAÇÃO
   ──────────────────────────────────────────────────────────────────
   A barra que anda entre as páginas de uma lista. Só desenho: quem
   decide quantas páginas há é web/paginacao.js, e os dois andam
   juntos.
   Depende apenas dos tokens que index.html e admin.html declaram
   iguais no :root dos dois, inclusive os de ritmo vertical.
   ══════════════════════════════════════════════════════════════════ */

.pag{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:var(--espaco-bloco)}

/* 40 px de altura, e 44 no ponteiro grosso, pela mesma regra de
   admin.html e index.html: quem aponta com o dedo precisa de alvo
   maior, e isso não se decide pela largura da tela. */
.pag-bt{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 18px;
        border:1.5px solid var(--border);border-radius:var(--r-campo);background:#fff;
        color:var(--soft);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
.pag-bt:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}

/* O botão da ponta fica APAGADO E PRESENTE, e não some: uma barra que
   troca de largura ao andar faz o outro botão pular debaixo do dedo, e
   quem está na primeira página precisa ver que existe uma "Anterior"
   para entender onde está. disabled já tira do caminho do teclado. */
.pag-bt:disabled{opacity:.45;cursor:default}

/* Tabular para o miolo não mudar de largura entre "1 / 9" e "8 / 9",
   que faria os dois botões tremerem a cada clique. */
.pag-onde{font-size:13px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;
          min-width:62px;text-align:center}

@media(pointer:coarse){
  .pag-bt{min-height:44px}
}