/* ==========================================================================
   60 · DOCUMENTO LEGAL
   --------------------------------------------------------------------------
   Se carga solo con la plantilla page-legal.php (ver p2080_ctx_legal).

   AQUÍ VA MUY POCO, y es a propósito. El texto lo viste el contrato de prosa
   de 50-blocks.css; el índice reutiliza el acordeón de 40-components.css. Lo
   único propio de esta plantilla es la rejilla de dos columnas y el
   comportamiento pegajoso del índice.

   ── LO QUE ESTE ARCHIVO PROMETÍA Y NO EXISTE ──────────────────────────────
   El placeholder de la sesión 1 anunciaba «bloques legales con borde lateral
   de color y tablas de cookies». Al medir el contenido real por SQL resultó
   que las tres páginas legales tenían CERO tablas: eran texto corrido. Es el
   mismo error de premisa que la sesión 3 encontró con los bloques de
   Gutenberg (decisión 018), y se resuelve igual: no se escribe el CSS de algo
   que no está ahí. Los textos reescritos en 2026 sí llevan tablas (resumen de
   privacidad, encargados, cookies), y las viste el contrato de prosa, como en
   cualquier artículo: aquí no hace falta nada.
   ========================================================================== */

/* ==========================================================================
   REJILLA
   ========================================================================== */

/* Hasta 1024px no hay rejilla: el índice y el documento se apilan y cada uno
   se centra con la misma medida que la columna de prosa. La fórmula del
   ancho es la de `.p2080-prose > *` en 50-blocks.css, para que los dos
   bloques queden alineados al píxel. */
.legal__toc {
	max-width: min(100% - var(--space-3) * 2, var(--w-prose));
	margin-inline: auto;
	margin-block-end: var(--space-4);
}

@media (min-width: 1024px) {
	.legal__grid {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--space-4);
		align-items: start;
		max-width: var(--w-container);
		margin-inline: auto;
		padding-inline: var(--space-4);
	}

	/* `.section` lleva `overflow: hidden` para recortar sus orbes, y eso la
	   convierte en contenedor de scroll: el `sticky` del índice se pegaba a
	   ella en lugar de a la ventana, así que nunca se quedaba fijo y además
	   aparecía desplazado. `clip` recorta igual sin crear ese contenedor. */
	.legal > .section {
		overflow: clip;
	}

	.legal__toc {
		max-width: none;
		margin-inline: 0;
		margin-block-end: 0;

		/* Se queda a la vista mientras se recorre el documento. El desplazamiento
		   ya lo compensa el `scroll-padding-top` de 10-base.css. */
		position: sticky;
		top: calc(var(--header-h) + var(--space-3));

		/* Con 14 secciones el índice cabe; con más, hace scroll él en lugar de
		   empujar la página. */
		max-height: calc(100vh - var(--header-h) - var(--space-5));
		overflow-y: auto;
	}
}

/* ==========================================================================
   ÍNDICE
   --------------------------------------------------------------------------
   El marcado es el <details>/<summary> del proyecto, así que el marco, el
   fondo y el chevron ya vienen de 40-components.css. Aquí solo la lista.
   ========================================================================== */

.legal__toc .accordion__summary {
	font-size: var(--fs-body);
}

.legal__toc-list {
	padding: 0;
	list-style: none;
}

.legal__toc-item + .legal__toc-item {
	margin-block-start: 6px;
}

/* El nivel 3 se sangra para que la jerarquía se vea, no solo se anuncie. */
.legal__toc-item--3 {
	padding-inline-start: var(--space-3);
}

.legal__toc-item a {
	display: block;
	color: var(--c-text);
	font-size: var(--fs-small);
	line-height: 1.4;
	text-decoration: none;
}

.legal__toc-item--3 a {
	color: var(--c-muted);
}

.legal__toc-item a:hover,
.legal__toc-item a:focus-visible {
	color: var(--c-accent);
	text-decoration: underline;
}

/* ==========================================================================
   DOCUMENTO
   ========================================================================== */

/* Los titulares de un texto legal son marcadores de posición, no reclamos:
   bajan un escalón respecto a los de un artículo para que el documento se lea
   como un documento y no como una sucesión de secciones que gritan. */
.legal .p2080-prose h2 {
	font-size: var(--fs-h3);
}

.legal .p2080-prose h3 {
	font-size: var(--fs-lead);
}

/* Un poco más de aire por encima de cada sección: con 14 seguidas, el salto
   entre bloques es lo único que separa una obligación legal de la siguiente. */
.legal .p2080-prose > :is(h2, h3) {
	margin-block-start: var(--space-4);
}

.legal .p2080-prose > :is(h2, h3):first-child {
	margin-block-start: 0;
}