/**
 * Páginas: listados, guías y páginas de autoridad.
 */

.lz-page {
	padding-block: var(--lz-space-6) var(--lz-space-8);
}

/* ---- Migas ---- */

.lz-breadcrumb {
	margin-bottom: var(--lz-space-5);
	font-size: var(--lz-text-xs);
}

.lz-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lz-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lz-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--lz-space-2);
	color: var(--lz-muted);
}

.lz-breadcrumb__item a { color: var(--lz-muted); }
.lz-breadcrumb__item a:hover { color: var(--lz-accent); }

.lz-breadcrumb__item [aria-current="page"] {
	color: var(--lz-heading);
	font-weight: 600;
}

.lz-breadcrumb__sep {
	color: var(--lz-faint);
	flex-shrink: 0;
}

/* ---- Cabecera ---- */

.lz-page__head {
	margin-bottom: var(--lz-space-6);
}

.lz-page__title {
	margin: 0 0 var(--lz-space-3);
}

.lz-page__lede {
	font-size: var(--lz-text-md);
	color: var(--lz-muted);
	margin: 0 0 var(--lz-space-3);
}

.lz-page__meta {
	display: flex;
	align-items: center;
	gap: var(--lz-space-2);
	font-size: var(--lz-text-xs);
	color: var(--lz-faint);
	margin: 0;
}

/* ---- Navegación entre guías hermanas ---- */

.lz-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lz-space-2);
	margin-bottom: var(--lz-space-6);
	padding-bottom: var(--lz-space-4);
	border-bottom: 1px solid var(--lz-line);
}

.lz-subnav__item {
	padding: var(--lz-space-2) var(--lz-space-4);
	font-size: var(--lz-text-sm);
	color: var(--lz-ink);
	background: var(--lz-surface-sunken);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-sm);
	transition: border-color var(--lz-duration) var(--lz-ease),
	            color var(--lz-duration) var(--lz-ease);
}

.lz-subnav__item:hover {
	color: var(--lz-heading);
	border-color: var(--lz-accent);
}

/* La página actual se marca para que el usuario sepa dónde está. */
.lz-subnav__item.is-active {
	color: var(--lz-on-brand);
	background: var(--lz-brand);
	border-color: var(--lz-brand);
}

/* La tabla de ranking y la rejilla de bonos usan todo el ancho: una
   tabla de cinco columnas dentro de la medida de lectura se comprime
   hasta que los botones dejan de caber. */
.lz-page__body .lz-rank,
.lz-page__body .lz-bonos {
	max-width: none;
	width: 100%;
}

.lz-page__body .lz-rank {
	margin-block: var(--lz-space-6);
	border-radius: var(--lz-radius-md);
}

/* El acordeón cierra la tabla, así que su esquina inferior acompaña. */
.lz-page__body .lz-rank__expand {
	border-radius: 0 0 var(--lz-radius-md) var(--lz-radius-md);
}

.lz-page__body .lz-rank__titulo {
	font-size: var(--lz-text-xl);
	margin-top: var(--lz-space-7);
	margin-bottom: var(--lz-space-4);
}

/* Dos tablas seguidas necesitan aire entre ellas; la primera no arrastra
   el margen superior porque ya lo pone la cabecera de la página. */
.lz-page__body > .lz-rank__titulo:first-child {
	margin-top: 0;
}

.lz-page__body .lz-bonos {
	margin-block: var(--lz-space-6);
}

.lz-page__body .lz-opcard {
	margin-block: var(--lz-space-4);
}

/* ---- Paginación interna ---- */

.lz-pagelinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lz-space-3);
	margin-top: var(--lz-space-6);
	padding-top: var(--lz-space-4);
	border-top: 1px solid var(--lz-line);
	font-size: var(--lz-text-sm);
	color: var(--lz-muted);
}

@media (min-width: 992px) {
	/* Con ranking a ancho completo el texto sigue en columna estrecha
	   por legibilidad, pero la página respira más. */
	.lz-page { padding-block: var(--lz-space-7) var(--lz-space-9); }
}

@media (max-width: 767px) {
	.lz-page__title { font-size: var(--lz-text-xl); }

	.lz-subnav {
		/* Deslizamiento horizontal: con seis guías, apilarlas empujaría
		   el contenido fuera de la primera pantalla. */
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.lz-subnav::-webkit-scrollbar { display: none; }

	.lz-subnav__item { white-space: nowrap; flex-shrink: 0; }
}

/* ============================================================
   Entradas del blog
   ============================================================ */

.lz-article__meta {
	display: flex;
	align-items: center;
	gap: var(--lz-space-3);
	margin-top: var(--lz-space-4);
}

.lz-article__avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.lz-article__author {
	font-size: var(--lz-text-sm);
	color: var(--lz-ink);
	margin: 0 0 2px;
}

.lz-article__cover {
	margin: 0 0 var(--lz-space-6);
	border-radius: var(--lz-radius-md);
	overflow: hidden;
}

.lz-article__cover img {
	width: 100%;
	height: auto;
	display: block;
}

.lz-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lz-space-2);
	margin-top: var(--lz-space-6);
	padding-top: var(--lz-space-4);
	border-top: 1px solid var(--lz-line);
}

.lz-tag {
	padding: 4px var(--lz-space-3);
	font-size: var(--lz-text-xs);
	color: var(--lz-muted);
	background: var(--lz-surface-sunken);
	border-radius: var(--lz-radius-sm);
}

.lz-tag:hover { color: var(--lz-accent); }

/* ---- Siguiente lectura ---- */

.lz-related {
	margin-top: var(--lz-space-8);
	padding-top: var(--lz-space-6);
	border-top: 1px solid var(--lz-line);
}

.lz-related__title {
	font-size: var(--lz-text-lg);
	margin-bottom: var(--lz-space-4);
}

.lz-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--lz-space-4);
}

.lz-related__item {
	padding: var(--lz-space-4);
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-sm);
}

.lz-related__item h3 {
	font-size: var(--lz-text-base);
	margin: 0 0 var(--lz-space-2);
}

.lz-related__item time {
	font-size: var(--lz-text-xs);
	color: var(--lz-faint);
}

/* ---- Marca de verificación ----
   Acompaña a la fecha de actualización sin competir con ella: son dos
   señales distintas y la de verificación es la secundaria. */

.lz-verificado {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px var(--lz-space-2);
	font-size: var(--lz-text-xs);
	color: var(--lz-heading);
	background: var(--lz-accent-surface);
	border: 1px solid var(--lz-accent-border);
	border-radius: var(--lz-radius-sm);
}

.lz-verificado .lz-icon {
	color: var(--lz-brand-text);
	flex-shrink: 0;
}

/* La fecha de actualización y la marca comparten línea; al no caber,
   la marca baja en lugar de comprimir el texto. */
.lz-page__meta {
	flex-wrap: wrap;
	row-gap: var(--lz-space-2);
}

/* ============================================================
   Índice de Rank Math
   ============================================================
   El bloque de tabla de contenidos se envuelve en details/summary
   (inc/compat.php) para que se pliegue igual que el índice de las
   fichas. Su lista la genera Rank Math y no se toca. */

.wp-block-rank-math-toc-block {
	margin-block: var(--lz-space-7);
}

.lz-toc {
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
	overflow: hidden;
}

/* El título es el control: tiene que leerse como un botón. */
.lz-toc__titulo {
	display: flex;
	align-items: center;
	gap: var(--lz-space-3);
	padding: var(--lz-space-4) var(--lz-space-5);
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-base);
	color: var(--lz-heading);
	background: var(--lz-surface-sunken);
	cursor: pointer;
	list-style: none;
	transition: background-color var(--lz-duration) var(--lz-ease);
}

.lz-toc__titulo::-webkit-details-marker { display: none; }

.lz-toc__titulo:hover { background: var(--lz-surface); }

/* Plegado, el título es la caja entera: sin él, la esquina inferior
   quedaría recta contra un borde que no separa nada. */
.lz-toc:not([open]) .lz-toc__titulo {
	border-radius: var(--lz-radius-md);
}

.lz-toc__titulo:focus-visible {
	outline: 2px solid var(--lz-focus);
	outline-offset: -3px;
}

/* Cuántas secciones tiene: ayuda a decidir si merece abrirlo. */
.lz-toc__n {
	margin-inline-start: auto;
	padding: 1px var(--lz-space-2);
	font-family: var(--lz-font-body);
	font-size: var(--lz-text-xs);
	font-variant-numeric: tabular-nums;
	color: var(--lz-muted);
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-sm);
}

.lz-toc__titulo .lz-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	padding: 4px;
	color: var(--lz-accent-ink);
	background: var(--lz-accent);
	border-radius: var(--lz-radius-sm);
	transform: rotate(90deg);
	transition: transform var(--lz-duration) var(--lz-ease);
}

.lz-toc[open] .lz-toc__titulo .lz-icon {
	transform: rotate(-90deg);
}

/* ---- Lista ---- */

.lz-toc__lista {
	padding: var(--lz-space-4) var(--lz-space-5);
	border-top: 1px solid var(--lz-line);
}

.lz-toc__lista :is(ul, ol) {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Los subniveles se sangran para que se lea la jerarquía. */
.lz-toc__lista :is(ul, ol) :is(ul, ol) {
	margin-top: var(--lz-space-2);
	padding-inline-start: var(--lz-space-5);
}

.lz-toc__lista li + li { margin-top: var(--lz-space-2); }

.lz-toc__lista a {
	display: block;
	padding: 4px 0 4px var(--lz-space-3);
	font-size: var(--lz-text-sm);
	line-height: 1.4;
	color: var(--lz-ink);
	text-decoration: none;
	border-inline-start: 2px solid transparent;
	transition: color var(--lz-duration) var(--lz-ease),
	            border-color var(--lz-duration) var(--lz-ease);
}

.lz-toc__lista a:hover {
	color: var(--lz-heading);
	border-inline-start-color: var(--lz-accent);
}

/* Los subniveles, en secundario. */
.lz-toc__lista :is(ul, ol) :is(ul, ol) a {
	font-size: var(--lz-text-xs);
	color: var(--lz-muted);
}

/* Los encabezados que el índice enlaza no deben quedar bajo la
   cabecera pegajosa al saltar. */
.lz-page__body :is(h2, h3, h4)[id] {
	scroll-margin-top: calc(72px + var(--lz-space-5));
}

@media (max-width: 767px) {
	.lz-toc__titulo {
		padding: var(--lz-space-3) var(--lz-space-4);
		font-size: var(--lz-text-sm);
	}

	.lz-toc__lista { padding: var(--lz-space-3) var(--lz-space-4); }
}

@media (prefers-reduced-motion: reduce) {
	.lz-toc__titulo .lz-icon { transition: none; }
}