/**
 * common/pagination — Paginación accesible.
 * Handle: pf_pfuture_component_pagination
 *
 * Estados: .is-current (página actual), .is-disabled (extremo sin destino).
 * Modificador: --ajax (dentro de un listado filtrable; solo informa al JS).
 *
 * Tokens: solo los canónicos de style.css (issue #60), sin literales de respaldo.
 */

.pf-pagination {
  width: 100%;
  margin-block: var(--pf-space-lg);
  font-size: var(--pf-text-sm);
}

.pf-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pf-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-space-3xs);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--pf-space-xs);
  border: 1px solid var(--pf-color-border);
  border-radius: var(--pf-radius-control);
  background: var(--pf-color-surface);
  color: var(--pf-color-ink);
  font-weight: var(--pf-weight-regular);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color var(--pf-transition), color var(--pf-transition), border-color var(--pf-transition);
}

/* Una sola señal al hover: el borde sube a `border-strong`, sin relleno (issue #112). */
.pf-pagination__link:hover,
.pf-pagination__link:focus-visible {
  border-color: var(--pf-color-border-strong);
}

.pf-pagination__link.is-current {
  border-color: var(--pf-color-ink);
  background: var(--pf-color-ink);
  color: var(--pf-color-text-invert);
  font-weight: var(--pf-weight-bold);
  pointer-events: none;
}

.pf-pagination__link.is-disabled {
  border-color: var(--pf-color-border);
  background: transparent;
  color: var(--pf-color-text-muted);
  pointer-events: none;
}

.pf-pagination__link--prev,
.pf-pagination__link--next {
  padding-inline: var(--pf-space-sm);
}

.pf-pagination__arrow {
  font-size: var(--pf-text-lg);
  line-height: 1;
}

.pf-pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 2.75rem;
  color: var(--pf-color-text-muted);
}

/* En móvil solo se dejan anterior, actual y siguiente. */
@media (max-width: 600px) {
  .pf-pagination__item--number:not(:has(.is-current)),
  .pf-pagination__item--dots {
    display: none;
  }

  .pf-pagination__link-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pf-pagination__link--prev,
  .pf-pagination__link--next {
    padding-inline: var(--pf-space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-pagination__link {
    transition: none;
  }
}