/* Aviso de cookies con la marca (tarea 2.16, RB.7; manual, sección 12.10).

   Venía con el magenta de la identidad anterior (#E0007C), Poppins escrita a
   mano, grises de Bootstrap y 8 px de radio, en todas las páginas del sitio
   (P-04). Ahora es una hoja inferior de cristal Regular con «Entendido» como
   acción primaria.

   Cuándo sale y qué dice: M3.8, decisión M7.12 (partials/aviso_cookies.html).
   Lo pinta el servidor sólo a quien no ha contestado, así que no nace oculto.
   El lanzador flotante y los botones «Denegar» y «Ver preferencias» se fueron:
   no había nada que denegar. */

#cookie-consent-banner[hidden] {
  display: none;
}

/* Mientras el aviso está a la vista, la página deja debajo el sitio que ocupa,
   para que lo último se pueda subir por encima. Sin ese hueco, en el teléfono el
   aviso tapaba el botón «Entrar» del acceso y el de «Crear mi cuenta» del
   registro aunque se bajara hasta el final. La altura la mide
   static/js/cookie_consent.js. Sólo cuando flota: sin JavaScript no flota
   (AL-81) y no hace falta hueco. */
body:has(#cookie-consent-banner.cookie-banner--flotante:not([hidden])) {
  padding-bottom: var(--lb-aviso-cookies-hueco, 18rem);
}

/* Los avisos emergentes (sección 12.9) salen también abajo al centro: se le ponían encima y
   tapaban su texto y «Entendido», y el consentimiento tiene que poder darse (AL-205). Mientras
   flota, salen por encima de él, con el mismo hueco que mide el guion. */
body:has(#cookie-consent-banner.cookie-banner--flotante:not([hidden])) .lb-toasts {
  bottom: var(--lb-aviso-cookies-hueco, 18rem);
}

/* Sin JavaScript va al final de la página, en su sitio (AL-81): fijo tapaba el
   contenido y, sin JS, no se podía cerrar hasta que «Entendido» pasó a ser un
   formulario. */
#cookie-consent-banner {
  /* El relleno, dentro del ancho. La pantalla de acceso no carga Bootstrap, que
     lo pone en el resto: allí, a 390, el aviso medía 408 px y se cortaba 9 px por
     cada lado; sin JS, en el flujo, además hacía scroll a lo ancho (AL-81). */
  box-sizing: border-box;
  width: calc(100% - 2 * var(--lb-space-4));
  max-width: 720px;
  margin: var(--lb-space-5) auto;
  padding: var(--lb-space-6);
  border: 1px solid var(--lb-glass-border);
  border-radius: var(--lb-radius-xl);
  background: var(--lb-glass-regular-bg);
  -webkit-backdrop-filter: var(--lb-glass-filter);
  backdrop-filter: var(--lb-glass-filter);
  box-shadow: var(--lb-glass-highlight), var(--lb-e4);
  color: var(--lb-text-primary);
  font-family: var(--lb-font);
}

/* Con JavaScript flota abajo, sobre la página: el guion le pone la clase. */
#cookie-consent-banner.cookie-banner--flotante {
  position: fixed;
  bottom: var(--lb-space-5);
  left: 50%;
  z-index: 1051;
  margin: 0;
  transform: translateX(-50%);
}

/* Sin cristal (navegador antiguo o transparencia reducida): superficie sólida */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #cookie-consent-banner {
    background: var(--lb-glass-fallback);
  }
}

@media (prefers-reduced-transparency: reduce) {
  #cookie-consent-banner {
    background: var(--lb-glass-fallback);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.cookie-banner-content {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
}

.cookie-banner-content p {
  margin: 0;
  font-size: var(--lb-fs-body-sm);
  line-height: var(--lb-lh-body-sm);
  color: var(--lb-text-secondary);
}

.cookie-banner-content p strong {
  display: block;
  margin-bottom: var(--lb-space-1);
  font-size: var(--lb-fs-body);
  line-height: var(--lb-lh-body);
  font-weight: 600;
  color: var(--lb-text-primary);
}

.cookie-banner-content p a {
  color: var(--lb-text-link);
}

.cookie-banner-content p a:hover {
  color: var(--lb-text-link-hover);
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lb-space-2);
}

/* «Entendido». Con Bootstrap es un .btn y basta con sus variables; la pantalla
   de acceso no carga Bootstrap, y ahí salía como una barra gris sin forma: por
   eso lleva también el aspecto completo, sin depender de él. */
#cookie-accept-btn {
  --bs-btn-color: var(--lb-text-on-accent);
  --bs-btn-bg: var(--lb-accent);
  --bs-btn-border-color: var(--lb-accent);
  --bs-btn-hover-color: var(--lb-text-on-accent);
  --bs-btn-hover-bg: var(--lb-accent-hover);
  --bs-btn-hover-border-color: var(--lb-accent-hover);
  min-height: 40px;
  padding: 0 var(--lb-space-5);
  border: 0;
  border-radius: var(--lb-radius-full);
  background-color: var(--lb-accent);
  color: var(--lb-text-on-accent);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

#cookie-accept-btn:hover {
  background-color: var(--lb-accent-hover);
}

#cookie-accept-btn:focus-visible {
  outline: 0;
  box-shadow: var(--lb-focus-ring);
}

@media (max-width: 479.98px) {
  .cookie-banner-actions .btn {
    flex: 1 1 100%;
  }
}

/* En la web pública (AL-354): recogido en una esquina, como el de la web antigua, no en una barra
   ancha abajo. Sin JavaScript sigue al final de la página, en su sitio. */
#cookie-consent-banner.cookie-banner--esquina {
  max-width: 400px;
  padding: var(--lb-space-5);
  border-radius: var(--lb-radius-lg);
}

#cookie-consent-banner.cookie-banner--esquina.cookie-banner--flotante {
  left: max(var(--lb-space-5), env(safe-area-inset-left, 0px));
  bottom: max(var(--lb-space-5), env(safe-area-inset-bottom, 0px));
  width: calc(100% - 2 * var(--lb-space-4));
  transform: none;
}

.cookie-banner--esquina .cookie-banner-content {
  position: relative;
  gap: var(--lb-space-3);
}

.cookie-banner--esquina .cookie-esquina__titulo {
  padding-right: var(--lb-space-6);
  font-size: var(--lb-fs-body);
  font-weight: 600;
  color: var(--lb-text-primary);
}

.cookie-esquina__cerrar {
  position: absolute;
  top: calc(-1 * var(--lb-space-2));
  right: calc(-1 * var(--lb-space-2));
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--lb-radius-full);
  background: transparent;
  color: var(--lb-text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.cookie-esquina__cerrar:hover {
  color: var(--lb-text-primary);
}

.cookie-esquina__cerrar:focus-visible {
  outline: 0;
  box-shadow: var(--lb-focus-ring);
}

.cookie-banner--esquina .cookie-esquina__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-1) var(--lb-space-4);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}