/* ============================================================
   ARCHIVO DE CATEGORÍA — archive.css
   ============================================================ */

.nl-archivo {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--esp-8) var(--esp-4);
}

/* Cabecera de categoría */
.nl-archivo__cabecera {
	padding-bottom: var(--esp-6);
	margin-bottom: var(--esp-8);
	border-bottom: 3px solid var(--leon-purpura);
}

body.category-provincia .nl-archivo__cabecera { border-color: var(--color-provincia); }
body.category-deportes  .nl-archivo__cabecera { border-color: var(--color-deportes); }
body.category-cultura   .nl-archivo__cabecera { border-color: var(--color-cultura); }
body.category-sucesos   .nl-archivo__cabecera { border-color: var(--color-sucesos); }

.nl-archivo__titulo {
	font-size: var(--texto-4xl);
	color: var(--leon-purpura);
	margin: 0 0 var(--esp-2);
}

body.category-provincia .nl-archivo__titulo { color: var(--color-provincia); }
body.category-deportes  .nl-archivo__titulo { color: var(--color-deportes); }
body.category-cultura   .nl-archivo__titulo { color: var(--color-cultura); }
body.category-sucesos   .nl-archivo__titulo { color: var(--color-sucesos); }

.nl-archivo__descripcion {
	font-size: var(--texto-lg);
	color: var(--gris);
	margin: 0;
}

/* Grid de artículos */
.nl-archivo__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esp-6);
}

@media (min-width: 640px)  { .nl-archivo__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nl-archivo__grid { grid-template-columns: repeat(3, 1fr); } }

/* Paginación */
.nl-paginacion {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--esp-2);
	margin-top: var(--esp-12);
	padding-top: var(--esp-8);
	border-top: 1px solid var(--linea);
}

.nl-paginacion a,
.nl-paginacion span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 var(--esp-3);
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	font-family: var(--fuente-ui);
	font-size: var(--texto-sm);
	text-decoration: none;
	color: var(--tinta);
	transition: background var(--trans-r), color var(--trans-r), border-color var(--trans-r);
}

.nl-paginacion a:hover {
	background: var(--leon-purpura);
	color: white;
	border-color: var(--leon-purpura);
}

.nl-paginacion .current {
	background: var(--leon-purpura);
	color: white;
	border-color: var(--leon-purpura);
}