/**
 * T-04 · Páginas legales — templates/legal-page/styles.css
 *
 * Estilos propios de las cuatro URLs legales. Handle
 * `pf_pfuture_template_legal_page`.
 *
 * Cabecera sobria y columna de lectura estrecha. No se estiliza el contenido de
 * los shortcodes de Complianz: ese HTML es suyo y puede cambiar al actualizar el
 * plugin. Cualquier ajuste sobre él va con selectores propios del plugin y bien
 * comentado.
 *
 * Bloques raíz:
 *   .pf-legal           contenedor de la plantilla
 *   .pf-legal__header   cabecera sobria
 *   .pf-legal__toc      tabla de contenidos
 *   .pf-legal__content  contenido nativo (the_content filtrado)
 *   .pf-legal__updated  fecha de última actualización
 *
 * Tokens: solo nombres canonicos de style.css seccion 1, y sin literal de respaldo
 * (issue #60). `var(--x, 3rem)` se queda con el literal siempre que el token falte,
 * que es como el andamiaje dejo de consumir la escala de verdad sin que se notara.
 *
 * @package pfuture
 */

/* Canalón --------------------------------------------------------------------
 *
 * El canalón lo da la plantilla a sus hijos directos, con el idiom de
 * `.pf-container` —style.css sección 5—. Es la convención del tema desde el #78
 * y el #84; aquí se adopta con el #90. Ver DEC-027 y DEC-028 de `portafolio`.
 *
 * Antes contenía `__inner` por su cuenta y con `--pf-space-sm`, o sea 16px de
 * canalón donde el resto del sitio pone 24. Medido en navegador a 1280, tema
 * claro forzado en cliente: el contenido caía en 56 y las plantillas ya
 * migradas caen en 64. Coherente por dentro —un solo hijo— pero 8px a la
 * izquierda de todo lo demás, que es lo que se nota al navegar de una URL a
 * otra. `__inner` conserva su relleno de bloque, que no es canalón.
 *
 * Tres cosas que no son opcionales, las tres medidas en el #78:
 *   - Va sobre el hijo directo y no sobre cada bloque, para que un componente
 *     que traiga su propio canalón no se lo sume encima.
 *   - Selector de dos clases (0,2,0), para ganar a `.pf-cta-box--section`
 *     (0,1,0) sin depender del orden de carga: los componentes encolan su hoja
 *     al pintarse, o sea DESPUÉS de esta. Hoy T-04 no pinta CTA, pero la regla
 *     se escribe igual: es la convención, no un parche para este caso.
 *   - El hero excluido, que va a sangre a propósito y pone el canalón dentro de
 *     su `__inner`. T-04 no tiene hero; se excluye por lo mismo.
 */
.pf-legal > :not(.pf-hero) {
	margin-inline: auto;
	max-width: var(--pf-container);
	padding-inline: var(--pf-gutter);
	width: 100%;
}

.pf-legal__inner {
	padding-block: var(--pf-space-xl);
}

.pf-legal__header {
	border-bottom: 1px solid var(--pf-color-border);
	margin-bottom: var(--pf-space-lg);
	padding-bottom: var(--pf-space-sm);
}

.pf-legal__title {
	margin: 0 0 var(--pf-space-2xs);
}

.pf-legal__updated {
	margin: 0;
	opacity: 0.75;
}

/*
 * Mismo caso que el medianil de contact-page: el andamiaje pedia 2.5rem y la
 * escala canonica salta de `lg` (2rem) a `xl` (3rem). Se redondea arriba para que
 * el indice sticky y la columna de lectura no se toquen a 62rem.
 */
.pf-legal__body {
	display: grid;
	gap: var(--pf-space-xl);
	grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
	.pf-legal__body {
		align-items: start;
		grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
	}

	/*
	 * Dos de las cuatro paginas legales no tienen ni un encabezado, asi que no
	 * tienen indice. Sin esta regla su unico hijo caeria en la columna del
	 * indice y el texto se leeria en 18rem con media pantalla en blanco.
	 * La clase la pone template.php, no `:has()`, para que el resultado no
	 * dependa del soporte del navegador.
	 */
	.pf-legal__body--sin-toc {
		grid-template-columns: minmax(0, 1fr);
	}

	.pf-legal__toc {
		position: sticky;
		top: var(--pf-space-lg);
	}
}

/*
 * Sin indice el texto se centra: en una columna de medida de lectura sobre un
 * contenedor ancho, alinearlo a la izquierda dejaria el mismo hueco por la
 * derecha que se acaba de evitar.
 */
.pf-legal__body--sin-toc .pf-legal__content {
	margin-inline: auto;
}

/*
 * Tabla de contenidos: solo la colocación. El aspecto del índice —lista,
 * niveles, enlace activo— lo trae common/toc/ con sus propios estilos.
 */

/* Contenido ----------------------------------------------------------------- */

.pf-legal__content {
	/* Prosa larga: tamaño y interlineado de la dirección «Expediente» (#113). */
	font-size: var(--pf-text-prose);
	line-height: var(--pf-leading-loose);
	max-width: 75ch;
	/*
	 * Issue #107. A 400px la política de cookies arrastraba el documento:
	 * `scrollWidth` 500 sobre 400. La causa es un token que no se puede
	 * partir —las URLs desnudas de ayuda de los navegadores, escritas como
	 * texto en «¿Cómo evitar las cookies?»—, y como esta columna es un item de
	 * rejilla, su mínimo automático es su min-content: 436px de token más 40 de
	 * sangrado de lista, 476 en un hueco de 352. `minmax(0, 1fr)` en la pista NO
	 * lo arregla, medido en cinco plantillas: acota la pista pero el token pinta
	 * fuera. `anywhere` y no `break-word` porque además rebaja el min-content,
	 * que es lo que deja encoger la pista. Mismo remedio que ya llevan
	 * `single-tutorial` y `search`.
	 */
	overflow-wrap: anywhere;
}

/* Defensa por si una legal llega a traer un bloque de código: sin esto el
   `anywhere` se heredaría y partiría las líneas por cualquier carácter. */
.pf-legal__content pre {
	overflow-wrap: normal;
	overflow-x: auto;
}

/* Misma defensa para las tablas, que `contenidos` midió en el #106: heredado,
   `anywhere` parte las celdas por la mitad («TY/PE»). Hoy ninguna de las cuatro
   legales trae una tabla; la regla es el idiom completo de `single-tutorial`. */
.pf-legal__content table {
	overflow-wrap: normal;
}

.pf-legal__content > * + * {
	margin-top: var(--pf-space-sm);
}

.pf-legal__content :where(h2, h3) {
	scroll-margin-top: var(--pf-space-xl);
}

.pf-legal__content table {
	border-collapse: collapse;
	width: 100%;
}

/* Lista de cookies de Complianz ----------------------------------------------
 *
 * Issue #130. Desde el #127 la política de cookies pinta la lista que genera
 * Complianz con `[cmplz-cookies]`, y el plugin ya NO encola su hoja
 * `document.min.css`: de él solo entra `document-grid.min.css`, que trae la
 * rejilla y **ningún color, borde ni fondo**. Resultado: el bloque se leía como
 * prosa suelta, el `<details>` no tenía ninguna marca de que se despliega —la
 * hoja que falta es la que pintaba el chevrón— y las cabeceras de la tabla solo
 * se distinguían de los datos por el peso de la letra.
 *
 * Todo lo de aquí vive dentro de `#cmplz-cookies-overview`, así que esta hoja
 * sigue sin tocar `/aviso-legal/`, `/politica-de-privacidad/` ni
 * `/accesibilidad/`, que no tienen ese bloque. Solo tokens del tema: ni un
 * literal de color ni un píxel suelto.
 *
 * El chevrón se pinta en `summary div::after` porque Complianz ya le reserva
 * una columna de 25 px en su rejilla (`grid-template: "heading … chevron"`) y
 * le pone `grid-area: chevron` sin darle `content`. Es CSS puro —dos bordes y
 * un giro—, no una imagen: la del plugin venía en la hoja que ya no se carga.
 *
 * Sin `!important`: `document-grid.min.css` no declara ninguna de estas
 * propiedades sobre estos elementos, así que no hay nada que vencer. El anillo
 * de foco tampoco se declara aquí: `style.css` ya incluye `summary` en su
 * `:where(...):focus-visible`.
 */
#cmplz-cookies-overview .cmplz-dropdown {
	background: var(--pf-color-surface);
	border: 1px solid var(--pf-color-border);
	border-radius: var(--pf-radius-sm);
	margin-top: var(--pf-space-sm);
}

#cmplz-cookies-overview .cmplz-dropdown summary {
	padding: var(--pf-space-xs) var(--pf-space-sm);
}

#cmplz-cookies-overview .cmplz-dropdown summary h3 {
	color: var(--pf-color-heading);
	margin: 0;
}

#cmplz-cookies-overview .cmplz-dropdown summary div::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	height: 0.5rem;
	justify-self: end;
	rotate: 45deg;
	transition: rotate 150ms ease;
	width: 0.5rem;
}

#cmplz-cookies-overview .cmplz-dropdown[open] summary div::after {
	rotate: 225deg;
}

#cmplz-cookies-overview .cmplz-dropdown .cmplz-service-description,
#cmplz-cookies-overview .cmplz-dropdown .cmplz-sharing-data {
	padding: 0 var(--pf-space-sm) var(--pf-space-xs);
}

#cmplz-cookies-overview .cookies-per-purpose {
	border-top: 1px solid var(--pf-color-border);
	gap: 1px;
	padding: var(--pf-space-xs) var(--pf-space-sm) var(--pf-space-sm);
}

#cmplz-cookies-overview .cookies-per-purpose .purpose h4 {
	color: var(--pf-color-heading);
	margin: 0 0 var(--pf-space-2xs);
}

#cmplz-cookies-overview .name-header,
#cmplz-cookies-overview .retention-header,
#cmplz-cookies-overview .function-header {
	background: var(--pf-color-bg-alt);
	color: var(--pf-color-text);
	padding: var(--pf-space-2xs) var(--pf-space-xs);
}

#cmplz-cookies-overview .name-header h5,
#cmplz-cookies-overview .retention-header h5,
#cmplz-cookies-overview .function-header h5 {
	color: var(--pf-color-text);
	margin: 0;
}

#cmplz-cookies-overview .name,
#cmplz-cookies-overview .retention,
#cmplz-cookies-overview .function {
	border-bottom: 1px solid var(--pf-color-border);
	color: var(--pf-color-text);
	padding: var(--pf-space-2xs) var(--pf-space-xs);
}