/**
 * 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(0, 0, 0, 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: var(--ldc-primary-fg);
}

.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 acercado un punto al fondo: del mismo palo, pero distinto
   de un vistazo. Se CALCULA a partir de `--ldc-btn-bg` y `--ldc-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 sigue al tema, a un color propio del admin y a un fondo oscuro (hasta la
   1.11.3 se mezclaba siempre con blanco). Un navegador sin `color-mix` usa el del interruptor
   activo tal cual.

   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: var(--ldc-btn-bg);
	background: color-mix(in srgb, var(--ldc-btn-bg) 78%, var(--ldc-bg));
	border-color: var(--ldc-btn-bg);
	border-color: color-mix(in srgb, var(--ldc-btn-bg) 78%, var(--ldc-bg));
}

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

.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: candado, engranaje, barras y megáfono.

   Caja y dibujo van en dos pseudo-elementos: `::before` es la caja (contorno, y relleno de marca
   en la obligatoria) y `::after`, encima, el dibujo. El dibujo se pinta con `mask` +
   `background-color` y no con el SVG como `background-image`, porque un SVG servido como imagen
   es un documento aislado al que no llega ninguna variable CSS: hasta la 1.11.3 llevaban el
   turquesa del diseño anterior (#0a7a87) escrito dentro, con un segundo juego en negro solo para
   el alto contraste, y en el Club de ladaurada.com el candado blanco quedaba sobre un relleno casi
   blanco. Ahora el color lo pone `--ldc-icon` (banner.css), y el del candado, `--ldc-primary-fg`,
   el mismo texto que llevan los botones sobre el color de marca. */
.ldc-cat__label {
	position: relative;
	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);
}

.ldc-cat:has(input[data-ldc-cat="necessary"]) .ldc-cat__label::before {
	border-color: var(--ldc-btn-bg);
	background-color: var(--ldc-btn-bg);
}

/* Sin `mask`, el `::after` sería un cuadrado macizo: entonces no se pinta ningún dibujo y queda
   la caja vacía, que sigue leyéndose como icono. */
@supports (mask-image: none) or (-webkit-mask-image: none) {
	.ldc-cat:has(input[data-ldc-cat="necessary"]) .ldc-cat__label::after,
	.ldc-cat:has(input[data-ldc-cat="preferences"]) .ldc-cat__label::after,
	.ldc-cat:has(input[data-ldc-cat="analytics"]) .ldc-cat__label::after,
	.ldc-cat:has(input[data-ldc-cat="marketing"]) .ldc-cat__label::after {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		width: 32px;
		height: 32px;
		margin-top: -16px;
		background-color: var(--ldc-icon);
		-webkit-mask: var(--ldc-glyph) center / 15px 15px no-repeat;
		mask: var(--ldc-glyph) center / 15px 15px no-repeat;
		pointer-events: none;
	}

	/* Candado: lo que define a esta categoría es justamente que no se puede desactivar. Va sobre
	   el relleno de marca, así que toma el color del texto de los botones. */
	.ldc-cat:has(input[data-ldc-cat="necessary"]) .ldc-cat__label::after {
		--ldc-glyph: 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='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Crect x='3.4' y='7' width='9.2' height='6.6' rx='1.6'/%3E%3C/svg%3E");
		background-color: var(--ldc-primary-fg);
	}

	/* 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; el
	   agujero central es una máscara dentro del propio SVG, para que deje ver la tarjeta. */
	.ldc-cat:has(input[data-ldc-cat="preferences"]) .ldc-cat__label::after {
		--ldc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='h'%3E%3Crect width='16' height='16' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='1.9'/%3E%3C/mask%3E%3Cg mask='url(%23h)'%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%3C/svg%3E");
	}

	.ldc-cat:has(input[data-ldc-cat="analytics"]) .ldc-cat__label::after {
		--ldc-glyph: 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'/%3E%3Crect x='6.5' y='6' width='3' height='8'/%3E%3Crect x='11' y='2' width='3' height='12'/%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::after {
		--ldc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%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/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;
	}
}

/* Oscuro: los tokens de `.ldc-dark` en banner.css ya dan el texto sobre el color de marca
   (`--ldc-primary-fg`) y el color de los iconos (`--ldc-icon`); antes hacía falta un `filter`
   para aclarar unos iconos que llevaban el color escrito dentro. */

@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;
	}
	/* El dibujo es un fondo recortado por la máscara: sin esto, el modo de colores forzados le
	   pondría el color de fondo del sistema y desaparecería. */
	.ldc-cat__label::after {
		forced-color-adjust: none;
		background-color: CanvasText !important;
	}
}