/* public\assets\css\components\paginacion.css */
/* ===== PAGINACIÓN TIENDA ===== */

.tienda-pagination {
  margin-top: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;

  font-family: var(--fuente-principal);
  font-size: var(--texto-14);
  color: var(--color-texto-principal);
}

.tienda-page-list {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* ===== BOTONES DE PÁGINA ===== */
.tienda-page-btn {
  min-width: 4rem;
  height: 4rem;
  padding: 0 1.6rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--border-radius-6);
  border: 1px solid var(--color-borde-input);
  background-color: var(--color-blanco);

  font-family: var(--fuente-principal);
  font-size: var(--texto-14);
  color: var(--color-texto-principal);
  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
}

/* Hover igual que los filtros */
.tienda-page-btn:hover:not(:disabled) {
  background-color: var(--color-acento);
  color: var(--color-texto-claro);
  border-color: var(--color-borde-2);
}

/* Active → mismo efecto scale que filtros */
.tienda-page-btn:active:not(:disabled) {
  transform: scale(0.94);
  opacity: 0.8;
}

/* ===== ESTADO: página actual (activa) ===== */
.tienda-page-btn.is-active {
  background-color: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-blanco);
  cursor: default;
}

/* Hover en activa: NO cambiar nada */
.tienda-page-btn.is-active:hover {
  background-color: var(--color-acento);
  color: var(--color-blanco);
  border-color: var(--color-acento);
}

/* Botones prev/next ligeramente más largos */
.tienda-page-btn--prev,
.tienda-page-btn--next {
  padding: 0 2rem; /* más cómodos en móvil */
}

/* ===== ESTADO: botón deshabilitado ===== */
.tienda-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
  background-color: var(--color-blanco);
  border-color: var(--color-borde-input);
  color: var(--color-texto-secundario);
  transform: none;
}

/* Hover en deshabilitado: NO cambiar nada */
.tienda-page-btn:disabled:hover {
  background-color: var(--color-blanco);
  border-color: var(--color-borde-input);
  color: var(--color-texto-secundario);
}

/* ===== ESTADO: hover sobre botón NORMAL ===== */

/* Active igual que los filtros */
.tienda-page-btn:active:not(.is-active):not(:disabled) {
  transform: scale(0.94);
  opacity: 0.8;
}

/* Elipsis */
.tienda-page-ellipsis {
  padding: 0 0.6rem;
  font-size: var(--texto-14);
  color: var(--color-texto-secundario);
}

/* ===== PAGINACIÓN RESPONSIVE ===== */

@media (max-width: 600px) {
  .tienda-pagination {
    gap: 0.8rem;
    font-size: var(--texto-12);
  }

  .tienda-page-btn {
    min-width: 4.4rem; /* botones más grandes para dedos */
    height: 4.4rem; /* aumenta área táctil */
    padding: 0 1.4rem;
    font-size: var(--texto-12);
  }

  .tienda-page-btn--prev,
  .tienda-page-btn--next {
    padding: 0 1.6rem;
  }

  .tienda-page-ellipsis {
    padding: 0 0.4rem;
  }
}