/* DeFábrica Directo — paginación (especificación §18): ‹ 1 2 3 4 5 … 860 › con la página actual en un círculo naranja.
   La usan el catálogo (template-parts/catalogo/paginacion.php, que coloca el bloque con «Mostrando…» en catalogo.css)
   y el blog (template-parts/blog/listado.php). El HTML sale de dfd_paginacion_html() (inc/catalogo.php). */

.paginacion__lista {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.paginacion__numero,
.paginacion__flecha {
	display: grid;
	place-items: center;
	min-width: 34px;
	height: 34px;
	padding: 0 6px;
	border-radius: var(--df-radio-pastilla);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--df-texto-fuerte);
	text-decoration: none;
}

a.paginacion__numero:hover {
	background: var(--df-blanco);
	box-shadow: inset 0 0 0 1px var(--df-borde);
}

.paginacion__numero.es-actual {
	background: var(--df-naranja-aa);
	color: var(--df-blanco);
	font-weight: 700;
}

.paginacion__flecha {
	width: 34px;
	padding: 0;
	border: 1px solid var(--df-borde);
	background: var(--df-blanco);
}

.paginacion__flecha .icono {
	width: 16px;
	height: 16px;
}

.paginacion__flecha.es-inactiva {
	opacity: 0.4;
}

a.paginacion__flecha:hover {
	border-color: var(--df-borde-hover);
}

.paginacion__puntos {
	min-width: 20px;
	font-size: 0.8125rem;
	text-align: center;
	color: var(--df-texto-2);
}

@media (max-width: 767px) {
	.paginacion__lista {
		gap: 2px;
	}

	.paginacion__numero {
		min-width: 32px;
		height: 32px;
	}

	.paginacion__flecha {
		width: 32px;
		height: 32px;
	}
}