/* ==========================================================================
   La Vanguardia · Menú principal de navegación (dialog editorial por intención)
   Del handoff `design/handoff-menu`. Prefijo .lvm / --lvm-*
   --------------------------------------------------------------------------
   Ajustes de integración respecto al handoff:
     - TEMA unificado al sistema del proyecto: [data-lvm-theme] → [data-theme]
       (lo gobierna /js/theme.js, no el JS del menú).
     - Cabecera de columna: .lvm__colhead h3 → .lvm__colname (en el menú no hay
       headings, para no contaminar la jerarquía SEO de la página).
     - Sin botón .lvm-trigger (la hamburguesa de la cabecera es el disparador).
     - Sin idioma ES/CA.
   Contraste y "reducir movimiento" siguen en atributos propios del menú
   ([data-lvm-contrast] / [data-lvm-motion]) que pone /js/menu.js: no colisionan.

   Estructura del dialog (flex en columna):
     .lvm__head   → FIJO (logo, cuenta, buscador)
     .lvm__body   → SCROLL interno (rejilla de listados / resultados)
     .lvm__foot   → FIJO (Apariencia y accesibilidad)
   ========================================================================== */

:root {
	/* — Marca (fijos, no cambian con el tema) — */
	--lvm-brand: #001c4c; /* navy oficial */
	--lvm-brand-deep: #001334;
	--lvm-yellow: #ffd200;
	--lvm-yellow-deep: #e6bd00;

	/* — Paleta clara — */
	--lvm-paper: #fafaf6;
	--lvm-paper-2: #f2f0e9;
	--lvm-ink: #15171a;
	--lvm-ink-soft: #2a2d33;
	--lvm-meta: #6b6960;
	--lvm-meta-soft: #8f8c82;
	--lvm-hair: #d9d5ca;
	--lvm-hair-soft: #e8e5dc;
	--lvm-blue: #0b4f8a; /* enlace / acento interactivo en claro */
	--lvm-blue-tint: #e8eef7;

	/* — Tipografía (el host debería servir Tiempos/Söhne; hay fallback) — */
	--lvm-headline: "Tiempos Headline", "Tiempos Text", "Source Serif 4", Georgia, serif;
	--lvm-serif: "Tiempos Text", "Source Serif 4", Georgia, serif;
	--lvm-sans: "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

	/* — Preferencias de lectura (las consume la vista previa y, si quieres,
       el cuerpo de los artículos del sitio) — */
	--lvm-text-scale: 1;
	--lvm-leading: 1.62;
	--lvm-reading-font: var(--lvm-serif);

	--lvm-radius-pill: 999px;
}

/* — Tema oscuro (unificado al [data-theme] del proyecto) — */
[data-theme="dark"] {
	--lvm-paper: #14161a;
	--lvm-paper-2: #1c1f23;
	--lvm-ink: #e8e5dc;
	--lvm-ink-soft: #c7c3b8;
	--lvm-meta: #8e8b82;
	--lvm-meta-soft: #6f6c64;
	--lvm-hair: #2a2d33;
	--lvm-hair-soft: #20232a;
	--lvm-blue: #6fa9e0;
	--lvm-blue-tint: #1a2540;
}

/* — Alto contraste — */
[data-lvm-contrast="on"] {
	--lvm-ink: #000;
	--lvm-ink-soft: #000;
	--lvm-meta: #2a2a2a;
	--lvm-hair: #6a6a6a;
	--lvm-hair-soft: #9a9a9a;
	--lvm-paper: #fff;
	--lvm-paper-2: #f4f4f4;
	--lvm-blue: #003a8c;
}
[data-theme="dark"][data-lvm-contrast="on"] {
	--lvm-ink: #fff;
	--lvm-ink-soft: #f2f2f2;
	--lvm-meta: #cfcfcf;
	--lvm-hair: #6a6a6a;
	--lvm-hair-soft: #555;
	--lvm-paper: #000;
	--lvm-paper-2: #0c0c0c;
	--lvm-blue: #8fc0ff;
}

/* ==========================================================================
   Dialog
   ========================================================================== */
dialog.lvm {
	padding: 0;
	border: 1px solid var(--lvm-hair);
	margin: auto;
	width: min(var(--content-max), calc(100% - 60px));
	max-height: 88vh;
	background: var(--lvm-paper);
	color: var(--lvm-ink);
	box-shadow: 0 36px 100px rgba(0, 0, 0, 0.5);
	overflow: hidden; /* el scroll vive en .lvm__body */
}
dialog.lvm::backdrop {
	background: rgba(8, 12, 22, 0.55);
	backdrop-filter: blur(3px);
}
dialog.lvm[open] {
	display: flex;
} /* para que el panel flex funcione */

.lvm__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* Altura FIJA: el cuerpo hace scroll interno y el dialog NO cambia de tamaño
	   al filtrar (la rejilla larga → resultados cortos ya no encogen el panel).
	   En móvil el @media lo lleva a 100% (pantalla completa). */
	height: 88vh;
	max-height: 88vh;
	min-height: 0;
}

/* ——— Cabecera FIJA ——— */
.lvm__head {
	flex: 0 0 auto;
	background: var(--lvm-paper);
	border-bottom: 1px solid var(--lvm-hair);
}
.lvm__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 14px 22px;
}
.lvm__logo {
	display: block;
	line-height: 0;
	justify-self: center;
}
/* Logo monocromo teñido por máscara → color EXACTO (no aproximado por filter):
   navy corporativo en claro, blanco en oscuro. El asset es blanco; la máscara
   recorta su silueta y el background-color la rellena. */
.lvm__logo-mark {
	display: block;
	height: 26px;
	aspect-ratio: 439.6 / 46.4;
	background-color: var(--lvm-brand);
	-webkit-mask: url(/assets/logo-lavanguardia.svg) center / contain no-repeat;
	mask: url(/assets/logo-lavanguardia.svg) center / contain no-repeat;
}
[data-theme="dark"] .lvm__logo-mark {
	background-color: #fff;
}
.lvm__account {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
}

.lvm__searchrow {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 22px 18px;
}
.lvm__title {
	font-family: var(--lvm-headline);
	font-weight: 600;
	font-size: var(--fs-22);
	letter-spacing: var(--lh-22);
	color: var(--lvm-ink);
	white-space: nowrap;
	flex: 0 0 auto;
}
.lvm__search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--lvm-hair);
	border-radius: var(--lvm-radius-pill);
	padding: 0 18px;
	height: 48px;
	background: var(--lvm-paper);
}
.lvm__search svg {
	color: var(--lvm-meta);
	flex: 0 0 auto;
}
.lvm__search input {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	font-family: var(--lvm-serif);
	font-size: var(--fs-20);
	line-height: var(--lh-20);
	color: var(--lvm-ink);
	padding: var(--sp-2) 0;
}
.lvm__search kbd {
	font-family: var(--lvm-sa);
	font-size: var(--fs-11);
	line-height: var(--lh-11);
	color: var(--lvm-meta-soft);
	border: 1px solid var(--lvm-hair);
	border-radius: 4px;
	padding: 2px 7px;
	white-space: nowrap;
}

/* ——— Cuerpo con SCROLL interno ——— */
.lvm__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
/* `display:grid` ganaría al UA `[hidden]{display:none}`: forzamos el ocultado */
.lvm__grid[hidden],
.lvm__results[hidden] {
	display: none !important;
}

/* Rejilla homogénea (caja cerrada + divisores a toda altura) */
.lvm__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: stretch;
	align-content: stretch;
	min-height: 100%;
	border-top: 2px solid var(--lvm-brand);
	border-bottom: 1px solid var(--lvm-hair);
}
.lvm__col {
	padding: 18px 22px 22px;
	border-right: 1px solid var(--lvm-hair);
	min-width: 0;
}
.lvm__col:last-child {
	border-right: none;
}
.lvm__colhead {
	min-height: 52px;
	margin-bottom: 12px;
}
.lvm__colname {
	font-family: var(--lvm-headline);
	font-weight: 600;
	font-size: var(--fs-21);
	letter-spacing: var(--letter-spacing-headline);
	color: var(--lvm-ink);
	line-height: var(--lh-21);
}
.lvm__colhead p {
	margin: 4px 0 0;
	font-family: var(--lvm-sans);
	font-size: var(--fs-12_5);
	line-height: var(--lh-12_5);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-kicker);
	color: var(--lvm-meta);
}
.lvm__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
}
.lvm__link {
	display: block;
	font-family: var(--lvm-serif);
	font-size: var(--fs-16);
	font-weight: 500;
	color: var(--lvm-ink-soft);
	padding: 6px 0;
	line-height: var(--lh-16);
	text-decoration: none;
	text-wrap: balance;
	transition: color 0.15s;
}
.lvm__link:hover,
.lvm__link:focus-visible {
	color: var(--lvm-blue);
}
.lvm__more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	font-family: var(--lvm-sans);
	font-size: var(--fs-12_5);
	line-height: var(--lh-12_5);
	font-weight: 600;
	color: var(--lvm-blue);
	text-decoration: none;
}
.lvm__more:hover {
	text-decoration: underline;
}

/* CTA "Más resultados" centrado al final del listado de artículos. */
.lvm__more-wrap {
	text-align: center;
	margin-top: var(--sp-8);
}

/* Resultados de búsqueda */
.lvm__results {
	padding: 20px 26px;
}
.lvm__results-head {
	font-family: var(--lvm-sans);
	font-size: var(--fs-11);
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--lvm-meta);
	margin-bottom: 12px;
}
.lvm__results-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 28px;
}
.lvm__result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	text-decoration: none;
	border: 1px solid transparent;
}
.lvm__result:hover {
	border-color: var(--lvm-hair);
	background: var(--lvm-blue-tint);
}
.lvm__result svg {
	color: var(--lvm-meta);
	flex: 0 0 auto;
}
.lvm__result-label {
	flex: 1;
	font-family: var(--lvm-serif);
	font-size: var(--fs-16_5);
	line-height: var(--lh-16_5);
	font-weight: 600;
	color: var(--lvm-ink);
}
.lvm__result mark {
	background: var(--lvm-yellow);
	color: var(--lvm-brand-deep);
	border-radius: 2px;
	padding: 0 1px;
}
.lvm__result-group {
	font-family: var(--lvm-sans);
	font-size: var(--fs-11);
	line-height: var(--lh-11);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--lvm-meta);
}
.lvm__empty {
	font-family: var(--lvm-serif);
	font-size: var(--fs-16);
	line-height: var(--lh-16);
	color: var(--lvm-meta);
	padding: 12px 14px;
}

/* ——— Pie FIJO: Apariencia y accesibilidad ——— */
.lvm__foot {
	flex: 0 0 auto;
	background: var(--lvm-paper-2);
	border-top: 1px solid var(--lvm-hair);
}
.lvm__prefs {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 26px;
	flex-wrap: wrap;
}
.lvm__prefs-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--lvm-ink);
	font-family: var(--lvm-sans);
	font-size: var(--fs-11_5);
	line-height: var(--lh-11_5);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
}
.lvm__prefs-label svg {
	color: var(--lvm-blue);
}
.lvm__spacer {
	flex: 1;
}

.lvm__prefs-expanded {
	padding: 6px 26px 22px;
	border-top: 1px dashed var(--lvm-hair);
}
.lvm__prefs-expanded[hidden] {
	display: none;
}
.lvm__a11y-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 36px;
	align-items: start;
}
.lvm__a11y-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 28px;
}
.lvm__a11y-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.lvm__a11y-name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-family: var(--lvm-sans);
	font-size: var(--fs-13);
	line-height: var(--lh-13);
	font-weight: 600;
	color: var(--lvm-ink);
	white-space: nowrap;
}
.lvm__a11y-name svg {
	color: var(--lvm-meta);
	flex: 0 0 auto;
}

/* Vista previa de lectura */
.lvm-reading {
	border: 1px solid var(--lvm-hair);
	background: var(--lvm-paper-2);
	padding: 18px 20px;
}
.lvm-reading__tag {
	font-family: var(--lvm-sans);
	font-size: var(--fs-12_5);
	line-height: var(--lh-12_5);
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--lvm-meta);
	margin-bottom: 8px;
}
.lvm-reading__title {
	font-family: var(--lvm-headline);
	font-weight: 600;
	line-height: var(--lh-22);
	letter-spacing: var(--letter-spacing-headline);
	color: var(--lvm-ink);
	margin-bottom: 8px;
	text-wrap: balance;
	font-size: calc(var(--fs-22) * var(--lvm-text-scale));
}
.lvm-reading__body {
	margin: 0;
	color: var(--lvm-ink-soft);
	text-wrap: pretty;
	font-family: var(--lvm-reading-font);
	font-size: calc(var(--fs-15) * var(--lvm-text-scale));
	line-height: var(--lvm-leading);
}

/* ==========================================================================
   Controles atómicos (segmented / stepper / switch / botones)
   ========================================================================== */
.lvm-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 1.33em;
	border-radius: var(--lvm-radius-pill);
	border: 1px solid var(--lvm-hair);
	background: transparent;
	color: var(--lvm-ink);
	cursor: pointer;
	font-family: var(--lvm-sans);
	font-size: var(--fs-12);
	line-height: 0;
	font-weight: 600;
	letter-spacing: var(--letter-spacing-kicker);
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background 0.15s,
		border-color 0.15s,
		color 0.15s;
}
.lvm-btn:hover {
	background: var(--lvm-paper-2);
	border-color: var(--lvm-blue);
	color: var(--lvm-blue);
}
.lvm-btn--sm {
	height: 32px;
	padding: 0 13px;
}
.lvm-btn--primary {
	background: var(--lvm-ink);
	color: var(--lvm-paper);
	border-color: var(--lvm-ink);
}
.lvm-btn--primary:hover {
	background: var(--lvm-brand);
	border-color: var(--lvm-brand);
	color: #fff;
}
.lvm-btn--cta {
	background: var(--lvm-yellow);
	color: var(--lvm-brand-deep);
	border-color: var(--lvm-yellow);
	font-weight: 700;
}
.lvm-btn--cta:hover {
	background: var(--lvm-yellow-deep);
	border-color: var(--lvm-yellow-deep);
	color: var(--lvm-brand-deep);
}

/* Segmented */
.lvm-seg {
	display: inline-flex;
	border: 1px solid var(--lvm-hair);
	border-radius: var(--lvm-radius-pill);
	overflow: hidden;
	background: var(--lvm-paper);
}
.lvm-seg button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: none;
	border-left: 1px solid var(--lvm-hair);
	cursor: pointer;
	background: transparent;
	color: var(--lvm-ink);
	font-family: var(--lvm-sans);
	font-size: var(--fs-12_5);
	line-height: var(--lh-12_5);
	font-weight: 600;
	transition:
		background 0.15s,
		color 0.15s;
}
.lvm-seg button:first-child {
	border-left: none;
}
.lvm-seg button[aria-pressed="true"] {
	background: var(--lvm-brand);
	color: #fff;
}

/* Stepper (tamaño de texto) */
.lvm-step {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--lvm-hair);
	border-radius: var(--lvm-radius-pill);
	overflow: hidden;
	background: var(--lvm-paper);
}
.lvm-step button {
	width: 38px;
	height: 36px;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--lvm-ink);
	display: inline-grid;
	place-items: center;
}
.lvm-step button:hover:not(:disabled) {
	background: var(--lvm-paper-2);
	color: var(--lvm-blue);
}
.lvm-step button:disabled {
	opacity: 0.4;
	cursor: default;
}
.lvm-step output {
	min-width: 64px;
	text-align: center;
	font-family: var(--lvm-sans);
	font-size: var(--fs-12_5);
	line-height: var(--lh-12_5);
	font-weight: 700;
	color: var(--lvm-ink);
	border-left: 1px solid var(--lvm-hair);
	border-right: 1px solid var(--lvm-hair);
	height: 36px;
	line-height: 36px;
}

/* Switch */
.lvm-switch {
	position: relative;
	width: 46px;
	height: 26px;
	border-radius: 999px;
	border: 1px solid var(--lvm-hair);
	background: var(--lvm-paper-2);
	cursor: pointer;
	flex: 0 0 auto;
	transition:
		background 0.18s,
		border-color 0.18s;
}
.lvm-switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	transition: left 0.18s;
}
.lvm-switch[aria-pressed="true"] {
	background: var(--lvm-brand);
	border-color: var(--lvm-brand);
}
.lvm-switch[aria-pressed="true"]::after {
	left: 22px;
}

/* ==========================================================================
   Móvil — el dialog ocupa toda la pantalla; la rejilla se apila
   ========================================================================== */
@media (max-width: 760px) {
	dialog.lvm {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 100%;
		border: none;
		margin: 8px;
	}
	.lvm__panel {
		max-height: 100%;
		height: 100%;
	}

	.lvm__bar {
		grid-template-columns: auto 1fr; /* Cerrar | cuenta (logo oculto en móvil) */
		padding: 12px 16px;
	}
	.lvm__logo {
		display: none;
	} /* el logo no aporta en barra estrecha y desbordaba */
	.lvm__account .lvm-account-secondary {
		display: none;
	} /* oculta "Área suscriptor" en barra estrecha */
	.lvm__searchrow {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 0 16px 14px;
	}
	.lvm__title {
		font-size: var(--fs-20);
		line-height: var(--lh-20);
	}

	.lvm__grid {
		grid-template-columns: 1fr;
		min-height: 0;
		border-top: none;
		border-bottom: none;
	}
	.lvm__col {
		border-right: none;
		border-top: 2px solid var(--lvm-brand);
		padding: 16px 16px 22px;
	}
	.lvm__colhead {
		min-height: 0;
	}
	.lvm__links {
		grid-template-columns: 1fr 1fr;
		gap: 2px 18px;
	}

	.lvm__results-grid {
		grid-template-columns: 1fr;
	}

	/* Buscador: el atajo ⌘K no aporta en táctil */
	.lvm__search kbd {
		display: none;
	}

	/* Pie compacto en móvil: solo Tema + "Más ajustes" (a los extremos). El resto
	   de controles rápidos (tamaño de texto, contraste) vive en "Más ajustes",
	   donde ya están todos → evita la fila descolocada por el spacer + wrap. */
	.lvm__prefs {
		gap: 10px;
		padding: 12px 16px;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.lvm__prefs-label,
	.lvm__prefs > .lvm-step,
	.lvm__prefs > .lvm__a11y-name,
	.lvm__prefs > .lvm-switch,
	.lvm__spacer {
		display: none;
	}
	.lvm__a11y-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.lvm__a11y-controls {
		grid-template-columns: 1fr;
	}
}

/* — Respeta la preferencia del sistema y el toggle "reducir movimiento" — */
@media (prefers-reduced-motion: reduce) {
	dialog.lvm,
	.lvm * {
		transition: none !important;
		animation: none !important;
	}
}
[data-lvm-motion="reduce"] dialog.lvm,
[data-lvm-motion="reduce"] .lvm * {
	transition: none !important;
	animation: none !important;
}