/* Paginación del sitio (productos, servicios, blog, buscador, promociones, destacados, novedades).
   El estilo se elige en Estilos > Componentes > Paginación (parámetro PAGINACION_ESTILO): el servidor
   imprime la clase paginacion-<estilo> en el <ul class="pagination"> y este archivo la dibuja. La del theme
   ya no se usa: sin parámetro el sitio va con círculos (clasePaginacionSitio).
   Tamaños en px a propósito: el tema pone html en 20px, así que un rem acá mide 20px.
   El color sale de --color-primario (y su tinte -30) que head.php define por tenant. Las reglas de cada
   estilo tienen tres clases de especificidad, igual que las del theme que pisan: por eso la base común
   no toca radio, borde ni fondo. */

.pagination[class*="paginacion-"] {
	box-shadow: none;
	align-items: center;
	flex-wrap: wrap;
}

.pagination[class*="paginacion-"] .page-item .page-link {
	margin-left: 0;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* El ícono va en un <span> con el line-height del texto y el <i> en línea sobre la base: la caja del ícono
   quedaba unos 3px más arriba que el número. Con los dos centrados por flex el ícono queda a la altura del
   número, y un poco más grande que la letra para que se lea como botón. */
.pagination[class*="paginacion-"] .page-link span {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.pagination[class*="paginacion-"] .page-link i {
	display: block;
	font-size: 20px;
	line-height: 1;
}

/* --- Círculos sueltos: cada página es un círculo sin borde, la actual rellena con el primario y una sombra del mismo color --- */

.pagination.paginacion-circulos {
	gap: 6px;
}

.paginacion-circulos .page-item .page-link {
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #4b5563;
	font-size: 13px;
	font-weight: 600;
}

.paginacion-circulos .page-item .page-link:hover {
	background: rgba(0, 0, 0, .05);
	color: #111827;
}

.paginacion-circulos .page-item.active .page-link {
	background: var(--color-primario);
	color: #fff;
	box-shadow: 0 6px 14px var(--color-primario-30);
}

.paginacion-circulos .page-item.disabled .page-link {
	color: #c9ced6;
	background: transparent;
}

/* --- Cápsula segmentada: una pista gris redondeada y la página actual como pastilla blanca con sombra --- */

.pagination.paginacion-capsula {
	gap: 2px;
	padding: 4px;
	border-radius: 999px;
	background: #f1f3f6;
}

.paginacion-capsula .page-item .page-link {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #4b5563;
	font-size: 13px;
	font-weight: 600;
}

.paginacion-capsula .page-item .page-link:hover {
	background: rgba(255, 255, 255, .8);
	color: #111827;
}

.paginacion-capsula .page-item.active .page-link {
	background: #fff;
	color: var(--color-primario);
	box-shadow: 0 1px 4px rgba(15, 23, 42, .14);
}

.paginacion-capsula .page-item.disabled .page-link {
	color: #c9ced6;
	background: transparent;
}

/* --- Cuadrados con contorno: cajas redondeadas con borde fino; la actual rellena con el primario --- */

.pagination.paginacion-cuadrados {
	gap: 6px;
}

.paginacion-cuadrados .page-item .page-link {
	width: 36px;
	height: 36px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 10px;
	background: #fff;
	color: #374151;
	font-size: 13px;
	font-weight: 600;
}

.paginacion-cuadrados .page-item .page-link:hover {
	border-color: var(--color-primario);
	color: var(--color-primario);
	background: #fff;
}

.paginacion-cuadrados .page-item.active .page-link {
	border-color: var(--color-primario);
	background: var(--color-primario);
	color: #fff;
}

.paginacion-cuadrados .page-item.disabled .page-link {
	color: #c9ced6;
	border-color: rgba(0, 0, 0, .06);
	background: #fafafa;
}

/* --- Pastilla continua: todas las páginas dentro de una sola pastilla blanca con borde fino; la actual es un círculo del primario --- */

.pagination.paginacion-pastilla {
	gap: 2px;
	padding: 4px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.paginacion-pastilla .page-item .page-link {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #4b5563;
	font-size: 13px;
	font-weight: 600;
}

.paginacion-pastilla .page-item .page-link:hover {
	background: rgba(0, 0, 0, .05);
	color: #111827;
}

.paginacion-pastilla .page-item.active .page-link {
	background: var(--color-primario);
	color: #fff;
}

.paginacion-pastilla .page-item.disabled .page-link {
	color: #c9ced6;
	background: transparent;
}

/* --- Tarjetas flotantes: cada página es una tarjeta blanca con sombra suave que se levanta al pasar; la actual rellena con el primario --- */

.pagination.paginacion-tarjetas {
	gap: 8px;
	padding: 4px 0;
}

.paginacion-tarjetas .page-item .page-link {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 10px;
	background: #fff;
	color: #374151;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.paginacion-tarjetas .page-item .page-link:hover {
	color: var(--color-primario);
	background: #fff;
	box-shadow: 0 6px 14px rgba(15, 23, 42, .12);
	transform: translateY(-1px);
}

.paginacion-tarjetas .page-item.active .page-link {
	background: var(--color-primario);
	color: #fff;
	box-shadow: 0 6px 14px var(--color-primario-30);
}

.paginacion-tarjetas .page-item.disabled .page-link {
	color: #c9ced6;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

/* --- Cápsula oscura: una pista oscura con los números en claro; la actual rellena con el primario --- */

.pagination.paginacion-oscura {
	gap: 2px;
	padding: 4px;
	border-radius: 999px;
	background: #1f2937;
}

.paginacion-oscura .page-item .page-link {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #cbd5e1;
	font-size: 13px;
	font-weight: 600;
}

.paginacion-oscura .page-item .page-link:hover {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.paginacion-oscura .page-item.active .page-link {
	background: var(--color-primario);
	color: #fff;
}

.paginacion-oscura .page-item.disabled .page-link {
	color: #64748b;
	background: transparent;
}

/* --- Carga continua: sin números. Un botón "Cargar más" la primera vez y después, al llegar al final, la
   página siguiente se pide sola (assets/js/paginacion-continua.js). El botón es el primario del sitio, así
   que lo gobierna Estilos > Componentes > Botones. --- */

.paginacion-continua {
	display: flex;
	justify-content: center;
	min-height: 8px;
	padding: 8px 0 4px;
}

.paginacion-continua .btn-cargar-mas {
	position: relative;
	min-width: 180px;
}

.paginacion-continua .paginacion-continua-cargando {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: paginacion-continua-giro .7s linear infinite;
}

.paginacion-continua.cargando .btn-cargar-mas {
	pointer-events: none;
}

.paginacion-continua.cargando .paginacion-continua-texto {
	visibility: hidden;
}

.paginacion-continua.cargando .paginacion-continua-cargando {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -9px 0 0 -9px;
}

/* Una vez que carga sola, el botón ya no hace falta: queda el marcador con el girito mientras trae más */
.paginacion-continua[data-auto="1"] .btn-cargar-mas {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: transparent;
	pointer-events: none;
}

.paginacion-continua[data-auto="1"] .paginacion-continua-cargando {
	border-color: rgba(0, 0, 0, .15);
	border-top-color: var(--color-primario);
}

@keyframes paginacion-continua-giro {
	to { transform: rotate(360deg); }
}

/* --- Celular: el tema fuerza 2rem/1.6rem con !important, acá se pisa con medidas propias --- */

@media (max-width: 575.98px) {
	.pagination[class*="paginacion-"] .page-item .page-link {
		width: 32px !important;
		height: 32px !important;
		font-size: 12px;
	}

	.pagination[class*="paginacion-"] .page-link i {
		font-size: 18px;
	}

	.pagination.paginacion-circulos,
	.pagination.paginacion-cuadrados {
		gap: 4px;
	}

	.pagination.paginacion-tarjetas {
		gap: 6px;
	}
}