/*
 * Banner de cookies (SW-307, P15). Hoy no hay ninguno (el de Real Cookie Banner era una barra abajo): la propuesta
 * mínima con la identidad (spec §4) y D10. Barra fija abajo en el burdeos del pie, texto blanco en Outfit y botones
 * rosa con texto blanco de 19 px en 700 (.boton--rosa, D10 regla 1); «Configurar», con borde blanco. Aceptar, rechazar
 * y configurar miden lo mismo. A 390 px ocupa como mucho el 40 % de la altura (pruebas/consentimiento.py).
 */
.consentimiento {
	position: fixed;
	inset: auto 0 0;
	z-index: 40; /* sobre la cabecera (20-30); el <dialog> del mini-carrito va en la capa superior */
	background: var(--burdeos);
	color: #fff;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, .25);
}
.consentimiento[hidden] { display: none; } /* el display de abajo ganaría al [hidden] del navegador */
/* El anillo de foco global es burdeos, el color de la barra: blanco, como en el pie (14,8:1). */
.consentimiento :focus-visible { outline-color: #fff; }
.consentimiento__dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 16px; }
/* Texto y botones en una fila mientras el texto tenga 420 px; si no (en tableta), los botones bajan a su propia fila. */
.consentimiento__texto { flex: 1 1 420px; font: 300 14px/1.45 var(--letra); }
.consentimiento__texto p { margin: 0; }
.consentimiento .consentimiento__titulo { margin-bottom: 4px; font: 600 16px/1.2 var(--letra); text-transform: uppercase; }
.consentimiento a { color: #fff; text-decoration: underline; } /* dentro de la frase, subrayado: no se distingue por color */
.consentimiento__botones { display: flex; flex: none; gap: 8px; }
.consentimiento .boton { padding: 12px 16px; text-transform: uppercase; }
/* El mismo alto que los rosa: 2 px de borde y 2 px menos de relleno. */
.consentimiento .consentimiento__configurar { padding: 10px 14px; border: 2px solid #fff; background: none; color: #fff; font-size: 19px; font-weight: 700; }
@media (max-width: 767px) {
	.consentimiento__dentro { flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding-block: 12px; }
	.consentimiento__texto { flex: none; }
	.consentimiento__texto { font-size: 13px; }
	.consentimiento__botones { flex-direction: column; }
}
/* Mientras se ve la barra (assets/js/consentimiento.js pone la clase y su alto): lo que recibe el foco no queda debajo
   de ella (WCAG 2.4.11, técnica C43) y el final de la página se puede leer. */
html.con-consentimiento { scroll-padding-bottom: var(--alto-consentimiento, 0px); }
html.con-consentimiento body { padding-bottom: var(--alto-consentimiento, 0px); }

/* Segunda capa: un <dialog> modal centrado, sobre la página oscurecida, como el mini-carrito. */
.consentimiento-ajustes {
	width: min(640px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100vh - 32px);
	padding: 0;
	overflow-y: auto;
	border: 0;
	border-radius: 5px;
	background: #fff;
	color: var(--cuerpo);
}
.consentimiento-ajustes::backdrop { background: rgba(0, 0, 0, .5); }
.consentimiento-ajustes__dentro { position: relative; padding: 32px 24px 24px; font: 400 15px/1.5 var(--letra); }
.consentimiento-ajustes__dentro > p { margin: 0 0 16px; }
.consentimiento-ajustes__cerrar {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--burdeos);
	cursor: pointer;
}
.consentimiento-ajustes__cerrar .icono { width: 20px; height: 20px; }
.consentimiento-ajustes__titulo { margin: 0 32px 12px 0; color: var(--burdeos); font: 600 24px/1.2 var(--letra); text-transform: uppercase; }
.consentimiento-finalidad { padding-block: 12px; border-top: 1px solid #e0e0e0; }
.consentimiento-finalidad__nombre { display: flex; align-items: center; gap: 8px; min-height: 24px; margin: 0; font-weight: 600; }
.consentimiento-finalidad__nombre input { width: 20px; height: 20px; margin: 0; accent-color: var(--burdeos); }
.consentimiento-finalidad__fija { color: var(--gris-texto); font-weight: 400; } /* 4,61:1 sobre blanco */
.consentimiento-finalidad__texto { margin: 4px 0 0; }
/* La lista de cada finalidad, plegada: desplegada, en móvil las casillas quedaban dos pantallas más abajo. */
.consentimiento-finalidad__cookies { margin-top: 4px; font-size: 13px; }
.consentimiento-finalidad__cookies summary { min-height: 24px; padding-block: 2px; color: var(--rosa-texto); cursor: pointer; } /* 4,58:1 */
.consentimiento-finalidad__cookies ul { margin: 4px 0 0; padding-left: 20px; color: var(--gris-texto); }
.consentimiento-ajustes__botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.consentimiento-ajustes .boton { padding: 12px 16px; text-transform: uppercase; }

/* Los botones de la política de cookies ([rcb-consent], caribena-core/consentimiento.php): acciones con aspecto de
   enlace, en el color de los enlaces del texto de las legales (D10 regla 2), y de 24 px de alto: calidad.py los mide
   como objetivo, porque un botón no es un enlace dentro de una frase. */
.enlace-consentimiento__boton {
	display: inline-block;
	min-height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--rosa-texto);
	font: inherit;
	cursor: pointer;
}
.enlace-consentimiento__boton:hover { text-decoration: underline; }
.enlace-consentimiento__aviso:not(:empty) { margin-left: 8px; font-style: italic; }