/* ==========================================================================
   pages-legal.css — Documentos legales (Términos, Privacidad, Cookies)
   --------------------------------------------------------------------------
   Capa de presentación de terminos.php, privacidad.php y cookies.php.

   Son tres documentos de texto largo: la prioridad es la LECTURA. Medida de
   línea corta (.container--narrow = 720px), interlineado amplio, jerarquía de
   secciones clara y un índice navegable arriba.

   Reutiliza lo ya portado en theme.css (page-default, page-header,
   page-content, atelier-prose, container--narrow, marandre-breadcrumbs,
   artisan-chip, btn-primary, btn-tertiary, info-item, ...) y shop.css
   (shop-table). Aquí solo va lo que esas hojas no cubren.

   Reglas de la casa:
   - Ningún color literal de marca: todo sale de los tokens de brand_css_vars().
   - Nada de lógica: aquí no se define comportamiento, solo estilo.
   - Debe enlazarse DESPUÉS de theme.css y shop.css, y ANTES de custom.css.
   ========================================================================== */

/* ==========================================================================
   1) LIENZO DEL DOCUMENTO
   ========================================================================== */

/* .page-legal es un modificador de .page-default: hereda de él el padding
   vertical del lienzo. El despeje del header fijo ya lo aporta el espaciador
   que imprime includes/header.php ($header_spacer), así que aquí NO se vuelve
   a sumar var(--header-height): se duplicaría el hueco superior. */

.page-legal {
	background: var(--color-background);
}

/* El documento va plano sobre el fondo, sin tarjeta: es una pieza editorial,
   no un panel de aplicación. Las superficies quedan reservadas para el índice,
   los avisos y los bloques de datos. */
.legal-doc {
	max-width: 100%;
}

/* Salto de ancla por debajo del header fijo. Se aplica a cualquier destino
   del índice para que el título quede visible al saltar. */
.legal-section,
.legal-doc [id] {
	scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

/* ==========================================================================
   2) CABECERA EDITORIAL
   ========================================================================== */

.legal-doc__header {
	border-bottom: 1px solid var(--color-outline-variant);
}

/* Ambas reglas van acotadas a .legal-doc__header: theme.css define
   `.page-header p` (0,1,1) y una clase suelta (0,1,0) no le ganaría. */

.legal-doc__header .legal-doc__brand {
	margin-bottom: var(--space-5);
}

.legal-doc__header .legal-doc__meta {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-on-surface-faint);
}

/* ==========================================================================
   3) ÍNDICE
   ========================================================================== */

.legal-toc {
	margin-bottom: var(--space-16);
	padding: var(--space-8);
	background: var(--color-surface-low);
	border-radius: var(--radius-lg);
}

.legal-toc__title {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-on-surface-faint);
	margin-bottom: var(--space-5);
}

/* Dos columnas en pantallas anchas: el índice completo entra sin hacer
   scroll. `break-inside` evita que un ítem largo se parta entre columnas. */
.legal-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: var(--space-8);
}

.legal-toc__list li {
	break-inside: avoid;
	margin-bottom: var(--space-3);
}

.legal-toc__list a {
	display: flex;
	gap: var(--space-3);
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-on-surface-muted);
	text-decoration: none;
	transition: color var(--transition);
}

.legal-toc__list a:hover,
.legal-toc__list a:focus-visible {
	color: var(--color-secondary);
}

.legal-toc__num {
	flex: 0 0 auto;
	min-width: 1.4em;
	font-family: var(--font-display);
	color: var(--color-on-surface-faint);
}

/* ==========================================================================
   4) SECCIONES Y JERARQUÍA
   ========================================================================== */

.legal-section + .legal-section {
	margin-top: var(--space-16);
}

.legal-section__title {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	line-height: 1.25;
	color: var(--color-on-surface);
	margin-bottom: var(--space-6);
}

.legal-section__num {
	flex: 0 0 auto;
	font-size: var(--text-lg);
	color: var(--color-primary);
}

/* Acción destacada al cierre de una sección (por ejemplo, abrir el panel de
   preferencias de cookies). */
.legal-section__cta {
	display: flex;
	justify-content: center;
	margin-top: var(--space-8);
}

/* Subtítulo dentro de una sección (nivel 3). */
.legal-section__subtitle {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-secondary);
	margin-top: var(--space-10);
	margin-bottom: var(--space-4);
}

/* Enlaces dentro del cuerpo del documento. Los botones del documento son
   elementos <button>, así que esta regla no los alcanza. */
.legal-section a {
	color: var(--color-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--transition);
}

.legal-section a:hover,
.legal-section a:focus-visible {
	color: var(--color-primary);
}

/* Botón que vive dentro de una frase (abrir el panel de cookies). Tiene que
   leerse como un enlace y no romper el ritmo de la línea, así que no usa
   .btn-tertiary, que aporta padding vertical propio. */
.legal-inline-action {
	display: inline;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	color: var(--color-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	cursor: pointer;
	transition: color var(--transition);
}

.legal-inline-action:hover,
.legal-inline-action:focus-visible {
	color: var(--color-primary);
}

/* ==========================================================================
   5) LISTAS
   ========================================================================== */

.legal-list {
	list-style: disc outside;
	margin: 0 0 var(--space-6);
	padding-left: var(--space-6);
}

.legal-list li {
	margin-bottom: var(--space-3);
	line-height: 1.8;
}

.legal-list li:last-child {
	margin-bottom: 0;
}

.legal-list strong {
	color: var(--color-on-surface);
	font-weight: 600;
}

/* ==========================================================================
   6) PANELES DE DATOS (identidad, contacto)
   ========================================================================== */

.legal-panel {
	padding: var(--space-6);
	background: var(--color-surface-low);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-6);
}

.legal-panel:last-child {
	margin-bottom: 0;
}

/* Ficha de identidad: etiqueta arriba, valor abajo. En pantallas anchas pasa
   a dos columnas para acortar la altura del bloque. */
.legal-identity {
	display: grid;
	gap: var(--space-5);
	margin: 0;
}

.legal-identity dt {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-on-surface-faint);
	margin-bottom: var(--space-1);
}

.legal-identity dd {
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-on-surface);
}

/* Lista de vías de contacto con icono. */
.legal-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-5);
}

.legal-contact li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}

.legal-contact i {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--color-primary);
}

.legal-contact__label {
	display: block;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-on-surface-faint);
	margin-bottom: var(--space-1);
}

.legal-contact__value {
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--color-on-surface);
	overflow-wrap: anywhere;
}

/* ==========================================================================
   7) AVISOS DESTACADOS
   --------------------------------------------------------------------------
   Variante de .shop-notice--* pensada para texto largo: el icono se alinea
   arriba (no al centro) y el bloque admite varios párrafos.
   ========================================================================== */

.legal-callout {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	margin: var(--space-6) 0;
	background: var(--color-surface-low);
	border-left: 3px solid var(--color-outline);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	font-size: var(--text-base);
	line-height: 1.7;
}

.legal-callout:last-child {
	margin-bottom: 0;
}

.legal-callout i {
	flex: 0 0 auto;
	margin-top: 4px;
}

.legal-callout--info {
	border-left-color: var(--color-primary);
}

.legal-callout--info i {
	color: var(--color-primary);
}

.legal-callout--warning {
	border-left-color: var(--color-warning);
	background: var(--color-warning-container);
	color: var(--color-warning);
}

.legal-callout--warning i {
	color: var(--color-warning);
}

.legal-callout strong {
	color: inherit;
	font-weight: 700;
}

/* El aviso vive dentro de .atelier-prose, que da margen inferior a cada
   párrafo. Dentro de la caja ese margen sobra. */
.legal-callout p {
	margin-bottom: var(--space-3);
}

.legal-callout p:last-child {
	margin-bottom: 0;
}

.legal-callout__title {
	display: block;
	font-weight: 700;
	margin-bottom: var(--space-2);
}

/* ==========================================================================
   8) TABLAS
   --------------------------------------------------------------------------
   La medida del documento es de 720px y algunas tablas tienen cinco columnas:
   el envoltorio permite desplazamiento horizontal en móvil en lugar de
   comprimir el texto hasta hacerlo ilegible.
   ========================================================================== */

.legal-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--space-6);
}

.legal-table {
	min-width: 520px;
	font-size: var(--text-sm);
	line-height: 1.6;
}

.legal-table td {
	color: var(--color-on-surface-muted);
	vertical-align: top;
}

.legal-table__key {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: var(--text-xs);
	color: var(--color-on-surface);
	white-space: nowrap;
}

.legal-table__term {
	color: var(--color-on-surface);
	font-weight: 600;
}

/* ==========================================================================
   9) MOSAICOS (tipos de cookie, derechos del titular)
   ========================================================================== */

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

.legal-tile {
	padding: var(--space-5);
	background: var(--color-surface-low);
	border-radius: var(--radius-lg);
}

.legal-tile__title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-on-surface);
	margin-bottom: var(--space-2);
}

.legal-tile__title i {
	color: var(--color-primary);
}

.legal-tile__text {
	font-size: var(--text-sm);
	line-height: 1.7;
	color: var(--color-on-surface-muted);
}

/* ==========================================================================
   10) PASOS NUMERADOS
   ========================================================================== */

.legal-steps {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
	display: grid;
	gap: var(--space-5);
	counter-reset: legal-step;
}

.legal-steps li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	line-height: 1.8;
}

.legal-steps li::before {
	counter-increment: legal-step;
	content: counter(legal-step);
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 700;
	line-height: 1;
}

/* ==========================================================================
   11) ACCIONES Y PIE DEL DOCUMENTO
   ========================================================================== */

.legal-doc__actions {
	display: flex;
	justify-content: center;
	padding-top: var(--space-10);
	border-top: 1px solid var(--color-outline-variant);
}

.legal-doc__footer {
	margin-top: var(--space-10);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-outline-variant);
	text-align: center;
	font-size: var(--text-xs);
	line-height: 1.7;
	color: var(--color-on-surface-faint);
}

.legal-doc__footer p {
	margin-bottom: var(--space-1);
}

.legal-doc__footer p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   12) RESPONSIVE
   ========================================================================== */

@media (min-width: 768px) {
	.legal-identity {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-6);
	}

	.legal-panel {
		padding: var(--space-8);
	}
}

@media (max-width: 767px) {
	/* Una sola columna: en móvil el índice a dos columnas deja líneas de dos
	   o tres palabras. */
	.legal-toc__list {
		columns: 1;
	}

	.legal-toc {
		padding: var(--space-6);
	}

	.legal-section__title {
		font-size: var(--text-lg);
		gap: var(--space-3);
	}

	.legal-section__num {
		font-size: var(--text-base);
	}

	.legal-callout {
		padding: var(--space-4) var(--space-5);
	}
}

/* ==========================================================================
   13) IMPRESIÓN
   --------------------------------------------------------------------------
   El documento debe poder guardarse en PDF. Se ocultan las piezas de
   navegación e interacción y se aplana el color de fondo.
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.announcement-bar,
	.marandre-breadcrumbs,
	.legal-toc,
	.legal-doc__actions,
	#oc-prefs-panel,
	#toast-container,
	.cart-drawer,
	.mobile-menu,
	.skip-link {
		display: none !important;
	}

	/* Fondo blanco en papel: el crema de la marca solo gastaría tinta. No es
	   un color de marca, es el blanco del soporte. */
	.page-legal {
		padding: 0 !important;
		background: white !important;
	}

	.page-legal .container {
		max-width: 100% !important;
		padding-inline: 0 !important;
	}

	.legal-panel,
	.legal-tile,
	.legal-callout,
	.legal-toc {
		background: transparent !important;
		border: 1px solid var(--color-outline) !important;
		border-radius: 0 !important;
	}

	.legal-section {
		break-inside: avoid-page;
	}

	.legal-section__title,
	.legal-section__subtitle {
		break-after: avoid-page;
	}

	.legal-table-wrap {
		overflow: visible !important;
	}

	.legal-table {
		min-width: 0 !important;
	}
}