/*
 * Aviso de cookies, panel de ajustes y hueco de tercero bloqueado.
 *
 * Todo con prefijo `cs-consent-` y sin tocar ninguna clase existente: esto se pinta en las dos
 * mitades del sitio -la privada, con bootstrap, y la publica, sin el- y no puede depender de
 * ninguna de las dos ni chocar con ellas.
 *
 * «Rechazar» y «Aceptar» tienen el mismo tamano y la misma comodidad. Si rechazar cuesta mas que
 * aceptar, el consentimiento deja de ser libre; y ademas se nota, que es peor.
 */

/*
 * ESTO VA PRIMERO, Y NO ES UN DETALLE (2.8.43.157)
 * ------------------------------------------------
 * El atributo `hidden` de HTML oculta un elemento porque la hoja del NAVEGADOR le pone
 * `display:none`. En cuanto una hoja propia le da cualquier otro `display` -y aqui abajo se dan
 * dos `display:flex`-, la del autor gana y **`hidden` deja de ocultar nada**.
 *
 * En la 2.8.43.156 faltaba esta regla, y eso solo hizo tres estropicios a la vez:
 *   - el panel de ajustes, que se pinta siempre con `hidden` puesto, salia ENCIMA de la pagina
 *     nada mas entrar;
 *   - cerrarlo no hacia nada, porque cerrar es poner `hidden` y `hidden` no ocultaba;
 *   - y a quien ya habia decidido le seguia saliendo el banner, que tambien va con `hidden`.
 *
 * Ninguna de las 62 pruebas del servidor podia verlo: las tres cosas pasan en el navegador. Por
 * eso ahora hay ademas una prueba de pintado de verdad, con Chromium.
 */
.cs-consent-banner[hidden],
.cs-consent-panel[hidden] { display: none !important; }

/* El cinturon ademas de los tirantes: el JS pone tambien esta clase al abrir. */
.cs-consent-panel--abierto { display: flex !important; }

.cs-consent-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	background: #ffffff;
	border-top: 1px solid #e4e2ec;
	box-shadow: 0 -6px 24px rgba(35, 33, 51, 0.12);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	color: #232133;
}

.cs-consent-banner__texto { flex: 1 1 420px; min-width: 260px; }
.cs-consent-banner__texto strong { display: block; margin-bottom: 4px; font-size: 15px; }
.cs-consent-banner__texto p { margin: 0; color: #55516b; }
.cs-consent-banner__texto a { color: #2366b1; text-decoration: underline; }

.cs-consent-banner__botones,
.cs-consent-panel__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.cs-consent-boton {
	appearance: none;
	border: 1px solid #cfccdd;
	background: #ffffff;
	color: #232133;
	border-radius: 8px;
	padding: 10px 18px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	min-width: 132px;
}

.cs-consent-boton:hover { border-color: #9a95b5; }
.cs-consent-boton:focus-visible { outline: 2px solid #2366b1; outline-offset: 2px; }
.cs-consent-boton--principal { background: #2366b1; border-color: #2366b1; color: #ffffff; }
.cs-consent-boton--principal:hover { background: #1c5495; border-color: #1c5495; }

/* El panel */
.cs-consent-panel {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 18, 33, 0.55);
	overflow-y: auto;
}

.cs-consent-panel__caja {
	width: 100%;
	max-width: 620px;
	background: #ffffff;
	border-radius: 14px;
	padding: 24px;
	font-size: 14px;
	line-height: 1.5;
	color: #232133;
}

.cs-consent-panel__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cs-consent-panel__cabecera h2 { margin: 0; font-size: 20px; }
.cs-consent-panel__cerrar {
	appearance: none; border: 0; background: none; font-size: 28px; line-height: 1;
	color: #55516b; cursor: pointer; padding: 0 4px;
}
.cs-consent-panel__intro { margin: 10px 0 18px; color: #55516b; }
.cs-consent-panel__intro a { color: #2366b1; text-decoration: underline; }

.cs-consent-fila {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
	padding: 14px 0; border-top: 1px solid #eeecf4;
}
.cs-consent-fila strong { display: block; margin-bottom: 2px; }
.cs-consent-fila p { margin: 0; color: #55516b; font-size: 13px; }
.cs-consent-siempre { flex: 0 0 auto; color: #6f6a86; font-size: 12px; font-weight: 600; padding-top: 2px; }

/* El interruptor: sin `checked` de serie en el HTML, aqui solo se pinta. */
.cs-consent-interruptor { flex: 0 0 auto; position: relative; display: inline-block; width: 46px; height: 26px; }
.cs-consent-interruptor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cs-consent-interruptor span {
	position: absolute; inset: 0; border-radius: 26px; background: #cfccdd; transition: background .15s;
	pointer-events: none;
}
.cs-consent-interruptor span::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
	border-radius: 50%; background: #ffffff; transition: transform .15s;
}
.cs-consent-interruptor input:checked + span { background: #2366b1; }
.cs-consent-interruptor input:checked + span::after { transform: translateX(20px); }
.cs-consent-interruptor input:focus-visible + span { outline: 2px solid #2366b1; outline-offset: 2px; }

.cs-consent-panel__botones { margin-top: 20px; justify-content: flex-end; }

/*
 * El hueco donde iba un tercero.
 *
 * Tiene que parecer un hueco explicado, no un fallo. Un recuadro gris y mudo donde deberia haber
 * un video se lee como que la web esta rota, y la persona no relaciona eso con lo que decidio.
 */
.cs-consent-hueco {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 180px;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	background: #f6f5fa;
	border: 1px dashed #cfccdd;
	border-radius: 10px;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	color: #55516b;
}

.cs-consent-hueco__aviso { margin: 0; max-width: 420px; }
.cs-consent-hueco__host { margin: 0; font-size: 12px; color: #8a85a1; }
.cs-consent-hueco__cargar,
.cs-consent-hueco__ajustes {
	appearance: none; border: 1px solid #cfccdd; background: #ffffff; color: #232133;
	border-radius: 8px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer;
}
.cs-consent-hueco__cargar { border-color: #2366b1; color: #2366b1; }
.cs-consent-hueco__cargar:focus-visible,
.cs-consent-hueco__ajustes:focus-visible { outline: 2px solid #2366b1; outline-offset: 2px; }

@media (max-width: 640px) {
	.cs-consent-banner { padding: 14px 16px; }
	.cs-consent-banner__botones { width: 100%; }
	.cs-consent-boton { flex: 1 1 auto; min-width: 0; }
	.cs-consent-panel__caja { padding: 18px; }
}