/**
 * P-13 · Paginación — .scm-ui-pager
 *
 * Formalización del pager que ya existe en el Panel de Control
 * (`.scm-pc-pager`, secciones 07 y 08). No es un diseño nuevo: geometría,
 * tipografía, colores, ventana de cinco páginas y texto del indicador se
 * traen tal cual de esa implementación. El único cambio deliberado es que
 * el número de la página activa se ve blanco, que es lo que su CSS ya
 * declaraba y nunca llegaba a pintar.
 *
 * ‹ 1 2 3 · de N · X unidades · ›
 *
 * El módulo que lo consuma no escribe este marcado a mano: lo pide con
 * scm_ui_pager() (core/helpers/ui.php), que también resuelve los enlaces
 * conservando los filtros activos de la vista.
 */

.scm-ui-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.scm-ui-pager__item {
  border: 1px solid var(--scm-ui-pager-line);
  border-radius: var(--scm-ui-r-sm);
  padding: 6px 12px;
  background: var(--scm-ui-pager-bg);
  font-family: var(--scm-ui-font);
  /* 12.5px es el valor de la referencia. Queda por encima del mínimo de
     12px del sistema aunque no sea un escalón de P-00; se conserva porque
     este componente se reutiliza, no se rediseña. */
  font-size: 12.5px;
  font-weight: var(--scm-ui-fw-strong);
  line-height: 1.4;
  cursor: pointer;
}

.scm-ui-pager__info {
  font-family: var(--scm-ui-font);
  font-size: 12.5px;
  color: var(--scm-ui-pager-info);
}

/* ── Blindaje del color ──────────────────────────────────────────────
   Aquí está el motivo de que el número activo del Panel de Control se vea
   azul oscuro sobre azul en lugar de blanco: `scm-frontend.css` sirve
   `.scm-wrap a:not(.scm-call-btn):not(.scm-btn) { color: inherit }`, que
   con sus dos :not() suma (0,3,1) y le gana tanto a `.scm-pc-pager a`
   (0,1,1) como a `.scm-pc-pager .cur` (0,2,0). El resultado es que ningún
   número del pager recibe su color y todos heredan el del panel.

   El patrón no puede depender de que ese selector no exista donde se
   monte, así que el color se sirve con dos clases del componente más el
   scope: (0,4,0), que gana sin depender del orden de carga. Misma lección
   que P-12 con los input nativos.

   `text-decoration` va en el mismo bloque por lo mismo: `.scm-wrap a:hover`
   subraya cualquier enlace que no se defienda.                        */
.scm-ui .scm-ui-pager .scm-ui-pager__item.scm-ui-pager__page,
.scm-ui .scm-ui-pager .scm-ui-pager__item.scm-ui-pager__nav,
.scm-ui .scm-ui-pager .scm-ui-pager__item.scm-ui-pager__page:hover,
.scm-ui .scm-ui-pager .scm-ui-pager__item.scm-ui-pager__nav:hover {
  color: var(--scm-ui-pager-fg);
  text-decoration: none;
}

/* Página activa. Va después de las anteriores a propósito: tiene la misma
   especificidad (0,4,0) y el desempate lo hace el orden dentro de esta
   hoja, que sí controlamos. */
.scm-ui .scm-ui-pager .scm-ui-pager__item.is-current,
.scm-ui .scm-ui-pager .scm-ui-pager__item.is-current:hover {
  background: var(--scm-ui-pager-cur-bg);
  border-color: var(--scm-ui-pager-cur-line);
  color: var(--scm-ui-pager-cur-fg);
  text-decoration: none;
}

/* ── Estados ─────────────────────────────────────────────────────────
   La referencia no define hover: el pager no cambia de color al pasar el
   mouse y así se conserva. El foco de teclado sí se añade —no es una
   decisión estética sino la convención de accesibilidad del sistema, la
   misma de P-02 y P-05. */
.scm-ui-pager__item:focus-visible {
  outline: 2px solid var(--scm-ui-blue-500);
  outline-offset: 2px;
}

.scm-ui-pager__item[disabled],
.scm-ui-pager__item.is-disabled {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* ── Móvil: area tactil de 44 x 44 ───────────────────────────────────
   En escritorio el item mide 31 x 32px, que es el valor de la referencia
   y ahi se queda. En movil eso queda por debajo del objetivo tactil que
   el sistema pide para cualquier control, asi que la caja crece hasta
   44 x 44 con `min-width` y `min-height`.

   El tamano va sobre el propio enlace, que es el elemento que recibe el
   clic: no se usa margen ni una zona externa que no sea interactiva.

   El `inline-flex` hace falta para que el numero siga centrado cuando la
   caja crece por encima de su contenido; sin el se quedaria arriba.

   No se toca nada mas: radio, borde, colores, tipografia y el gap de 7px
   siguen siendo los del patron. Con 44px de caja y 7px de separacion, los
   centros quedan a 51px y las areas tactiles no llegan a solaparse.

   Si la fila no cabe, el `flex-wrap: wrap` del contenedor la envuelve, que
   es el comportamiento que P-13 ya define. No se reduce el area tactil ni
   se recurre a scroll horizontal.                                      */
@media (max-width: 768px) {
  .scm-ui-pager__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}