/* ==========================================================================
   70 · COOKIEYES
   --------------------------------------------------------------------------
   El aviso de cookies, su centro de preferencias y el botón flotante que lo
   vuelve a abrir. Se carga en todo el sitio mientras el plugin esté activo
   (ver p2080_ctx_cookieyes): el aviso sale en cualquier página hasta que se
   responde, y el botón flotante, después.

   ── POR QUÉ AQUÍ Y NO EN EL PANEL DE COOKIEYES ───────────────────────────
   La versión gratuita no deja cambiar los colores. Y aunque lo dejara, serían
   valores escritos a mano en la base de datos, fuera de theme.json.

   ── UNA SOLA VERSIÓN PARA LAS DOS SUPERFICIES ────────────────────────────
   CookieYes cuelga su marcado del <body>, que ya lleva o no `is-dark`. Todo lo
   de aquí usa los alias semánticos, así que el aviso se adapta solo: tarjeta
   blanca en el blog y tarjeta Canopy en la portada y las landings.

   ── SOBRE EL `body` DELANTE DE CADA SELECTOR ─────────────────────────────
   CookieYes imprime su <style id="cky-style"> al FINAL del <head>, detrás de
   esta hoja, así que gana todos los empates de especificidad. Cada regla
   repite el selector de CookieYes con `body` delante: un punto más, y gana.

   ── SOBRE EL !important ──────────────────────────────────────────────────
   Solo en dos casos. Los colores que CookieYes escribe en el atributo style de
   cada elemento —fondo, texto y borde del aviso, del centro de preferencias y
   de cada botón—, porque un estilo en línea gana a cualquier hoja: es el mismo
   caso que los .fasc-button de 50-blocks.css. Y el anillo de foco, por la
   invariante 6: CookieYes lo pinta en su azul con selectores más largos.

   ── LO QUE NO SE TOCA ────────────────────────────────────────────────────
   La posición, los tamaños y el apilado en móvil son los de CookieYes, que ya
   funcionan; pisarlos obligaría a reescribir sus media queries. Tampoco su
   movimiento: la apertura del centro de preferencias y los interruptores ya
   los frena la red de seguridad de 10-base.css con «reducir movimiento».
   ========================================================================== */

/* Flota sobre la página: en la superficie oscura va sólido y no de cristal,
   por lo mismo que el modal (ver `.is-dark dialog.modal` en 00-tokens.css). */
.is-dark :is(.cky-consent-bar, .cky-modal) {
	--c-bg-raised: var(--c-canopy);
}

/* ==========================================================================
   AVISO
   ========================================================================== */

body .cky-consent-container {
	border-radius: var(--radius-card);
}

body .cky-consent-container .cky-consent-bar {
	border-color: var(--c-border) !important;
	border-radius: var(--radius-card);
	background-color: var(--c-bg-raised) !important;
	box-shadow: var(--shadow-raised-hover);
}

/* En móvil ocupa todo el ancho y se apoya en el borde de la pantalla: las
   esquinas de abajo, redondeadas, dejarían ver la página por los lados. */
@media (max-width: 440px) {
	body .cky-consent-container,
	body .cky-consent-container .cky-consent-bar {
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}
}

body .cky-notice .cky-title {
	color: var(--c-heading) !important;
}

body .cky-notice-des {
	color: var(--c-text) !important;
}

body .cky-notice-des :is(a, button).cky-policy {
	color: var(--c-link);
}

/* ==========================================================================
   BOTONES
   --------------------------------------------------------------------------
   «Aceptar» es el CTA del tema. «Rechazar», «Configurar» y «Guardar mis
   preferencias» son el botón fantasma, pero con el borde fuerte: la AEPD
   pide que rechazar sea tan fácil como aceptar, y con el borde suave del
   fantasma «Rechazar» parecería texto suelto. Mismo tamaño y mismo peso que
   «Aceptar».
   ========================================================================== */

body .cky-btn {
	border-width: 1px;
	border-radius: var(--radius-button);
	font-weight: 700;
}

/* CookieYes atenúa el botón al pasar el ratón. Aquí cada botón tiene su
   propio estado de hover, como en el resto del tema. */
body .cky-btn:hover {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	body .cky-btn {
		transition: background-color var(--t-base), border-color var(--t-base),
			color var(--t-base), box-shadow var(--t-base);
	}
}

/* El fondo de color bajo el degradado es el que deja animar el paso a blanco
   del hover: la misma razón que en .btn--cta (40-components.css). */
body :is(.cky-notice-btn-wrapper, .cky-prefrence-btn-wrapper) .cky-btn-accept {
	border-color: transparent !important;
	background-color: var(--c-cta) !important;
	background-image: var(--g-cta);
	color: var(--c-cta-text) !important;
	box-shadow: var(--shadow-cta);
}

body :is(.cky-notice-btn-wrapper, .cky-prefrence-btn-wrapper) .cky-btn-accept:is(:hover, :focus-visible) {
	border-color: var(--c-cta-line-hover) !important;
	background-image: none;
	background-color: var(--c-cta-bg-hover) !important;
	color: var(--c-cta-text-hover) !important;
	box-shadow: var(--shadow-cta-hover);
}

body :is(.cky-notice-btn-wrapper, .cky-prefrence-btn-wrapper) :is(.cky-btn-reject, .cky-btn-customize, .cky-btn-preferences) {
	border-color: var(--c-border-strong) !important;
	background-color: transparent !important;
	color: var(--c-heading) !important;
}

body :is(.cky-notice-btn-wrapper, .cky-prefrence-btn-wrapper) :is(.cky-btn-reject, .cky-btn-customize, .cky-btn-preferences):hover {
	border-color: var(--c-accent) !important;
	color: var(--c-accent) !important;
}

/* ==========================================================================
   CENTRO DE PREFERENCIAS
   --------------------------------------------------------------------------
   Se viste como el modal del tema: mismo velo, mismo radio, misma sombra.
   Sus separadores heredan el color del borde de .cky-preference-center, así
   que basta con cambiarlo ahí.
   ========================================================================== */

body .cky-overlay {
	background: var(--c-scrim);
	opacity: 1;
}

body .cky-modal {
	border-radius: var(--radius-card);
	background-color: var(--c-bg-raised);
	color: var(--c-text);
	box-shadow: var(--shadow-raised-hover);
}

body .cky-preference-center {
	border-color: var(--c-border) !important;
	border-radius: var(--radius-card);
	background-color: var(--c-bg-raised) !important;
	color: var(--c-text) !important;
}

body :is(.cky-preference-title, .cky-accordion-btn) {
	color: var(--c-heading) !important;
}

body :is(.cky-preference-content-wrapper, .cky-accordion-header-des) {
	color: var(--c-text) !important;
}

body .cky-preference-content-wrapper .cky-show-desc-btn {
	color: var(--c-link);
}

/* La lista se desplaza por dentro. Sin esto, la barra es la del sistema, que
   en la superficie oscura sale blanca. */
body .cky-preference-body-wrapper {
	scrollbar-color: var(--c-border-strong) transparent;
}

/* El aspa es una imagen oscura: sobre Canopy no se vería. */
.is-dark .cky-preference-header .cky-btn-close img {
	filter: invert(1);
}

/* «Siempre activas». El verde de enlace y no el de acento: es texto a 14 px
   y necesita el 4,5:1. */
body .cky-accordion-header .cky-always-active {
	color: var(--c-link) !important;
}

body .cky-audit-table {
	border-color: var(--c-border) !important;
	border-radius: var(--radius-media);
	background-color: var(--c-bg-sunken) !important;
	color: var(--c-text) !important;
}

/* El degradado que funde la lista con los botones del pie. CookieYes lo
   escribe en línea y hacia el blanco, que en la superficie oscura se vería
   como una franja. */
body .cky-footer-shadow {
	background: linear-gradient(transparent, var(--c-bg-raised)) !important;
}

/* Interruptores. Apagado en el gris de texto secundario y no en el de borde:
   un control necesita 3:1 contra su fondo para que se vea que está ahí. */
body .cky-switch input[type="checkbox"] {
	background-color: var(--c-muted);
}

body .cky-switch input[type="checkbox"]:checked {
	background-color: var(--c-accent);
}

/* ==========================================================================
   BOTÓN FLOTANTE
   --------------------------------------------------------------------------
   El que reabre las preferencias tras responder al aviso.
   ========================================================================== */

body .cky-btn-revisit-wrapper {
	background-color: var(--c-accent) !important;
	box-shadow: var(--shadow-raised-hover);
}

body :is(.cky-revisit-bottom-left, .cky-revisit-bottom-right):hover::before {
	background: var(--c-heading);
	color: var(--c-bg);
}

body .cky-revisit-bottom-left:hover::after {
	border-right-color: var(--c-heading);
}

body .cky-revisit-bottom-right:hover::after {
	border-left-color: var(--c-heading);
}

/* ==========================================================================
   FOCO
   ========================================================================== */

body :is(.cky-consent-container, .cky-modal, .cky-btn-revisit-wrapper) :focus-visible {
	outline: var(--focus-width) solid var(--c-focus) !important;
	outline-offset: var(--focus-offset) !important;
}