/*
 * El aviso de cookies.
 *
 * FIXED NO ES DECORACIÓN, ES LA INVARIANTE 4. El scroll de esta web es paginado:
 * `body` lleva `overflow: hidden`, quien scrollea es `.bb-pager` con
 * `scroll-snap-type: y mandatory`, y las secciones miden `100svh`. Cualquier caja
 * que entre en el flujo suma alto, `revisarAlturas()` lo detecta y afloja el
 * enganche del scroll EN TODA LA WEB. Ya pasó el 22-ago-2026 con otro elemento.
 * Fuera del flujo no puede empujar a nadie.
 *
 * Va abajo y no en el centro a propósito: un modal centrado con la página
 * bloqueada detrás es un muro, y la política prometió que rechazar sería tan
 * fácil como aceptar y que la web seguiría funcionando igual. Desde aquí se
 * puede seguir leyendo y scrolleando sin responder.
 */

.bb-consentimiento {
  position: fixed;
  z-index: 100;
  right: 0;
  bottom: 0;
  left: 0;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  /* Sobre el hueco de la barra del navegador en móvil. */
  padding-bottom: max(clamp(0.75rem, 2vw, 1.25rem), env(safe-area-inset-bottom));
  pointer-events: none;
}

.bb-consentimiento__caja {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: center;
  justify-content: space-between;
  /* NO OCUPA TODO EL ANCHO, Y NO ES ESTÉTICA. El indicador de scroll vive
     centrado abajo (697-743px de 1440 en escritorio). Un aviso a todo lo ancho
     lo tapa, y apartarlo hacia arriba lo deja sobre una zona más oscura del
     aguafuerte donde pierde el contraste: medido el 12-sep-2026, el 22,8% de
     los píxeles de su fondo caían por debajo de 3:1 y falló
     «el indicador se ve sobre el grabado de la portada» en tres perfiles.
     Dejando libre el centro, el indicador se queda donde su contraste ya está
     probado y no hay nada que desplazar.

     El `50% - 4rem` es lo que hace que la regla valga en cualquier ancho y no
     sólo en el del portátil de quien la escribió: 34rem fijos dejaban el aviso
     llegando a 564px en una tablet de 810, donde el indicador empieza en 382.
     Con esto la caja nunca pasa de la mitad de la ventana, así que el centro
     queda libre en escritorio, en tablet y en cualquier tamaño intermedio. */
  max-width: min(34rem, calc(50% - 4rem));
  margin: 0;
  padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.75rem);
  background: var(--wp--preset--color--bb-negro, #111);
  color: var(--wp--preset--color--bb-blanco, #fff);
  /* La marca no usa esquinas redondeadas en ninguna pieza: ver la prueba
     «las bandas no tienen esquinas redondeadas» en navegacion.spec.js. */
  border-radius: 0;
}

.bb-consentimiento__texto {
  flex: 1 1 22rem;
  margin: 0;
  font-size: clamp(0.8rem, 1.6vw, 0.9rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.bb-consentimiento__botones {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
}

.bb-consentimiento__boton {
  /* 44px de alto mínimo: el objetivo táctil que pide WCAG 2.5.5. Un botón de
     rechazar que se falla al pulsar no es un rechazo tan fácil como aceptar. */
  min-height: 2.75rem;
  padding: 0 clamp(0.9rem, 2vw, 1.4rem);
  font: inherit;
  font-size: clamp(0.8rem, 1.6vw, 0.9rem);
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  transition: background-color 160ms ease, color 160ms ease;
}

/* LOS DOS BOTONES PESAN LO MISMO, y es un requisito legal, no una preferencia:
   la AEPD exige que rechazar sea tan accesible como aceptar. Mismo tamaño,
   mismo tipo, mismo contraste. El único acento es el color de marca del sí. */
.bb-consentimiento__boton--si {
  background: var(--wp--preset--color--bb-verde, #ccff00);
  border-color: var(--wp--preset--color--bb-verde, #ccff00);
  color: var(--wp--preset--color--bb-negro, #111);
}

.bb-consentimiento__boton--no:hover,
.bb-consentimiento__boton--no:focus-visible {
  background: var(--wp--preset--color--bb-blanco, #fff);
  color: var(--wp--preset--color--bb-negro, #111);
}

.bb-consentimiento__boton--si:hover,
.bb-consentimiento__boton--si:focus-visible {
  background: var(--wp--preset--color--bb-blanco, #fff);
  border-color: var(--wp--preset--color--bb-blanco, #fff);
}

.bb-consentimiento__boton:focus-visible {
  outline: 2px solid var(--wp--preset--color--bb-naranja, #ff5500);
  outline-offset: 2px;
}

.bb-consentimiento__mas {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(0.72rem, 1.4vw, 0.8rem);
}

.bb-consentimiento__mas a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 40rem) {
  /* En móvil el texto manda y los botones pasan a una fila propia, a ancho
     completo: son el objetivo táctil, no el enlace a la política. */
  .bb-consentimiento__caja {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  /* EL FLEX-BASIS DEL TEXTO HAY QUE ANULARLO AQUÍ, y no es cosmético: en fila
     `flex: 1 1 22rem` pide 22rem de ANCHO, pero al girar a columna el eje
     principal es el vertical y esos 22rem pasan a ser 352px de ALTO. Medido el
     12-sep-2026 en un iPhone 13: el aviso ocupaba 464 de 664 px, el 70% de la
     pantalla, y tapaba la barra de navegación entera —las pruebas de «pulsar
     una banda» no podían ni pulsarla—. Un aviso que tapa la web es el muro que
     la política de privacidad promete que no habrá. */
  .bb-consentimiento__texto {
    flex: 0 0 auto;
  }

  /* En móvil se recupera el ancho completo: `50% - 4rem` dejaría la caja en
     131px en un iPhone 13, ilegible. Aquí el indicador sí se aparta —ver la
     regla de abajo—, y en este tamaño su contraste desplazado pasa. */
  .bb-consentimiento__caja {
    max-width: 100%;
  }

  .bb-consentimiento__botones {
    width: 100%;
  }

  .bb-consentimiento__boton {
    flex: 1 1 0;
  }
}

/* Lo que vive pegado al borde de abajo sube lo que mide el aviso.
 *
 * El indicador de scroll es `position: fixed` con `bottom: clamp(16px, 3vh,
 * 34px)` y caía DENTRO de la caja del aviso en los dos perfiles: el aviso
 * recibía su clic y «pulsar el indicador vuelve al inicio» falló en los siete
 * perfiles de la batería el 12-sep-2026.
 *
 * Se suma a `bottom` y NO se toca `transform`: el indicador lo usa para
 * centrarse (`translateX(-50%)`) y para girar la flecha cuando toca volver
 * arriba (`.bb-indicador--arriba`). Pisarlo habría roto el giro.
 *
 * El alto lo publica `consentimiento.js` en `--bb-alto-aviso`, no una media
 * query con números a mano: el aviso mide 84px en escritorio y 168px en móvil,
 * y eso cambia en cuanto alguien toque el texto. Sin la variable el valor por
 * defecto es 0px, así que si el script no llegara a correr el indicador se
 * queda donde está hoy.
 *
 * `fixed` en los dos, así que nada de esto entra en el flujo ni suma alto a
 * ninguna sección: la invariante 4 no se toca. */
@media (max-width: 40rem) {
  /* Sólo en móvil. Ahí el aviso SÍ ocupa el ancho —el texto no cabe en una
     tarjeta de 34rem en 390px— así que el indicador tiene que apartarse, y en
     ese tamaño el grabado se recorta de otra forma: el contraste del indicador
     desplazado sí pasa (el fallo del 12-sep fue en escritorio y tablet). */
  .bb-con-aviso .bb-indicador {
    bottom: calc(clamp(16px, 3vh, 34px) + var(--bb-alto-aviso, 0px));
  }
}

/* Con el menú de móvil abierto, el aviso se aparta.
 *
 * El menú es un panel a pantalla completa —dos barras de 50dvh, ver scroll.css—
 * y el aviso, fijo abajo con z-index 100, le caía encima tapando dos de los
 * cuatro enlaces. Quien abre el menú está navegando, no decidiendo cookies: el
 * aviso vuelve solo al cerrarlo, y la decisión sigue pendiente.
 *
 * Se hace con `:has()` y no añadiendo una clase desde JavaScript porque el
 * estado ya existe en el DOM (`bb-header--menu-abierto`, que pone scroll.js) y
 * duplicarlo daría dos fuentes para el mismo dato. Es el primer `:has()` del
 * tema; si algún navegador no lo soporta, el aviso se queda encima del menú,
 * que es exactamente lo que pasaba antes: degrada, no rompe.
 */
body:has(.bb-header--menu-abierto) .bb-consentimiento {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

@media (prefers-reduced-motion: reduce) {
  .bb-consentimiento__boton {
    transition: none;
  }
}