/**
 * La Daurada Cookies — modal de preferencias (segundo nivel) y fichas de categoría.
 *
 * Separado de banner.css en la 1.11.0 (auditoría de rendimiento del 14-10-2026): banner.css va
 * en línea en el <head> porque el banner se pinta con la página, y este archivo solo hace falta
 * cuando alguien pulsa «Configurar», así que se carga sin bloquear el renderizado
 * (`rel="preload"` + `onload`, ver `LDC_Banner::async_modal_stylesheet()`). `banner.js` espera a
 * que esté aplicado antes de abrir el modal.
 *
 * Usa los tokens `--ldc-*` que declara banner.css en `:root`; no funciona sin él.
 */

/* =========================================================================
   MODAL DE PREFERENCIAS (segundo nivel)
   ========================================================================= */

.ldc-modal {
	position: fixed;
	inset: 0;
	z-index: calc(var(--ldc-z) + 1);
	display: grid;
	place-items: center;
	padding: var(--ldc-s4);
	font-family: var(--ldc-font);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ldc-fg);
}

.ldc-modal__overlay {
	position: absolute;
	inset: 0;
	background: var(--ldc-scrim);
}

.ldc-modal__content {
	position: relative;
	width: min(720px, 100%);
	max-height: min(88dvh, 940px);
	display: grid;
	/* Filas asignadas por selector, no por orden: banner.js puede insertar el aviso de GPC o el
	   error de envío entre medias, y el único que debe encogerse y hacer scroll es la lista de
	   categorías. Las filas sin contenido colapsan a cero. */
	grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
	background: var(--ldc-bg);
	border: 1px solid var(--ldc-rule-strong);
	border-radius: var(--ldc-radius);
	box-shadow: 0 24px 60px -34px rgba(14, 58, 65, 0.8);
	overflow: hidden;
	/* El propio ancho del modal manda sobre su interior (paddings y pie), no el del viewport:
	   así el pie se apila en cuanto el modal es estrecho, sea por pantalla o por contenedor. */
	container-type: inline-size;
	animation: ldc-rise 0.26s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.ldc-modal__content > h2 { grid-row: 1; }
.ldc-modal__content > p { grid-row: 2; }
.ldc-modal__content > .ldc-gpc-notice { grid-row: 3; }
.ldc-modal__content > .ldc-modal__categories { grid-row: 4; }
.ldc-modal__content > .ldc-error { grid-row: 5; }
.ldc-modal__content > .ldc-modal__actions { grid-row: 6; }

.ldc-modal__content::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--ldc-rule-strong);
	z-index: 1;
}

/* El h2 y el párrafo de intro son los dos primeros hijos: forman la cabecera. Se agrupan con
   `display: contents` imposible aquí (grid de tres filas), así que la cabecera es el h2 y la
   intro entra en la zona de scroll — con `position: sticky` para que el título no se vaya. */
.ldc-modal__content h2 {
	margin: 0;
	position: relative;
	padding: clamp(var(--ldc-s5), 3cqi, 28px) 64px var(--ldc-s4) clamp(var(--ldc-s4), 3cqi, var(--ldc-s8));
	display: flex;
	align-items: baseline;
	gap: var(--ldc-s3);
	font-family: var(--ldc-font-heading);
	font-size: clamp(28px, 3.4vw, 38px);
	font-weight: 400;
	line-height: 0.92;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--ldc-heading);
}

.ldc-modal__content h2::after {
	content: '';
	position: absolute;
	left: clamp(var(--ldc-s4), 3cqi, var(--ldc-s8));
	right: clamp(var(--ldc-s4), 3cqi, var(--ldc-s8));
	bottom: 0;
	height: 2px;
	background: var(--ldc-accent);
}

.ldc-modal__content > p {
	margin: 0;
	padding: var(--ldc-s4) clamp(var(--ldc-s4), 3cqi, var(--ldc-s8)) var(--ldc-s5);
	color: var(--ldc-muted);
	font-size: 14.5px;
	text-wrap: pretty;
	border-bottom: 1px solid var(--ldc-border);
}

.ldc-modal__content .ldc-gpc-notice {
	margin: var(--ldc-s4) clamp(var(--ldc-s4), 3cqi, var(--ldc-s8)) 0;
	border-bottom: 0;
	padding: var(--ldc-s3) var(--ldc-s4) var(--ldc-s3) 40px;
}

.ldc-modal__content .ldc-error {
	margin: var(--ldc-s4) clamp(var(--ldc-s4), 3cqi, var(--ldc-s8)) 0;
}

.ldc-modal__close {
	position: absolute;
	top: var(--ldc-s3);
	right: var(--ldc-s3);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: var(--ldc-paper);
	border: 1px solid var(--ldc-rule-strong);
	border-radius: 50%;
	font-size: 21px;
	line-height: 1;
	color: var(--ldc-heading);
	cursor: pointer;
	padding: 0;
}

.ldc-modal__close:hover {
	background: var(--ldc-btn-bg);
	border-color: var(--ldc-btn-bg);
	color: #ffffff;
}

.ldc-modal__close:focus-visible {
	outline: 3px solid var(--ldc-focus);
	outline-offset: 2px;
}

.ldc-modal__categories {
	margin: 0;
	padding: var(--ldc-s5) clamp(var(--ldc-s4), 3cqi, var(--ldc-s8));
	display: grid;
	gap: var(--ldc-s3);
	overflow: auto;
	overscroll-behavior: contain;
	/* Fondo un tono más cerrado: las fichas de categoría son hojas sobre la mesa. */
	background: var(--ldc-paper-2);
}

/* === Categorías: tarjeta + interruptor + icono ============================ */

/* El padding vive en el <label>, no aquí: si lo llevara la tarjeta, el margen entre el borde y
   el contenido quedaría FUERA de la zona pulsable y un clic en el filo no haría nada. */
.ldc-cat {
	border: 1px solid var(--ldc-border);
	border-radius: var(--ldc-radius);
	background: var(--ldc-paper);
	transition: border-color 0.15s ease, background 0.15s ease;
}

/* Activada: el filete toma el color de marca. */
.ldc-cat:has(input:checked) {
	border-color: var(--ldc-btn-bg);
}

.ldc-cat:has(input:disabled) {
	background: var(--ldc-paper-2);
	border-color: var(--ldc-rule-strong);
}

/* El <label> ocupa la ficha entera (icono + etiqueta + interruptor en la primera línea, y la
   descripción debajo, a todo el ancho), para que se pueda pulsar en cualquier punto de la
   tarjeta y no solo sobre la fila del interruptor. */
.ldc-cat__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ldc-s3);
	padding: var(--ldc-s4) var(--ldc-s5);
	font-weight: 600;
	cursor: pointer;
}

.ldc-cat:has(input:disabled) .ldc-cat__head {
	cursor: default;
}

/* Interruptor a partir del checkbox nativo: sin marcado nuevo, sin JS, y sigue siendo un
   checkbox real para el teclado y los lectores de pantalla. */
.ldc-cat__head input[type="checkbox"] {
	appearance: none;
	order: 3;
	margin: 0 0 0 auto;
	flex: 0 0 auto;
	width: 52px;
	height: 28px;
	border-radius: 999px;
	background: var(--ldc-paper-2);
	border: 1px solid var(--ldc-control-border);
	cursor: pointer;
	position: relative;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.ldc-cat__head input[type="checkbox"]::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ldc-paper);
	border: 1px solid var(--ldc-control-border);
	transition: transform 0.18s ease, border-color 0.18s ease;
}

.ldc-cat__head input[type="checkbox"]:checked {
	background: var(--ldc-btn-bg);
	border-color: var(--ldc-btn-bg);
}

.ldc-cat__head input[type="checkbox"]:checked::after {
	transform: translateX(24px);
	border-color: var(--ldc-btn-bg);
}

/* Bloqueada pero NO marcada (una categoría locked que no sea `necessary`): la pista se queda
   apagada, pero el contorno sube al del resto de controles para que el interruptor se vea. */
.ldc-cat__head input[type="checkbox"]:disabled {
	background: var(--ldc-rule-strong);
	border-color: var(--ldc-control-border);
	cursor: default;
}

/* Obligatoria: marcada y bloqueada a la vez. Tiene que leerse como activa —azul apagado con el
   pomo a la derecha—, no como apagada; si no, parece que las necesarias están off. Se ata al
   atributo `data-ldc-cat`, no a `:checked`: la categoría necesaria está activa por definición,
   y así el estado no depende de una propiedad del DOM.

   El tono es el del interruptor activo aclarado un punto: del mismo palo, pero distinto de un
   vistazo. Se CALCULA a partir de `--ldc-btn-bg` en vez de ser un literal —que es lo que era y
   por eso en alto contraste se quedaba azul mientras el resto del banner se oscurecía—, así que
   ahora sigue al tema y también a un color propio del admin. La declaración literal de antes se
   queda como reserva para un navegador sin `color-mix`.

   Contraste sobre la ficha de esta categoría: 3,28:1. Los controles deshabilitados están
   exentos del 3:1 de WCAG 1.4.11, pero este estado NO comunica «no disponible» sino «activa y
   no se puede tocar», así que se pinta para verse. */
.ldc-cat__head input[type="checkbox"][data-ldc-cat="necessary"] {
	background: #4097a1;
	background: color-mix(in srgb, var(--ldc-btn-bg) 78%, #ffffff);
	border-color: #4097a1;
	border-color: color-mix(in srgb, var(--ldc-btn-bg) 78%, #ffffff);
}

.ldc-cat__head input[type="checkbox"][data-ldc-cat="necessary"]::after {
	transform: translateX(24px);
	border-color: #4097a1;
	border-color: color-mix(in srgb, var(--ldc-btn-bg) 78%, #ffffff);
}

.ldc-cat__head input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--ldc-focus);
	outline-offset: 2px;
}

/* Icono por categoría, deducido del `data-ldc-cat` que ya emite banner.js. Formas
   geométricas simples: punto, rombo, barras y anillo. */
.ldc-cat__label {
	display: inline-flex;
	align-items: center;
	gap: var(--ldc-s3);
	font-size: 15px;
	font-weight: 600;
	color: var(--ldc-heading);
}

.ldc-cat__label::before {
	content: '';
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 10px;
	border: 1px solid var(--ldc-rule-strong);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
}

.ldc-cat:has(input[data-ldc-cat="necessary"]) .ldc-cat__label::before {
	border-color: var(--ldc-btn-bg);
	background-color: var(--ldc-btn-bg);
	/* Candado: lo que define a esta categoría es justamente que no se puede desactivar. En
	   blanco, porque su ficha va sobre el relleno de marca. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.4 7.2V5.4a2.6 2.6 0 0 1 5.2 0v1.8' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3Crect x='3.4' y='7' width='9.2' height='6.6' rx='1.6' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* Engranaje: son las que recuerdan cómo quieres el sitio, o sea ajustes. Ocho dientes hechos
   con rectángulos girados en vez de un `path` dibujado a mano, que a 15 px se emborrona. */
.ldc-cat:has(input[data-ldc-cat="preferences"]) .ldc-cat__label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%230a7a87'%3E%3Crect x='6.4' y='0.7' width='3.2' height='3.4' rx='0.9'/%3E%3Crect x='6.4' y='11.9' width='3.2' height='3.4' rx='0.9'/%3E%3Crect x='0.7' y='6.4' width='3.4' height='3.2' rx='0.9'/%3E%3Crect x='11.9' y='6.4' width='3.4' height='3.2' rx='0.9'/%3E%3Crect x='6.4' y='0.7' width='3.2' height='3.4' rx='0.9' transform='rotate(45 8 8)'/%3E%3Crect x='6.4' y='11.9' width='3.2' height='3.4' rx='0.9' transform='rotate(45 8 8)'/%3E%3Crect x='0.7' y='6.4' width='3.4' height='3.2' rx='0.9' transform='rotate(45 8 8)'/%3E%3Crect x='11.9' y='6.4' width='3.4' height='3.2' rx='0.9' transform='rotate(45 8 8)'/%3E%3Ccircle cx='8' cy='8' r='5'/%3E%3C/g%3E%3Ccircle cx='8' cy='8' r='1.9' fill='%23ffffff'/%3E%3C/svg%3E");
}

.ldc-cat:has(input[data-ldc-cat="analytics"]) .ldc-cat__label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='10' width='3' height='4' fill='%230a7a87'/%3E%3Crect x='6.5' y='6' width='3' height='8' fill='%230a7a87'/%3E%3Crect x='11' y='2' width='3' height='12' fill='%230a7a87'/%3E%3C/svg%3E");
}

/* Megáfono: de las cuatro, es la categoría que sirve para dirigirse a ti, así que el icono
   habitual de publicidad se lee antes que un anillo abstracto. */
.ldc-cat:has(input[data-ldc-cat="marketing"]) .ldc-cat__label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%230a7a87'%3E%3Cpath d='M13.1 1.6v12.8L6.3 11V5z'/%3E%3Crect x='1.2' y='5' width='5.1' height='6' rx='1.5'/%3E%3Cpath d='M2.9 11.2h2.5l1.1 3.2a1.2 1.2 0 0 1-2.3.75z'/%3E%3C/g%3E%3C/svg%3E");
}

.ldc-cat__desc {
	/* Segunda línea del label, a todo el ancho y bajo el icono. */
	order: 4;
	flex: 0 0 100%;
	margin: 0;
	padding-left: 45px;
	color: var(--ldc-muted);
	/* El peso 600 del label no se hereda aquí: la descripción es texto corrido. */
	font-weight: 400;
	font-size: 13.5px;
	text-wrap: pretty;
}

.ldc-modal__actions {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--ldc-s3);
	padding: var(--ldc-s5) clamp(var(--ldc-s4), 3cqi, var(--ldc-s8)) calc(var(--ldc-s6) + var(--ldc-safe-b));
	border-top: 1px solid var(--ldc-rule-strong);
	background: var(--ldc-paper);
}

/* Tres rótulos de igual ancho con etiquetas de longitud desigual: la letra se aprieta un punto
   para que «Desar preferències» no caiga a dos líneas y desnivele la fila. */
.ldc-modal__actions .ldc-btn {
	padding-inline: var(--ldc-s3);
	font-size: 11.5px;
	letter-spacing: 0.05em;
}

/* Móvil: el modal pasa a hoja inferior al 92 % de alto, con el pie siempre visible. */
@container (max-width: 560px) {
	.ldc-modal__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.ldc-modal__actions .ldc-btn {
		flex: 0 0 auto;
	}
	.ldc-cat__desc {
		padding-left: 0;
	}
}

@media (max-width: 600px) {
	.ldc-modal {
		place-items: end center;
		padding: 0;
	}
	.ldc-modal__content {
		width: 100%;
		max-height: 92dvh;
		border-radius: var(--ldc-radius) var(--ldc-radius) 0 0;
	}
	.ldc-modal__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.ldc-modal__actions .ldc-btn {
		flex: 0 0 auto;
	}
	.ldc-cat__desc {
		padding-left: 0;
	}
}

/* Los iconos llevan su color DENTRO del `data:` URI, y ahí no llega ninguna variable CSS: un SVG
   servido como imagen es un documento aislado, así que ni `var()` ni `currentColor` valen (el
   mismo motivo por el que el logotipo del sitio salía negro antes de quitarlo). Por eso el alto
   contraste necesita su propio juego, en el negro que el tema usa en ese modo para texto y
   bordes. El de la categoría obligatoria no está aquí: va en blanco sobre el relleno del
   interruptor, que sí cuelga de `--ldc-btn-bg` y ya se oscurece solo.

   Si algún día hay que repintarlos por un tercer motivo, la alternativa de verdad es dibujarlos
   con `mask` y `background-color` en vez de `background-image`, y entonces el color lo pondría
   el CSS una sola vez; pide separar la caja del icono en dos pseudo-elementos. */
:root.mt-high-contrast .ldc-cat:has(input[data-ldc-cat="preferences"]) .ldc-cat__label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000000'%3E%3Crect x='6.4' y='0.7' width='3.2' height='3.4' rx='0.9'/%3E%3Crect x='6.4' y='11.9' width='3.2' height='3.4' rx='0.9'/%3E%3Crect x='0.7' y='6.4' width='3.4' height='3.2' rx='0.9'/%3E%3Crect x='11.9' y='6.4' width='3.4' height='3.2' rx='0.9'/%3E%3Crect x='6.4' y='0.7' width='3.2' height='3.4' rx='0.9' transform='rotate(45 8 8)'/%3E%3Crect x='6.4' y='11.9' width='3.2' height='3.4' rx='0.9' transform='rotate(45 8 8)'/%3E%3Crect x='0.7' y='6.4' width='3.4' height='3.2' rx='0.9' transform='rotate(45 8 8)'/%3E%3Crect x='11.9' y='6.4' width='3.4' height='3.2' rx='0.9' transform='rotate(45 8 8)'/%3E%3Ccircle cx='8' cy='8' r='5'/%3E%3C/g%3E%3Ccircle cx='8' cy='8' r='1.9' fill='%23ffffff'/%3E%3C/svg%3E");
}

:root.mt-high-contrast .ldc-cat:has(input[data-ldc-cat="analytics"]) .ldc-cat__label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='10' width='3' height='4' fill='%23000000'/%3E%3Crect x='6.5' y='6' width='3' height='8' fill='%23000000'/%3E%3Crect x='11' y='2' width='3' height='12' fill='%23000000'/%3E%3C/svg%3E");
}

:root.mt-high-contrast .ldc-cat:has(input[data-ldc-cat="marketing"]) .ldc-cat__label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000000'%3E%3Cpath d='M13.1 1.6v12.8L6.3 11V5z'/%3E%3Crect x='1.2' y='5' width='5.1' height='6' rx='1.5'/%3E%3Cpath d='M2.9 11.2h2.5l1.1 3.2a1.2 1.2 0 0 1-2.3.75z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Oscuro (ver los tokens de `.ldc-dark` en banner.css). */
.ldc-dark .ldc-modal__close:hover {
	color: #04262b;
}

.ldc-dark .ldc-cat__label::before {
	filter: brightness(1.7);
}

@media (prefers-reduced-motion: reduce) {
	.ldc-modal__content {
		animation: none !important;
	}
	.ldc-cat,
	.ldc-cat__head input[type="checkbox"],
	.ldc-cat__head input[type="checkbox"]::after {
		transition: none !important;
	}
}

@media (forced-colors: active) {
	.ldc-cat__head input[type="checkbox"]:focus-visible {
		outline-color: Highlight;
	}
	.ldc-cat:has(input:checked) {
		border-color: Highlight;
	}
	.ldc-cat__head input[type="checkbox"] {
		forced-color-adjust: none;
		border: 1px solid ButtonBorder;
	}
}