/* estilos/paginador.css — componentes/paginador.js (mxPaginador.vincular).
   Solo tokens. El acento va en la página actual (fondo sólido con su par de letra). */

.mx-pag {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 18px; margin-top: 14px; font-size: 14px; color: var(--text-2);
}
.mx-pag-izq { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.mx-pag-tam { display: inline-flex; align-items: center; gap: 8px; }
.mx-pag-sel {
  height: 34px; padding: 0 8px; font: inherit; color: var(--text);
  background: var(--navy-2); border: 1px solid var(--border-2); border-radius: 8px;
}
.mx-pag-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mx-pag-btn {
  min-width: 36px; height: 36px; padding: 0 10px; cursor: pointer;
  font: 500 14px var(--font, inherit); color: var(--text);
  background: transparent; border: 1px solid var(--border-2); border-radius: 8px;
}
.mx-pag-btn:hover:not(:disabled) { background: var(--navy-4); }
.mx-pag-btn:focus-visible, .mx-pag-sel:focus-visible { outline: 2px solid var(--blue-light, #60a5fa); outline-offset: 2px; }
.mx-pag-btn:disabled { opacity: .4; cursor: default; }
.mx-pag-btn[aria-current="page"] {
  background: var(--mx-acento-solido, var(--blue)); border-color: var(--mx-acento-solido, var(--blue));
  color: var(--mx-sobre-acento, #fff);
}
.mx-pag-gap { padding: 0 4px; color: var(--text-3); }
@media (pointer: coarse) {
  .mx-pag-btn, .mx-pag-sel { min-height: 44px; }
}