/*
 * Tipografía de marca (cookieAz): Archivo, autoalojada — el plugin no debe
 * llamar a Google Fonts en tiempo de ejecución (no envía datos a terceros).
 */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( "../fonts/archivo-400.woff2" ) format( "woff2" );
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url( "../fonts/archivo-700.woff2" ) format( "woff2" );
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url( "../fonts/archivo-800.woff2" ) format( "woff2" );
}

/*
 * Tokens de color: valores por defecto de respaldo (fallback del var()) para
 * que la hoja se vea correcta incluso si el <style id="cookieaz-banner-vars">
 * inline no llegó a imprimirse. Los valores reales vienen de Options y se
 * inyectan como custom properties en Banner::render_banner_markup().
 */
.cookieaz-banner,
#cookieaz-consent-toggle {
	--cookieaz-color-fondo: #f5f0ea;
	--cookieaz-color-texto-cuerpo: #453832;
	--cookieaz-color-texto-titulo: #241c18;
	--cookieaz-color-texto-secundario: #6b5a50;
	--cookieaz-color-borde: #cfcac4;
	--cookieaz-color-boton-borde: #241c18;
	--cookieaz-color-enlace: #a8481a;
	--cookieaz-color-enlace-hover: #8a3a13;
	--cookieaz-color-badge-activo-fondo: transparent;
	--cookieaz-color-badge-activo-texto: #6b5a50;
	--cookieaz-color-interruptor-off: #ffffff;
	--cookieaz-color-interruptor-on: #a8481a;
}

.cookieaz-banner {
	position: fixed;
	z-index: 999999;
	background: var( --cookieaz-color-fondo );
	color: var( --cookieaz-color-texto-cuerpo );
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.55;
	/*
	 * Sin tope de alto, el banner (position:fixed) crece sin límite cuando el
	 * panel de categorías se despliega y puede superar el alto del viewport.
	 * Como el banner mismo no scrollea, el wheel sobre él termina scrolleando
	 * la página detrás. max-height + overflow-y lo vuelve su propio
	 * contenedor de scroll, y overscroll-behavior corta el "chaining" hacia
	 * la página al llegar a su borde.
	 */
	max-height: calc( 100vh - 40px );
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cookieaz-banner[hidden] {
	display: none;
}

/* Variante: barra inferior de ancho completo. */
.cookieaz-banner--barra {
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	padding: 20px;
	border-top: 3px solid var( --cookieaz-color-enlace );
}

/*
 * Variante: tarjeta flotante en esquina inferior DERECHA. El ícono de
 * revocación nunca se solapa con esta tarjeta porque banner.js los muestra
 * de forma mutuamente excluyente (uno oculta al otro), sin importar en qué
 * esquina esté cada uno. Sin padding propio: la cabecera y el cuerpo llevan
 * cada uno el suyo, para que la franja de cabecera llegue de borde a borde.
 */
.cookieaz-banner--flotante {
	right: 20px;
	bottom: 20px;
	left: auto;
	box-sizing: border-box;
	width: min( 380px, calc( 100vw - 40px ) );
	border: 2px solid var( --cookieaz-color-boton-borde );
}

/* Franja de cabecera de la ficha: tinta plena, etiqueta + cerrar. */
.cookieaz-banner__cabecera {
	background: var( --cookieaz-color-boton-borde );
	padding: 11px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.cookieaz-banner__cabecera-etiqueta {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var( --cookieaz-color-fondo );
}

.cookieaz-banner__cerrar--cabecera {
	flex: none;
}

/* Bloque de contenido cerrado (título, texto, botones): reemplazado por el
 * panel de categorías al desplegar, nunca se muestran los dos a la vez. */
.cookieaz-banner__cerrado {
	max-width: 800px;
	margin: 0 auto;
}

.cookieaz-banner--flotante .cookieaz-banner__cerrado {
	max-width: none;
	margin: 0;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.cookieaz-banner__cerrado[hidden] {
	display: none;
}

/* Fila superior de la barra: texto a la izquierda, botones a la derecha. */
.cookieaz-banner__fila {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: flex-start;
}

.cookieaz-banner__fila > .cookieaz-banner__textos {
	flex: 1 1 260px;
}

.cookieaz-banner__textos {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cookieaz-banner__titulo {
	margin: 0;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: 16px;
	color: var( --cookieaz-color-texto-titulo );
}

.cookieaz-banner--flotante .cookieaz-banner__titulo {
	font-size: 19px;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.cookieaz-banner__texto {
	margin: 0;
}

.cookieaz-banner__texto a {
	color: var( --cookieaz-color-enlace-hover );
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cookieaz-banner__texto a:hover {
	color: var( --cookieaz-color-enlace );
}

.cookieaz-banner__botones {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	flex: 0 0 auto;
}

.cookieaz-banner--flotante .cookieaz-banner__botones {
	align-items: stretch;
	gap: 7px;
}

/*
 * "Aceptar todo" (relleno) y "Rechazar todo" (borde) deben medir EXACTAMENTE
 * lo mismo de punta a punta — no solo el mismo padding — para no degradar el
 * rechazo frente al aceptar (Especificacion_Producto sección 3, requisito
 * anti patrón oscuro). box-sizing:border-box mete el borde del secundario
 * dentro del ancho (no se lo suma por fuera) y align-items:stretch en
 * .cookieaz-banner__botones iguala el ancho de ambos al del más ancho.
 *
 * !important en las propiedades de forma/color: estos son elementos
 * <button type="button">, y muchos temas (Hello Elementor, Vara/Bootstrap,
 * etc.) traen un reset global para `button, [type="button"]` con la misma
 * especificidad que una clase — el orden de carga decide el empate y en la
 * práctica el tema gana la mitad de las veces, dejando el banner sin relleno
 * ni bordes en sitios reales. !important saca al banner de esa pelea.
 */
#cookieaz-banner .cookieaz-banner__boton {
	box-sizing: border-box !important;
	display: inline-block !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	text-align: center !important;
}

#cookieaz-banner .cookieaz-banner__boton--primario {
	padding: 11px 18px !important;
	background: var( --cookieaz-color-enlace ) !important;
	border: none !important;
	color: var( --cookieaz-color-fondo ) !important;
}

#cookieaz-banner .cookieaz-banner__boton--primario:hover {
	background: var( --cookieaz-color-enlace-hover ) !important;
}

#cookieaz-banner .cookieaz-banner__boton--secundario {
	padding: 9px 18px !important;
	background: transparent !important;
	border: 2px solid var( --cookieaz-color-boton-borde ) !important;
	color: var( --cookieaz-color-texto-titulo ) !important;
}

/*
 * Control "Elegir por categoría": texto con ícono, sin caja ni borde.
 * Especificidad #cookieaz-banner + clase: algunos temas aplican por JS una
 * clase de efecto hover a TODOS los <button> del sitio (p.ej. temas tipo
 * "The7": .sc_button_hover_slide_left) con !important — empatan en
 * especificidad de clase simple y ganan por ir después en la cascada. El
 * ID del contenedor rompe ese empate a favor del banner.
 */
#cookieaz-banner .cookieaz-banner__enlace-configurar {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 2px !important;
	background: none !important;
	border: none !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	color: var( --cookieaz-color-enlace-hover ) !important;
	cursor: pointer !important;
}

.cookieaz-banner__divisor {
	height: 1px;
	background: var( --cookieaz-color-borde );
	margin-top: 16px;
}

.cookieaz-banner--flotante .cookieaz-banner__divisor {
	margin-top: 13px;
}

.cookieaz-banner__divisor-fuerte {
	height: 2px;
	background: var( --cookieaz-color-boton-borde );
}

/* Encabezado del panel desplegado en la barra: sello + título + cerrar. */
.cookieaz-banner__categorias-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.cookieaz-banner__categorias-titulo {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var( --cookieaz-color-texto-titulo );
}

#cookieaz-banner .cookieaz-banner__cerrar {
	flex: none;
	background: none !important;
	border: none !important;
	padding: 2px !important;
	cursor: pointer !important;
	color: var( --cookieaz-color-texto-secundario ) !important;
	display: flex !important;
}

.cookieaz-banner__categorias {
	max-width: 800px;
	margin: 12px auto 0;
	padding-top: 0;
}

.cookieaz-banner--flotante .cookieaz-banner__categorias {
	max-width: none;
	margin: 0;
	padding: 14px 16px 18px;
}

.cookieaz-banner__categorias[hidden] {
	display: none;
}

.cookieaz-banner__intro-configurar {
	margin: 0 0 8px;
}

/*
 * border-bottom de 2px: la causa real del "fringing" rosado era el canal
 * alfa del color (ver --cookieaz-color-borde), no el grosor — con un color
 * sólido 1px ya no debería mostrarlo, pero se deja en 2px como margen extra
 * de seguridad en pantallas HiDPI.
 */
.cookieaz-categoria {
	border-bottom: 2px solid var( --cookieaz-color-borde );
	padding: 10px 0;
}

#cookieaz-banner .cookieaz-categoria__header {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	font: inherit !important;
	text-align: left !important;
	cursor: pointer !important;
	color: var( --cookieaz-color-texto-titulo ) !important;
}

.cookieaz-categoria__icono {
	flex: none;
	color: var( --cookieaz-color-enlace-hover );
}

.cookieaz-categoria__chevron {
	font-size: 10px;
	color: var( --cookieaz-color-texto-secundario );
	transition: transform 0.15s ease;
}

.cookieaz-categoria__header[aria-expanded="true"] .cookieaz-categoria__chevron {
	transform: rotate( -180deg );
}

.cookieaz-categoria__nombre {
	flex: 1;
	font-size: 13px;
	font-weight: 800;
}

.cookieaz-categoria__panel {
	margin: 10px 0 0 28px;
	color: var( --cookieaz-color-texto-secundario );
	font-size: 12px;
}

.cookieaz-categoria__panel[hidden] {
	display: none;
}

.cookieaz-categoria__panel p {
	margin: 0;
}

/* "Siempre activas": única píldora de texto del sistema — contorno, no relleno. */
.cookieaz-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	border-radius: 999px;
	padding: 5px 10px;
	white-space: nowrap;
	flex: none;
}

.cookieaz-badge--activo {
	background: var( --cookieaz-color-badge-activo-fondo );
	color: var( --cookieaz-color-badge-activo-texto );
	border: 2px solid #a39387;
}

/*
 * Interruptor tipo pill sobre un checkbox real: conserva teclado, foco y
 * "checked" nativos — solo cambia la apariencia. Única forma redondeada del
 * sistema junto con la píldora de arriba.
 *
 * Especificidad reforzada + !important: temas basados en Bootstrap (p.ej.
 * "Vara") traen `input[type="checkbox"]{width:auto!important}` para
 * normalizar checkboxes de formularios. Esa regla ya usa !important Y tiene
 * más especificidad que una simple clase (selector de atributo > clase), así
 * que le gana al interruptor y lo colapsa a un checkbox nativo diminuto.
 * input[type="checkbox"]#cookieaz... con !important iguala especificidad y
 * capa de importancia, y gana el desempate por ir declarado después.
 */
#cookieaz-banner input[type="checkbox"].cookieaz-switch-input {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: none;
	width: 46px !important;
	height: 26px !important;
	box-sizing: border-box !important;
	display: inline-block !important;
	border-radius: 13px !important;
	border: 2px solid var( --cookieaz-color-boton-borde ) !important;
	background: var( --cookieaz-color-interruptor-off ) !important;
	position: relative !important;
	margin: 0 !important;
	cursor: pointer;
	transition: background-color 0.14s ease;
}

.cookieaz-switch-input::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var( --cookieaz-color-boton-borde );
	transition: transform 0.14s ease, background-color 0.14s ease;
}

#cookieaz-banner input[type="checkbox"].cookieaz-switch-input:checked {
	background: var( --cookieaz-color-interruptor-on ) !important;
}

.cookieaz-switch-input:checked::before {
	background: var( --cookieaz-color-fondo );
	transform: translateX( 20px );
}

.cookieaz-switch-input:focus-visible,
.cookieaz-banner__boton:focus-visible,
.cookieaz-banner__enlace-configurar:focus-visible,
.cookieaz-banner__texto a:focus-visible,
.cookieaz-categoria__header:focus-visible,
.cookieaz-banner__cerrar:focus-visible,
.cookieaz-floating-icon:focus-visible {
	outline: 2px solid var( --cookieaz-color-boton-borde );
	outline-offset: 2px;
}

.cookieaz-banner__categorias-footer {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cookieaz-banner__acciones-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cookieaz-banner--flotante .cookieaz-banner__acciones-panel {
	flex-direction: column;
	align-items: stretch;
}

.cookieaz-banner__nota-arcop {
	margin: 0;
	font-size: 11px;
	color: var( --cookieaz-color-texto-secundario );
}

.cookieaz-banner__nota-arcop a {
	color: var( --cookieaz-color-enlace );
}

.cookieaz-banner__nota-arcop a:hover {
	color: var( --cookieaz-color-enlace-hover );
}

/* Firma de marca del Free: "Funciona con cookieAz", siempre visible. */
.cookieaz-banner__atribucion {
	max-width: 800px;
	margin: 10px auto 0;
	text-align: right;
	font-size: 11px;
	color: #5c5a54;
}

.cookieaz-banner--flotante .cookieaz-banner__atribucion {
	margin: 0;
	padding: 0 16px 13px;
	text-align: right;
}

.cookieaz-banner__marca-inline {
	display: inline-flex;
	align-items: center;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: 12px;
	margin-left: 4px;
}

.cookieaz-banner__marca-cookie {
	color: var( --cookieaz-color-texto-titulo );
}

.cookieaz-banner__marca-az {
	color: var( --cookieaz-color-enlace );
}

.cookieaz-banner__marca-link {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.cookieaz-banner__marca-link:hover {
	opacity: 0.8;
}

/*
 * Ícono flotante de revocación (Especificacion_Producto sección 3:
 * "Revocación posterior visible"). Aparece una vez que ya hay consentimiento
 * guardado y el banner principal está oculto; al pulsarlo se reabre el
 * panel de preferencias. Esquina inferior, izquierda o derecha según lo
 * elegido en los ajustes. Variante "B" del sello: disco cobre pleno con los
 * tres chips en papel, sin marco.
 */
#cookieaz-consent-toggle.cookieaz-floating-icon {
	position: fixed !important;
	bottom: 20px !important;
	z-index: 999998 !important;
	box-sizing: border-box !important;
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	border: none !important;
	background: var( --cookieaz-color-enlace, #a8481a ) !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
}

#cookieaz-consent-toggle.cookieaz-floating-icon--izquierda {
	left: 20px !important;
}

#cookieaz-consent-toggle.cookieaz-floating-icon--derecha {
	right: 20px !important;
}

#cookieaz-consent-toggle.cookieaz-floating-icon[hidden] {
	display: none !important;
}

#cookieaz-consent-toggle.cookieaz-floating-icon:hover {
	background: var( --cookieaz-color-enlace-hover, #8a3a13 ) !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.cookieaz-categoria__chevron,
	.cookieaz-switch-input,
	.cookieaz-switch-input::before {
		transition: none;
	}
}

@media ( max-width: 600px ) {
	.cookieaz-banner--barra .cookieaz-banner__botones {
		width: 100%;
	}

	.cookieaz-banner--barra .cookieaz-banner__boton,
	.cookieaz-banner--barra .cookieaz-banner__enlace-configurar {
		width: 100%;
	}

	.cookieaz-banner--flotante {
		width: calc( 100vw - 32px );
	}
}

/* Iframe neutralizado por el motor de bloqueo: oculto hasta que se
 * restaure su src real (aceptar la categoría o pulsar "Cargar contenido"). */
iframe[data-cookieaz-src] {
	display: none;
}

.cookieaz-iframe-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 200px;
	padding: 20px;
	background: #f3f4f6;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	color: #1f2937;
}

.cookieaz-iframe-placeholder p {
	margin: 0;
}

/* Enlaces de pie de página (shortcode [cookieaz_enlaces_cookies]). */
.cookieaz-footer-links {
	font-size: 12px;
}

.cookieaz-footer-links button {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	font: inherit !important;
	color: inherit !important;
	text-decoration: underline !important;
	cursor: pointer !important;
}