/**
 * Páginas legales públicas — WhatsPedidos Tiendas.
 *
 * 22.9.301 — BYPASS DEL TEMA + SELECTORES A PRUEBA DE TEMAS.
 * 22.9.300 — Ancho completo, sin barra de WordPress, responsivo limpio.
 *
 * Las páginas legales se sirven con `legal-blank.php` (plantilla mínima
 * propia) que BYPASSA el tema. Aquí NO tenemos que preocuparnos por la
 * cabecera ni el pie del tema, pero SÍ por los selectores típicos que los
 * temas usan para `h1`, `p`, etc.: `.entry-content h1`, `.page-content h1`,
 * `main h1`, etc., que con especificidad (0,1,1) ganan a un simple
 * `.wpt-legal__title` (0,1,0). Por eso las reglas del título y la meta
 * usan selectores compuestos del tipo
 * `body.wpt-legal-page .entry-content .wpt-legal__title`, con
 * especificidad (0,3,0) o mayor.
 *
 * El módulo se renderiza dentro de `.entry-content` (que es como la mayoría
 * de los temas pintan el contenido), así que los selectores espejan esa
 * estructura. Funciona aunque el tema use `.page-content`, `main`,
 * `.wp-site-content` o `.content-area`: el selector a tres niveles siempre
 * gana a (0,0,1) o (0,1,1) del tema.
 */

.wpt-legal {
	--wpt-legal-ink: #10182b;
	--wpt-legal-soft: #5b6779;
	--wpt-legal-faint: #8a95a6;
	--wpt-legal-line: #e4e8ee;
	--wpt-legal-surface: #ffffff;
	--wpt-legal-surface-2: #f7f9fc;
	--wpt-legal-primary: #16a34a;
	--wpt-legal-primary-dark: #15803d;
	--wpt-legal-radius: 16px;
	--wpt-legal-measure: 72ch;

	/*
	 * 22.9.301 — Con la plantilla en blanco (`legal-blank.php`) ya no hace
	 * falta romper el `content-width` del tema: el `<body>` está limpio y
	 * `.wpt-legal` puede ocupar el ancho disponible directamente. Para
	 * mantener la compatibilidad si el módulo se renderizara dentro de una
	 * página de tema (que ya no debería pasar con el bypass), se conserva
	 * la técnica del margen negativo en pantallas grandes.
	 */
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px 56px;
	color: var(--wpt-legal-ink);
	font-size: 16px;
	line-height: 1.72;
	box-sizing: border-box;
}

/*
 * ⚠️ Ocultar la barra de admin de WordPress en páginas legales.
 *
 * 22.9.301 — En la plantilla `legal-blank.php` ya está oculta, pero
 * mantenemos la regla por si el módulo se renderiza con el tema por algún
 * motivo (caché, plugin que neutralice el bypass). Defensa en profundidad.
 */
body.wpt-legal-page #wpadminbar,
body.wpt-legal-page.admin-bar #wpadminbar {
	display: none !important;
}

html.wp-toolbar.wpt-legal-page {
	margin-top: 0 !important;
}

/*
 * Si el módulo se renderiza dentro del tema (no debería pasar), rompe el
 * área de contenido con la técnica de margen negativo para que la política
 * ocupe todo el ancho disponible.
 */
@media (min-width: 1025px) {
	body.wpt-legal-page .wpt-legal {
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
		padding-left: max(24px, calc((100vw - 1280px) / 2 + 24px));
		padding-right: max(24px, calc((100vw - 1280px) / 2 + 24px));
	}
}

/* ------------------------------------------------------------------ cabecera */
/*
 * 22.9.301 — Los selectores usan la combinación `body.wpt-legal-page
 * .entry-content .wpt-legal__head` (y similares) para tener especificidad
 * (0,3,0), que gana a las reglas típicas del tema
 * `.entry-content h1 { font-size: 60px }` (0,2,1). De esta forma el módulo
 * se ve igual en cualquier tema.
 */
body.wpt-legal-page .wpt-legal .wpt-legal__head {
	padding: 32px 0 26px;
	border-bottom: 1px solid var(--wpt-legal-line);
	margin-bottom: 30px;
}

body.wpt-legal-page .wpt-legal__breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--wpt-legal-faint);
	margin-bottom: 14px;
}

body.wpt-legal-page .wpt-legal__breadcrumb a {
	color: var(--wpt-legal-soft);
	text-decoration: none;
}

body.wpt-legal-page .wpt-legal__breadcrumb a:hover {
	color: var(--wpt-legal-primary-dark);
	text-decoration: underline;
}

/*
 * El TÍTULO es lo que más sufria en 22.9.300: muchos temas pintan el
 * `h1` del contenido a 60-72 px y el `font-size: clamp(28px,3.8vw,42px)`
 * del módulo quedaba anulado. Con este selector a 4 niveles ya no.
 */
body.wpt-legal-page .wpt-legal__title,
body.wpt-legal-page .entry-content .wpt-legal__title,
body.wpt-legal-page .page-content .wpt-legal__title,
body.wpt-legal-page main .wpt-legal__title,
body.wpt-legal-page .wp-site-content .wpt-legal__title {
	margin: 0 0 10px;
	font-size: clamp(28px, 3.8vw, 42px);
	line-height: 1.16;
	letter-spacing: -.025em;
	font-weight: 800;
	color: var(--wpt-legal-ink);
}

body.wpt-legal-page .wpt-legal__subtitle,
body.wpt-legal-page .entry-content .wpt-legal__subtitle {
	margin: 0 0 14px;
	font-size: 18px;
	color: var(--wpt-legal-soft);
	max-width: 68ch;
}

body.wpt-legal-page .wpt-legal__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	font-size: 12.5px;
	color: var(--wpt-legal-faint);
}

body.wpt-legal-page .wpt-legal__meta span {
	position: relative;
	padding-left: 14px;
}

body.wpt-legal-page .wpt-legal__meta span::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #cbd5e1;
}

/* -------------------------------------------------------- rejilla con índice */
body.wpt-legal-page .wpt-legal__layout {
	display: grid;
	/* En escritorio: índice fijo 280 px y artículo ocupando lo que SOBRE.
	   El artículo se ensancha de verdad: en 1280 px el contenido usable
	   es ~960 px, frente a los 720 px (68ch) de antes. */
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

/* --------------------------------------------------------------------- índice */
body.wpt-legal-page .wpt-legal__toc {
	position: sticky;
	top: 24px;
	padding: 20px 20px 18px;
	border: 1px solid var(--wpt-legal-line);
	border-radius: var(--wpt-legal-radius);
	background: var(--wpt-legal-surface-2);
	max-height: calc(100vh - 48px);
	overflow: auto;
}

body.wpt-legal-page .wpt-legal__toc-title {
	margin: 0 0 10px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wpt-legal-faint);
}

body.wpt-legal-page .wpt-legal__toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
}

body.wpt-legal-page .wpt-legal__toc-item {
	margin: 0 0 2px;
}

body.wpt-legal-page .wpt-legal__toc-item a {
	display: block;
	padding: 6px 10px;
	border-radius: 8px;
	color: var(--wpt-legal-soft);
	text-decoration: none;
	line-height: 1.4;
}

body.wpt-legal-page .wpt-legal__toc-item a:hover {
	background: #fff;
	color: var(--wpt-legal-primary-dark);
}

body.wpt-legal-page .wpt-legal__toc-item.is-level-3 a {
	padding-left: 22px;
	font-size: 12.5px;
	color: var(--wpt-legal-faint);
}

/* ------------------------------------------------------------------ artículo */
body.wpt-legal-page .wpt-legal__doc {
	max-width: var(--wpt-legal-measure);
	min-width: 0;
}

body.wpt-legal-page .wpt-legal__doc > *:first-child {
	margin-top: 0;
}

body.wpt-legal-page .wpt-legal__doc p,
body.wpt-legal-page .wpt-legal__doc li {
	font-size: 16.5px;
	color: #2b3547;
}

body.wpt-legal-page .wpt-legal__doc p {
	margin: 0 0 16px;
}

body.wpt-legal-page .wpt-legal__doc .wpt-legal-intro {
	font-size: 18px;
	line-height: 1.68;
	color: var(--wpt-legal-ink);
	padding: 18px 22px;
	border-left: 3px solid var(--wpt-legal-primary);
	background: #f6fbf8;
	border-radius: 0 12px 12px 0;
	margin-bottom: 28px;
}

body.wpt-legal-page .wpt-legal__doc h2,
body.wpt-legal-page .entry-content .wpt-legal__doc h2,
body.wpt-legal-page main .wpt-legal__doc h2 {
	margin: 42px 0 14px;
	font-size: clamp(22px, 2.5vw, 26px);
	line-height: 1.26;
	letter-spacing: -.015em;
	font-weight: 800;
	color: var(--wpt-legal-ink);
	scroll-margin-top: 96px;
}

body.wpt-legal-page .wpt-legal__doc h3,
body.wpt-legal-page .entry-content .wpt-legal__doc h3,
body.wpt-legal-page main .wpt-legal__doc h3 {
	margin: 28px 0 10px;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--wpt-legal-ink);
	scroll-margin-top: 96px;
}

body.wpt-legal-page .wpt-legal__doc h2 + h3 {
	margin-top: 16px;
}

body.wpt-legal-page .wpt-legal__doc ul,
body.wpt-legal-page .wpt-legal__doc ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

body.wpt-legal-page .wpt-legal__doc li {
	margin: 6px 0;
}

body.wpt-legal-page .wpt-legal__doc li::marker {
	color: var(--wpt-legal-primary);
}

body.wpt-legal-page .wpt-legal__doc strong {
	font-weight: 700;
	color: var(--wpt-legal-ink);
}

body.wpt-legal-page .wpt-legal__doc a {
	color: var(--wpt-legal-primary-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.wpt-legal-page .wpt-legal__doc a:hover {
	color: #0f6b34;
}

body.wpt-legal-page .wpt-legal__doc blockquote {
	margin: 22px 0;
	padding: 14px 18px;
	border-left: 3px solid #cbd5e1;
	background: var(--wpt-legal-surface-2);
	border-radius: 0 10px 10px 0;
	color: var(--wpt-legal-soft);
}

body.wpt-legal-page .wpt-legal__doc table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0 24px;
	font-size: 14.5px;
	background: var(--wpt-legal-surface);
	border: 1px solid var(--wpt-legal-line);
	border-radius: 12px;
	overflow: hidden;
}

body.wpt-legal-page .wpt-legal__doc thead th {
	background: var(--wpt-legal-surface-2);
	text-align: left;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wpt-legal-faint);
	padding: 11px 14px;
	border-bottom: 1px solid var(--wpt-legal-line);
}

body.wpt-legal-page .wpt-legal__doc tbody td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--wpt-legal-line);
	vertical-align: top;
}

body.wpt-legal-page .wpt-legal__doc tbody tr:last-child td {
	border-bottom: 0;
}

body.wpt-legal-page .wpt-legal__doc hr {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--wpt-legal-line);
}

/* Hueco de un dato sin configurar: se VE, no se inventa. */
body.wpt-legal-page .wpt-legal-gap {
	display: inline-block;
	padding: 0 6px;
	border-radius: 5px;
	background: #fef3c7;
	color: #92400e;
	font-size: .92em;
	font-weight: 600;
	border: 1px dashed #f59e0b;
}

/* -------------------------------------------------------------- otras políticas */
body.wpt-legal-page .wpt-legal__related {
	margin-top: 48px;
	padding: 24px;
	border: 1px solid var(--wpt-legal-line);
	border-radius: var(--wpt-legal-radius);
	background: var(--wpt-legal-surface-2);
}

body.wpt-legal-page .wpt-legal__related-title {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wpt-legal-faint);
}

body.wpt-legal-page .wpt-legal__related ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.wpt-legal-page .wpt-legal__related a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--wpt-legal-line);
	background: var(--wpt-legal-surface);
	font-size: 13.5px;
	color: var(--wpt-legal-soft);
	text-decoration: none;
}

body.wpt-legal-page .wpt-legal__related a:hover {
	border-color: var(--wpt-legal-primary);
	color: var(--wpt-legal-primary-dark);
	background: #f6fbf8;
}

/* -------------------------------------------------------------------- pie */
body.wpt-legal-page .wpt-legal__foot {
	margin-top: 36px;
	padding: 22px 24px;
	border: 1px solid var(--wpt-legal-line);
	border-radius: var(--wpt-legal-radius);
	background: var(--wpt-legal-surface-2);
	font-size: 13px;
	color: var(--wpt-legal-soft);
}

body.wpt-legal-page .wpt-legal__foot-name {
	margin: 0 0 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	color: var(--wpt-legal-ink);
}

body.wpt-legal-page .wpt-legal__foot-links {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

body.wpt-legal-page .wpt-legal__foot-links a {
	color: var(--wpt-legal-primary-dark);
	text-decoration: none;
}

body.wpt-legal-page .wpt-legal__foot-links a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- responsive */

/* Tablet horizontal / pantallas medianas: el índice pasa a una rejilla
   horizontal de 2-3 columnas, ARRIBA del artículo. La página ocupa todo
   el ancho. */
@media (max-width: 1024px) {
	body.wpt-legal-page .wpt-legal {
		padding: 0 20px 48px;
	}

	body.wpt-legal-page .wpt-legal__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	body.wpt-legal-page .wpt-legal__toc {
		position: static;
		max-height: none;
		order: -1;
		padding: 18px 18px 14px;
	}

	body.wpt-legal-page .wpt-legal__toc-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 0 10px;
	}

	body.wpt-legal-page .wpt-legal__toc-item a {
		padding: 8px 12px;
	}

	body.wpt-legal-page .wpt-legal__doc {
		max-width: 100%;
	}
}

/* Tablet vertical: tipografía y aire un punto más pequeños. */
@media (max-width: 768px) {
	body.wpt-legal-page .wpt-legal {
		font-size: 15.5px;
		padding: 0 18px 40px;
	}

	body.wpt-legal-page .wpt-legal__head {
		padding-top: 24px;
		padding-bottom: 22px;
		margin-bottom: 22px;
	}

	body.wpt-legal-page .wpt-legal__title {
		font-size: 28px;
	}

	body.wpt-legal-page .wpt-legal__subtitle {
		font-size: 16px;
	}

	body.wpt-legal-page .wpt-legal__doc p,
	body.wpt-legal-page .wpt-legal__doc li {
		font-size: 15.5px;
	}

	body.wpt-legal-page .wpt-legal__doc h2 {
		font-size: 22px;
		margin-top: 34px;
	}

	body.wpt-legal-page .wpt-legal__doc h3 {
		font-size: 17px;
	}

	body.wpt-legal-page .wpt-legal__toc-list {
		grid-template-columns: 1fr 1fr;
	}
}

/* Móvil: una sola columna para el índice, padding mínimo, tipografía aún
   más compacta. El artículo ocupa todo el ancho sin medida (68ch queda
   muy estrecho en una pantalla de 360 px). */
@media (max-width: 540px) {
	body.wpt-legal-page .wpt-legal {
		font-size: 15px;
		padding: 0 16px 32px;
	}

	body.wpt-legal-page .wpt-legal__head {
		padding-top: 20px;
	}

	body.wpt-legal-page .wpt-legal__title {
		font-size: 24px;
		letter-spacing: -.02em;
	}

	body.wpt-legal-page .wpt-legal__subtitle {
		font-size: 15.5px;
	}

	body.wpt-legal-page .wpt-legal__doc p,
	body.wpt-legal-page .wpt-legal__doc li {
		font-size: 15px;
	}

	body.wpt-legal-page .wpt-legal__doc .wpt-legal-intro {
		padding: 14px 16px;
		font-size: 16.5px;
	}

	body.wpt-legal-page .wpt-legal__doc h2 {
		font-size: 20px;
		margin-top: 28px;
	}

	body.wpt-legal-page .wpt-legal__doc h3 {
		font-size: 16px;
	}

	body.wpt-legal-page .wpt-legal__doc table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	body.wpt-legal-page .wpt-legal__doc thead th,
	body.wpt-legal-page .wpt-legal__doc tbody td {
		padding: 9px 11px;
	}

	body.wpt-legal-page .wpt-legal__related,
	body.wpt-legal-page .wpt-legal__foot {
		padding: 16px 18px;
	}

	body.wpt-legal-page .wpt-legal__toc-list {
		grid-template-columns: 1fr;
	}

	body.wpt-legal-page .wpt-legal__toc-item a {
		padding: 8px 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.wpt-legal-page .wpt-legal * {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}