/* ══════════════════════════════════════════════════════════════════
   COP · EL PAGINADOR — anterior · página · siguiente  (08/09/2026)
   ──────────────────────────────────────────────────────────────────
   ⚠⚠ ESTABA ESCRITO ADENTRO DE `ranking.html` Y SE MUDÓ ACÁ. No es un
   refactor de gusto: el ranking de Equipos Competitivos necesita el
   MISMO paginador, y la alternativa era copiar catorce líneas de CSS y
   veinte de JS a una segunda pantalla. Es exactamente la historia de las
   cuatro tarjetas de historial que después hubo que unificar.
   ⚠ LOS NOMBRES DE CLASE SON LOS QUE YA USABA `ranking.html`
   (`.rank-pager`, `.pg-btn`, `.pg-now`, `.pg-of`): así la mudanza no
   cambia ni un pixel en la pantalla que ya existía, que es la única
   forma de mover algo sin tener que revisarlo entero.
   ⚠ EL BOTÓN ES `.cop-b .cop-b--sm .cop-borde`, el del sistema. Lo pone
   el JS del componente; acá sólo se le da la forma cuadrada, porque un
   botón que sólo lleva una flecha con el relleno lateral normal queda
   con forma de pastilla vacía (la misma corrección que la chip de la
   lupa en Grupos).
   ══════════════════════════════════════════════════════════════════ */
.rank-pager{
  display:flex;align-items:center;justify-content:center;gap:var(--gap-lg, 1rem);
  padding:var(--gap-xl, 1.2rem) 1rem var(--gap-xl, 1.2rem);
}
/* ⚠ SU PROPIO `[hidden]`: el componente declara `display:flex`, que
   tiene la misma especificidad que `[hidden]{display:none}` y gana por
   orden de carga. Van siete veces que este bug aparece en CP. */
.rank-pager[hidden]{display:none}
/* ⚠⚠ Y SU `:empty` (16/09/2026). `pintar()` con UNA sola página hace
   `caja.innerHTML = ''` —«con una sola página no se dibuja nada»— pero
   la caja vacía seguía siendo un `flex` con 1.1rem arriba y 1.4rem
   abajo: **40 px de aire muerto al pie de toda lista corta**, que es lo
   contrario de lo que esa decisión quería. Con 10 partidos o menos el
   indicador ahora no ocupa nada, no sólo «no se ve».
   ⚠ Va DESPUÉS del `[hidden]` y con dos partes (0-2-0) para ganarle al
   `display:flex` de arriba. */
.rank-pager:empty{display:none}

.pg-now{
  font-family:'Inter',sans-serif;font-weight:700;font-size:var(--fs-base, 1rem);color:var(--text,#f4f6fb);
  min-width:76px;text-align:center;
}
.pg-of{font-weight:500;font-size:var(--fs-md, .88rem);color:var(--text-dim,#9aa3b5)}

.rank-pager .pg-btn{padding:0;width:36px;flex:0 0 36px}
.rank-pager .pg-btn svg{width:18px;height:18px;display:block}