/*
 * DSEO Cookie Manager · el banner de consentimiento (fases 3a y 3b), el marcador de un vídeo o un
 * mapa retenido (4b, abajo, colgado de .dseo-cc-embed) y el aviso de un formulario de Contact Form 7
 * con reCAPTCHA retenido (4c, colgado de .dseo-cc-form).
 *
 * Todo cuelga de #dseo-cookie-root para que el tema no se cuele (Divi le da a h2 y a ul márgenes,
 * colores y alturas de línea) y para no tocar nada fuera del banner.
 *
 * ── El diseño (3b) ──────────────────────────────────────────────────────────────────────────────
 *
 * Lo que se elige llega en el `style` de la raíz como variables `--dseo-cc-*` (Consent\Diseno) y en
 * sus clases `dseo-cc--*`. Cada `var()` lleva de respaldo el valor de la 3a: sin variables y sin
 * clases, esto se ve como la 3a.
 *
 * Las clases no pintan nada directamente: dan valor a unas variables propias (`--_cc-*`) en la raíz,
 * y la caja y los botones solo las leen. Así cada regla de la caja tiene la misma especificidad que
 * en la 3a, y una forma, una posición y el móvil se combinan sin pelearse.
 *
 *   bar       a lo ancho, pegada a su borde; el contenido, con max_width (72rem) y centrado
 *   card      una caja con su ancho (width o 32rem), max_width, radio y bordes
 *   floating  una caja pequeña (width o 22rem), con los botones uno debajo de otro
 *   modal     una caja centrada sobre la web oscurecida, siempre centrada; la posición no cuenta
 *
 *   bottom | top | center    abajo, arriba o en medio, centrada a lo ancho
 *   corner                   en una de las cuatro esquinas
 *   custom                   con los cuatro offset; el que no se da, no cuenta
 *
 * `margin` es la distancia a los bordes de la pantalla. En móvil (600 px o menos), `--m-sheet` la
 * lleva abajo y a lo ancho sea cual sea la forma; `--m-same` deja la misma; `--m-stack` apila los
 * botones.
 *
 * Los colores de cada botón (el contrato que usa el validador para los contrastes): `filled` se
 * rellena con `--dseo-cc-<botón>-bg` (el borde también) y su texto va en `--dseo-cc-<botón>-text`;
 * `outline` y `text` NO tienen relleno (se ve el fondo del banner, `--dseo-cc-background`) y su
 * texto, y el borde en `outline`, van en `--dseo-cc-<botón>-text`; `text` además subraya. Los tres
 * estilos miden lo mismo: el borde de 2 px está también cuando no se ve.
 *
 * Contraste de la 3a: texto #1e1e1e sobre #fff (16,7:1); botón principal #fff sobre #1e1e1e (16,7:1);
 * foco #0a58ca sobre #fff (6,4:1). Botones de 44 px de alto como mínimo. Sin animaciones salvo que
 * se elijan, y nunca con prefers-reduced-motion.
 */

#dseo-cookie-root,
#dseo-cookie-root * {
	box-sizing: border-box;
}

#dseo-cookie-root [hidden] {
	display: none !important;
}

/* ── Las variables propias: lo que la forma, la posición y el móvil deciden ────────────────── */

#dseo-cookie-root {
	--_cc-m: var(--dseo-cc-margin, 0px);

	/* Dónde: por defecto, la barra de la 3a, abajo y a lo ancho. */
	--_cc-top: auto;
	--_cc-right: var(--_cc-m);
	--_cc-bottom: var(--_cc-m);
	--_cc-left: var(--_cc-m);
	--_cc-mx: auto;
	--_cc-my: 0;
	--_cc-h: auto;
	--_cc-w: auto;
	--_cc-maxw: none;
	--_cc-innerw: var(--dseo-cc-max-width, 72rem);

	/* Los bordes: la barra de abajo, solo el de arriba. */
	--_cc-bw: var(--dseo-cc-border-width, 1px);
	--_cc-bt: var(--_cc-bw);
	--_cc-br: 0px;
	--_cc-bb: 0px;
	--_cc-bl: 0px;
	--_cc-radius: var(--dseo-cc-radius, 0px);

	/* La sombra, hacia la página: hacia arriba si la capa está abajo. */
	--_cc-sy: -1;
	--_cc-shadow: 0 calc(4px * var(--_cc-sy)) 16px rgba(0, 0, 0, 0.12);
	--_cc-slide: 1.5rem;

	/* Cada botón: relleno, texto, borde y subrayado. Por defecto, los de la 3a: aceptar y rechazar
	   rellenos, configurar con borde. */
	--_cc-accept-bg: var(--dseo-cc-accept-bg, #1e1e1e);
	--_cc-accept-fg: var(--dseo-cc-accept-text, #fff);
	--_cc-accept-bd: var(--dseo-cc-accept-bg, #1e1e1e);
	--_cc-accept-deco: none;
	--_cc-reject-bg: var(--dseo-cc-reject-bg, #1e1e1e);
	--_cc-reject-fg: var(--dseo-cc-reject-text, #fff);
	--_cc-reject-bd: var(--dseo-cc-reject-bg, #1e1e1e);
	--_cc-reject-deco: none;
	--_cc-configure-bg: transparent;
	--_cc-configure-fg: var(--dseo-cc-configure-text, #1e1e1e);
	--_cc-configure-bd: var(--dseo-cc-configure-text, #1e1e1e);
	--_cc-configure-deco: none;
}

/* Las posiciones (para la barra, la tarjeta y la flotante; el modal va siempre en medio). */

#dseo-cookie-root.dseo-cc--pos-top {
	--_cc-top: var(--_cc-m);
	--_cc-bottom: auto;
	--_cc-slide: -1.5rem;
}

#dseo-cookie-root.dseo-cc--pos-center {
	--_cc-top: var(--_cc-m);
	--_cc-bottom: var(--_cc-m);
	--_cc-my: auto;
	--_cc-h: fit-content;
	--_cc-slide: 1rem;
}

#dseo-cookie-root.dseo-cc--corner-bottom-left {
	--_cc-right: auto;
	--_cc-mx: 0;
}

#dseo-cookie-root.dseo-cc--corner-bottom-right {
	--_cc-left: auto;
	--_cc-mx: 0;
}

#dseo-cookie-root.dseo-cc--corner-top-left {
	--_cc-top: var(--_cc-m);
	--_cc-bottom: auto;
	--_cc-right: auto;
	--_cc-mx: 0;
	--_cc-slide: -1.5rem;
}

#dseo-cookie-root.dseo-cc--corner-top-right {
	--_cc-top: var(--_cc-m);
	--_cc-bottom: auto;
	--_cc-left: auto;
	--_cc-mx: 0;
	--_cc-slide: -1.5rem;
}

/* A medida: cada lado, el suyo; el que no se da se queda en auto. */
#dseo-cookie-root.dseo-cc--pos-custom {
	--_cc-top: var(--dseo-cc-offset-top, auto);
	--_cc-right: var(--dseo-cc-offset-right, auto);
	--_cc-bottom: var(--dseo-cc-offset-bottom, auto);
	--_cc-left: var(--dseo-cc-offset-left, auto);
	--_cc-mx: 0;
}

/* Las formas. La barra va siempre de lado a lado, con el borde del lado que da a la página. */

#dseo-cookie-root.dseo-cc--layout-bar {
	--_cc-left: var(--_cc-m);
	--_cc-right: var(--_cc-m);
	--_cc-mx: 0;
}

#dseo-cookie-root.dseo-cc--layout-bar.dseo-cc--pos-top,
#dseo-cookie-root.dseo-cc--layout-bar.dseo-cc--corner-top-left,
#dseo-cookie-root.dseo-cc--layout-bar.dseo-cc--corner-top-right {
	--_cc-bt: 0px;
	--_cc-bb: var(--_cc-bw);
	--_cc-sy: 1;
}

#dseo-cookie-root.dseo-cc--layout-bar.dseo-cc--pos-center {
	--_cc-bb: var(--_cc-bw);
	--_cc-sy: 1;
}

#dseo-cookie-root.dseo-cc--layout-bar.dseo-cc--pos-custom {
	--_cc-left: var(--dseo-cc-offset-left, 0px);
	--_cc-right: var(--dseo-cc-offset-right, 0px);
	--_cc-bb: var(--_cc-bw);
}

/* Tarjeta, flotante y modal: una caja con sus cuatro bordes, que nunca pasa del ancho de la pantalla. */
#dseo-cookie-root.dseo-cc--layout-card,
#dseo-cookie-root.dseo-cc--layout-floating,
#dseo-cookie-root.dseo-cc--layout-modal {
	--_cc-maxw: min(var(--dseo-cc-max-width, 72rem), calc(100% - 2 * var(--_cc-m)));
	--_cc-innerw: none;
	--_cc-bt: var(--_cc-bw);
	--_cc-br: var(--_cc-bw);
	--_cc-bb: var(--_cc-bw);
	--_cc-bl: var(--_cc-bw);
	--_cc-sy: 1;
}

#dseo-cookie-root.dseo-cc--layout-card {
	--_cc-w: var(--dseo-cc-width, 32rem);
}

#dseo-cookie-root.dseo-cc--layout-floating {
	--_cc-w: var(--dseo-cc-width, 22rem);
}

/* El modal, siempre en medio: va dentro de un <dialog> que ocupa la pantalla y la oscurece. */
#dseo-cookie-root.dseo-cc.dseo-cc--layout-modal {
	--_cc-w: var(--dseo-cc-width, 36rem);
	--_cc-top: var(--_cc-m);
	--_cc-right: var(--_cc-m);
	--_cc-bottom: var(--_cc-m);
	--_cc-left: var(--_cc-m);
	--_cc-mx: auto;
	--_cc-my: auto;
	--_cc-h: fit-content;
	--_cc-slide: 1rem;
}

/* La sombra. */

#dseo-cookie-root.dseo-cc--shadow-none {
	--_cc-shadow: none;
}

#dseo-cookie-root.dseo-cc--shadow-strong {
	--_cc-shadow: 0 calc(8px * var(--_cc-sy)) 32px rgba(0, 0, 0, 0.3);
}

/* Los estilos de los botones: relleno solo en filled; el texto, siempre --dseo-cc-<botón>-text. */

#dseo-cookie-root.dseo-cc--accept-filled {
	--_cc-accept-bg: var(--dseo-cc-accept-bg, #1e1e1e);
	--_cc-accept-bd: var(--dseo-cc-accept-bg, #1e1e1e);
	--_cc-accept-deco: none;
}

#dseo-cookie-root.dseo-cc--accept-outline {
	--_cc-accept-bg: transparent;
	--_cc-accept-bd: var(--dseo-cc-accept-text, #fff);
	--_cc-accept-deco: none;
}

#dseo-cookie-root.dseo-cc--accept-text {
	--_cc-accept-bg: transparent;
	--_cc-accept-bd: transparent;
	--_cc-accept-deco: underline;
}

#dseo-cookie-root.dseo-cc--reject-filled {
	--_cc-reject-bg: var(--dseo-cc-reject-bg, #1e1e1e);
	--_cc-reject-bd: var(--dseo-cc-reject-bg, #1e1e1e);
	--_cc-reject-deco: none;
}

#dseo-cookie-root.dseo-cc--reject-outline {
	--_cc-reject-bg: transparent;
	--_cc-reject-bd: var(--dseo-cc-reject-text, #fff);
	--_cc-reject-deco: none;
}

#dseo-cookie-root.dseo-cc--reject-text {
	--_cc-reject-bg: transparent;
	--_cc-reject-bd: transparent;
	--_cc-reject-deco: underline;
}

#dseo-cookie-root.dseo-cc--configure-filled {
	--_cc-configure-bg: var(--dseo-cc-configure-bg, #fff);
	--_cc-configure-bd: var(--dseo-cc-configure-bg, #fff);
	--_cc-configure-deco: none;
}

#dseo-cookie-root.dseo-cc--configure-outline {
	--_cc-configure-bg: transparent;
	--_cc-configure-bd: var(--dseo-cc-configure-text, #1e1e1e);
	--_cc-configure-deco: none;
}

#dseo-cookie-root.dseo-cc--configure-text {
	--_cc-configure-bg: transparent;
	--_cc-configure-bd: transparent;
	--_cc-configure-deco: underline;
}

/* ── Lo común a la primera capa y al centro ─────────────────────────────────────────────────── */

#dseo-cookie-root .dseo-cc-banner,
#dseo-cookie-root .dseo-cc-prefs {
	color: var(--dseo-cc-text, #1e1e1e);
	font-family: var(--dseo-cc-font-family, inherit);
	font-size: var(--dseo-cc-font-size, 1rem);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
}

/* ── Primera capa ───────────────────────────────────────────────────────────────────────────── */

#dseo-cookie-root .dseo-cc-banner {
	position: fixed;
	top: var(--_cc-top);
	right: var(--_cc-right);
	bottom: var(--_cc-bottom);
	left: var(--_cc-left);
	z-index: 2147483000;
	width: var(--_cc-w);
	max-width: var(--_cc-maxw);
	height: var(--_cc-h);
	max-height: var(--dseo-cc-max-height, 70vh);
	overflow: auto;
	margin: var(--_cc-my) var(--_cc-mx);
	padding: var(--dseo-cc-padding, 1rem);
	background: var(--dseo-cc-background, #fff);
	border-style: solid;
	border-color: var(--dseo-cc-border, #c4c4c4);
	border-width: var(--_cc-bt) var(--_cc-br) var(--_cc-bb) var(--_cc-bl);
	border-radius: var(--_cc-radius);
	box-shadow: var(--_cc-shadow);
}

#dseo-cookie-root .dseo-cc-inner {
	max-width: var(--_cc-innerw);
	margin: 0 auto;
}

/* La flotante es estrecha: los botones, uno debajo de otro y del mismo ancho. */
#dseo-cookie-root.dseo-cc--layout-floating .dseo-cc-banner {
	--_cc-dir: column;
	--_cc-btnw: 100%;
	--_cc-btnmin: 0px;
}

/*
 * El modal: el <dialog> ocupa la pantalla, transparente salvo el oscurecido, y la primera capa va
 * dentro con su posición de siempre. Así se ve igual dentro y fuera del diálogo (en el diseñador, que
 * no lo usa para no mover el foco de la pestaña, el oscurecido lo pone .dseo-cc-veil).
 */
#dseo-cookie-root .dseo-cc-modal {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: rgba(0, 0, 0, var(--dseo-cc-overlay-opacity, 0.5));
	color: inherit;
}

#dseo-cookie-root .dseo-cc-modal:not([open]) {
	display: none;
}

#dseo-cookie-root .dseo-cc-modal::backdrop {
	background: transparent;
}

/* El fondo oscurecido sin <dialog>: el de una forma no modal, que no bloquea nada (no recibe clics y
   se aparta en cuanto el foco sale a la página), y el del modal en el diseñador. */
#dseo-cookie-root.dseo-cc-veil::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2147482999;
	background: rgba(0, 0, 0, var(--dseo-cc-overlay-opacity, 0.5));
	pointer-events: none;
}

/* Las animaciones, solo al aparecer. Con prefers-reduced-motion, ninguna (abajo). */

@keyframes dseo-cc-fade {
	from {
		opacity: 0;
	}
}

@keyframes dseo-cc-slide {
	from {
		opacity: 0;
		transform: translateY(var(--_cc-slide, 1.5rem));
	}
}

#dseo-cookie-root.dseo-cc--anim-fade .dseo-cc-banner {
	animation: dseo-cc-fade 0.25s ease-out;
}

#dseo-cookie-root.dseo-cc--anim-slide .dseo-cc-banner {
	animation: dseo-cc-slide 0.3s ease-out;
}

#dseo-cookie-root .dseo-cc-brand {
	margin: 0 0 0.5rem;
	padding: 0;
	line-height: 0;
}

#dseo-cookie-root .dseo-cc-logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--dseo-cc-logo-height, 32px);
	margin: 0;
	object-fit: contain;
	object-position: left center;
}

#dseo-cookie-root .dseo-cc-title {
	margin: 0 0 0.5rem;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.3;
}

#dseo-cookie-root .dseo-cc-message,
#dseo-cookie-root .dseo-cc-intro,
#dseo-cookie-root .dseo-cc-cat-desc,
#dseo-cookie-root .dseo-cc-empty {
	margin: 0 0 0.75rem;
	padding: 0;
	color: inherit;
	font-size: 1em;
	line-height: 1.5;
}

#dseo-cookie-root .dseo-cc-preview {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.25rem 0.5rem;
	background: #fff3cd;
	color: #4d3800;
	font-size: 0.875rem;
	line-height: 1.4;
}

/* En la vista previa, cuando no hay nada que preguntar: un aviso abajo, encima del botón flotante. */
#dseo-cookie-root .dseo-cc-preview-empty {
	position: fixed;
	right: 1rem;
	bottom: calc(var(--dseo-cc-reopen-y, 4rem) + 3.5rem);
	left: 1rem;
	z-index: 2147483000;
	display: block;
	max-width: 40rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#dseo-cookie-root .dseo-cc-link {
	color: var(--dseo-cc-link, #1e1e1e);
	text-decoration: underline;
}

/* ── Botones: del mismo tamaño en los tres estilos ─────────────────────────────────────────── */

#dseo-cookie-root .dseo-cc-actions {
	display: flex;
	flex-direction: var(--_cc-dir, row);
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
}

#dseo-cookie-root .dseo-cc-btn {
	flex: 0 1 auto;
	width: var(--_cc-btnw, auto);
	/* Nunca más ancho que su sitio: a 320 px y con letra grande, el botón crece hacia abajo. */
	min-width: min(var(--_cc-btnmin, 9rem), 100%);
	min-height: 44px;
	margin: 0;
	padding: 0.625rem 1.25rem;
	border: 2px solid transparent;
	border-radius: var(--dseo-cc-button-radius, 4px);
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	cursor: pointer;
}

#dseo-cookie-root [data-dseo-cc="accept"],
#dseo-cookie-root [data-dseo-cc="accept-all"] {
	background: var(--_cc-accept-bg);
	color: var(--_cc-accept-fg);
	border-color: var(--_cc-accept-bd);
	text-decoration: var(--_cc-accept-deco);
}

#dseo-cookie-root [data-dseo-cc="reject"],
#dseo-cookie-root [data-dseo-cc="reject-all"] {
	background: var(--_cc-reject-bg);
	color: var(--_cc-reject-fg);
	border-color: var(--_cc-reject-bd);
	text-decoration: var(--_cc-reject-deco);
}

#dseo-cookie-root [data-dseo-cc="configure"],
#dseo-cookie-root [data-dseo-cc="save"] {
	background: var(--_cc-configure-bg);
	color: var(--_cc-configure-fg);
	border-color: var(--_cc-configure-bd);
	text-decoration: var(--_cc-configure-deco);
}

#dseo-cookie-root .dseo-cc-textbtn {
	min-height: 44px;
	margin: 0;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--dseo-cc-text, #1e1e1e);
	font-family: inherit;
	font-size: 1em;
	text-decoration: underline;
	cursor: pointer;
}

#dseo-cookie-root .dseo-cc-btn:focus-visible,
#dseo-cookie-root .dseo-cc-textbtn:focus-visible,
#dseo-cookie-root .dseo-cc-link:focus-visible,
#dseo-cookie-root .dseo-cc-check:focus-visible,
#dseo-cookie-root summary:focus-visible,
#dseo-cookie-root .dseo-cc-reopen:focus-visible,
#dseo-cookie-root .dseo-cc-title:focus-visible {
	outline: 3px solid var(--dseo-cc-focus, #0a58ca);
	outline-offset: 2px;
}

/* ── Centro de preferencias ────────────────────────────────────────────────────────────────── */

#dseo-cookie-root .dseo-cc-prefs {
	width: calc(100% - 2rem);
	max-width: 40rem;
	max-height: calc(100% - 2rem);
	margin: auto;
	padding: 0;
	overflow: auto;
	background: var(--dseo-cc-background, #fff);
	border: 0;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

#dseo-cookie-root .dseo-cc-prefs:not([open]) {
	display: none;
}

#dseo-cookie-root .dseo-cc-prefs[open] {
	display: block;
}

/* Sin <dialog> nativo, o en el diseñador: el script pone `open` y esta clase, y se pinta encima igual. */
#dseo-cookie-root .dseo-cc-prefs.dseo-cc-fallback[open] {
	position: fixed;
	top: 1rem;
	right: 0;
	left: 0;
	z-index: 2147483001;
}

#dseo-cookie-root .dseo-cc-prefs::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

#dseo-cookie-root .dseo-cc-prefs-inner {
	padding: 1.5rem;
}

#dseo-cookie-root .dseo-cc-cats {
	margin: 0.5rem 0 0;
}

#dseo-cookie-root .dseo-cc-cat {
	padding: 0.75rem 0;
	border-top: 1px solid var(--dseo-cc-border, #d6d6d6);
}

#dseo-cookie-root .dseo-cc-cat-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 0.25rem;
}

#dseo-cookie-root .dseo-cc-cat-title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: 1.0625em;
	font-weight: 700;
	line-height: 1.3;
	cursor: default;
}

#dseo-cookie-root .dseo-cc-cat-title label {
	color: inherit;
	font: inherit;
	cursor: pointer;
}

#dseo-cookie-root .dseo-cc-check {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--dseo-cc-text, #1e1e1e);
	cursor: pointer;
}

#dseo-cookie-root .dseo-cc-always {
	padding: 0.125rem 0.5rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.875em;
	font-weight: 600;
}

#dseo-cookie-root .dseo-cc-details summary {
	display: list-item;
	padding: 0.25rem 0;
	cursor: pointer;
	text-decoration: underline;
}

#dseo-cookie-root .dseo-cc-services {
	margin: 0.25rem 0 0.5rem;
	padding: 0 0 0 1.25rem;
	list-style: disc;
	font-size: 0.9375em;
	line-height: 1.5;
}

/* Va dentro de un servicio: ya tiene su letra. */
#dseo-cookie-root .dseo-cc-storage {
	margin: 0.25rem 0 0.5rem;
	padding: 0 0 0 1.25rem;
	list-style: disc;
	font-size: 1em;
	line-height: 1.5;
}

#dseo-cookie-root .dseo-cc-services > li,
#dseo-cookie-root .dseo-cc-storage > li {
	margin: 0.25rem 0;
	padding: 0;
}

#dseo-cookie-root .dseo-cc-service-name {
	font-weight: 600;
}

#dseo-cookie-root code {
	padding: 0 0.25rem;
	background: #f0f0f0;
	background: color-mix(in srgb, var(--dseo-cc-text, #1e1e1e) 7%, var(--dseo-cc-background, #fff));
	color: inherit;
	font-size: 0.9333em;
}

#dseo-cookie-root .dseo-cc-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.25rem;
	margin: 0.75rem 0 0;
}

/* ── El botón para volver a abrir ──────────────────────────────────────────────────────────── */

/* Por defecto, a 64 px del borde de abajo y no a 16: abajo a la izquierda suele estar el sello de
   reCAPTCHA, y lo tapaba (informaticoadomiciliomurcia.com, 05/10/2026). La esquina y la distancia se
   eligen en el diseño (reopen). */
#dseo-cookie-root .dseo-cc-reopen {
	position: fixed;
	right: auto;
	bottom: var(--dseo-cc-reopen-y, 4rem);
	left: var(--dseo-cc-reopen-x, 1rem);
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--dseo-cc-reopen-icon, #fff);
	border-radius: 50%;
	background: var(--dseo-cc-reopen-bg, #1e1e1e);
	color: var(--dseo-cc-reopen-icon, #fff);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

#dseo-cookie-root.dseo-cc--reopen-bottom-right .dseo-cc-reopen {
	right: var(--dseo-cc-reopen-x, 1rem);
	left: auto;
}

/* El anillo de foco del botón flotante, con un halo del fondo del banner por los dos lados: se ve
   igual sobre un pie oscuro que sobre uno claro (6,4:1 con los colores de la 3a). */
#dseo-cookie-root .dseo-cc-reopen:focus-visible {
	box-shadow: 0 0 0 8px var(--dseo-cc-background, #fff);
}

#dseo-cookie-root .dseo-cc-icon {
	display: block;
	width: 24px;
	height: 24px;
}

/* En la vista previa van los cinco iconos del botón flotante, y se ve el de la clase de la raíz: la
   pestaña del diseño lo cambia en vivo cambiando solo las clases. Fuera de ella va uno, sin esta clase. */
#dseo-cookie-root .dseo-cc-icon-opcion {
	display: none;
}

#dseo-cookie-root.dseo-cc--reopen-icon-cookie .dseo-cc-icon--cookie,
#dseo-cookie-root.dseo-cc--reopen-icon-crumbs .dseo-cc-icon--crumbs,
#dseo-cookie-root.dseo-cc--reopen-icon-chips .dseo-cc-icon--chips,
#dseo-cookie-root.dseo-cc--reopen-icon-outline .dseo-cc-icon--outline,
#dseo-cookie-root.dseo-cc--reopen-icon-outline-crumbs .dseo-cc-icon--outline-crumbs {
	display: block;
}

#dseo-cookie-root .dseo-cc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── El marcador de un vídeo o un mapa retenido (4b) ──────────────────────────────────────────
 *
 * Lo pinta `retencion.js` en el hueco del iframe, en mitad de la página y fuera de
 * #dseo-cookie-root: por eso cuelga de su clase, con dos clases en cada regla para ganarle al tema.
 * Lleva en su `style` las variables del diseño del banner (sus colores y su letra) y, en línea, las
 * medidas, la posición y los márgenes del iframe: el `display` y el tamaño de aquí son solo el
 * respaldo. No pide nada a nadie: ni imágenes, ni fuentes.
 *
 * El botón va con el texto y el fondo del banner intercambiados: el contraste es el mismo que el del
 * texto sobre el fondo, que el validador ya exige (4,5:1), sea cual sea el estilo de los botones del
 * banner. El enlace, con el color de los enlaces del banner; el foco, con el del banner.
 */

.dseo-cc-embed,
.dseo-cc-embed * {
	box-sizing: border-box;
}

.dseo-cc-embed.dseo-cc-embed {
	display: block;
	position: static;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: auto;
	background: var(--dseo-cc-background, #fff);
	color: var(--dseo-cc-text, #1e1e1e);
	border: var(--dseo-cc-border-width, 1px) solid var(--dseo-cc-border, #c4c4c4);
	border-radius: var(--dseo-cc-radius, 0px);
	box-shadow: none;
	font-family: var(--dseo-cc-font-family, inherit);
	font-size: var(--dseo-cc-font-size, 1rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.dseo-cc-embed [hidden] {
	display: none !important;
}

/* El contenido, en medio de la caja; si no cabe, la caja se desplaza y se empieza por arriba. */
.dseo-cc-embed .dseo-cc-embed-inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	margin: 0;
	padding: 1rem;
}

.dseo-cc-embed .dseo-cc-embed-body {
	width: 100%;
	max-width: 36rem;
	margin: auto;
	padding: 0;
}

.dseo-cc-embed .dseo-cc-embed-name,
.dseo-cc-embed .dseo-cc-embed-notice,
.dseo-cc-embed .dseo-cc-embed-cats {
	margin: 0 0 0.5rem;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

.dseo-cc-embed .dseo-cc-embed-name {
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.3;
}

.dseo-cc-embed .dseo-cc-embed-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin: 0.75rem 0 0;
	padding: 0;
}

.dseo-cc-embed .dseo-cc-embed-allow {
	display: inline-block;
	width: auto;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 0.625rem 1.25rem;
	border: 2px solid var(--dseo-cc-text, #1e1e1e);
	border-radius: var(--dseo-cc-button-radius, 4px);
	background: var(--dseo-cc-text, #1e1e1e);
	color: var(--dseo-cc-background, #fff);
	box-shadow: none;
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: none;
}

.dseo-cc-embed .dseo-cc-embed-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0;
	color: var(--dseo-cc-link, #1e1e1e);
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	text-decoration: underline;
	transition: none;
}

.dseo-cc-embed .dseo-cc-embed-allow:focus-visible,
.dseo-cc-embed .dseo-cc-embed-link:focus-visible {
	outline: 3px solid var(--dseo-cc-focus, #0a58ca);
	outline-offset: 2px;
}

.dseo-cc-embed .dseo-cc-embed-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── El aviso de un formulario de Contact Form 7 (4c) ─────────────────────────────────────────
 *
 * Lo pinta `retencion.js` justo antes del botón de enviar de cada formulario mientras reCAPTCHA está
 * retenido. Como el marcador: fuera de #dseo-cookie-root, con dos clases en cada regla, con las
 * variables del diseño del banner en su `style`, y el botón con el texto y el fondo del banner
 * intercambiados (el contraste que el validador ya exige). No pide nada a nadie.
 *
 * Cuando se para un envío, el aviso se marca (`--needed`: un anillo con el color del foco del banner,
 * sin cambiar de tamaño) y recibe el foco por código: por eso su contorno va en `:focus` y no solo en
 * `:focus-visible`, que tras un clic en «Enviar» no saldría.
 */

.dseo-cc-form,
.dseo-cc-form * {
	box-sizing: border-box;
}

.dseo-cc-form.dseo-cc-form {
	display: block;
	position: static;
	width: auto;
	max-width: 100%;
	height: auto;
	min-width: 0;
	margin: 0 0 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--dseo-cc-background, #fff);
	color: var(--dseo-cc-text, #1e1e1e);
	border: var(--dseo-cc-border-width, 1px) solid var(--dseo-cc-border, #c4c4c4);
	border-radius: var(--dseo-cc-radius, 0px);
	box-shadow: none;
	font-family: var(--dseo-cc-font-family, inherit);
	font-size: var(--dseo-cc-font-size, 1rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.dseo-cc-form.dseo-cc-form--needed {
	box-shadow: 0 0 0 2px var(--dseo-cc-focus, #0a58ca);
}

.dseo-cc-form.dseo-cc-form:focus {
	outline: 3px solid var(--dseo-cc-focus, #0a58ca);
	outline-offset: 2px;
}

.dseo-cc-form .dseo-cc-form-notice,
.dseo-cc-form .dseo-cc-form-error {
	margin: 0 0 0.5rem;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

.dseo-cc-form .dseo-cc-form-error {
	font-weight: 700;
}

.dseo-cc-form .dseo-cc-form-allow {
	display: inline-block;
	width: auto;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 0.625rem 1.25rem;
	border: 2px solid var(--dseo-cc-text, #1e1e1e);
	border-radius: var(--dseo-cc-button-radius, 4px);
	background: var(--dseo-cc-text, #1e1e1e);
	color: var(--dseo-cc-background, #fff);
	box-shadow: none;
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: none;
}

.dseo-cc-form .dseo-cc-form-allow:focus-visible {
	outline: 3px solid var(--dseo-cc-focus, #0a58ca);
	outline-offset: 2px;
}

/* ── Móvil ─────────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	/* Abajo y a lo ancho, sea cual sea la forma (también el modal, que sigue siendo modal). */
	#dseo-cookie-root.dseo-cc.dseo-cc--m-sheet {
		--_cc-top: auto;
		--_cc-right: 0px;
		--_cc-bottom: 0px;
		--_cc-left: 0px;
		--_cc-mx: 0;
		--_cc-my: 0;
		--_cc-h: auto;
		--_cc-w: auto;
		--_cc-maxw: none;
		--_cc-innerw: none;
		--_cc-bt: var(--_cc-bw);
		--_cc-br: 0px;
		--_cc-bb: 0px;
		--_cc-bl: 0px;
		--_cc-radius: var(--dseo-cc-radius, 0px) var(--dseo-cc-radius, 0px) 0 0;
		--_cc-sy: -1;
		--_cc-slide: 1.5rem;
	}

	/* Los botones uno debajo de otro, todos del mismo ancho: en la primera capa y en el centro. */
	#dseo-cookie-root.dseo-cc--m-stack {
		--_cc-dir: column;
		--_cc-btnw: 100%;
		--_cc-btnmin: 0px;
	}

	#dseo-cookie-root .dseo-cc-prefs-inner {
		padding: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	#dseo-cookie-root,
	#dseo-cookie-root *,
	#dseo-cookie-root::before,
	.dseo-cc-embed,
	.dseo-cc-embed *,
	.dseo-cc-form,
	.dseo-cc-form * {
		transition: none !important;
		animation: none !important;
	}
}

/* Modo de alto contraste de Windows: que los bordes, también los de un botón de estilo texto, y el
   borde de la primera capa, del marcador y del aviso del formulario sigan viéndose. La marca del aviso
   va en una sombra, que ese modo quita: allí, un contorno. */
@media (forced-colors: active) {
	#dseo-cookie-root .dseo-cc-btn,
	#dseo-cookie-root .dseo-cc-reopen,
	.dseo-cc-embed .dseo-cc-embed-allow,
	.dseo-cc-form .dseo-cc-form-allow {
		border: 2px solid ButtonText;
	}

	#dseo-cookie-root .dseo-cc-banner,
	.dseo-cc-embed.dseo-cc-embed,
	.dseo-cc-form.dseo-cc-form {
		border: 1px solid CanvasText;
	}

	.dseo-cc-form.dseo-cc-form--needed {
		outline: 2px solid Highlight;
	}
}

@media print {
	#dseo-cookie-root {
		display: none !important;
	}
}