/* ==========================================================================
   AVISO DE COOKIES — Bachillerato por Madurez
   Vive junto al mu-plugin (`bxm-cookies.php`), no en el tema: es un componente
   del sitio y tiene que funcionar con cualquier tema.

   Colores tomados de la marca de BXM (`theme.json`) y escritos literales a
   propósito (el mu-plugin no debe depender de los ajustes del tema):
   azul BXM #0078BF, azul de enlace #00619A, azul oscuro/texto #192335,
   blanco #FFFFFF, gris medio #64748B, borde #E2E8F0.

   Contraste verificado (WCAG 2.2, medido, no estimado):
     texto #192335 sobre blanco ............ 15,75:1  pasa AA
     blanco sobre azul BXM #0078BF ......... 4,73:1   pasa AA
     enlace #00619A sobre blanco ........... 6,61:1   pasa AA
     gris medio #64748B sobre blanco ....... 4,76:1   pasa AA
   El naranja de marca #FF6F3C NO se usa: blanco sobre ese naranja mide 2,77:1
   y no pasa AA. Queda pendiente en el resto del sitio, no en este aviso.
   ========================================================================== */

.bxm-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* En una ventana corta (móvil en horizontal, o un teléfono pequeño) el aviso con el
     panel de categorías abierto no cabe: en la versión de Sunset se midió 709 px de alto
     en una ventana de 480 y se salía 229 px por arriba sin forma de llegar a ellos. Se
     limita al 92% de la ventana y se deja desplazar por dentro. `dvh` va después de
     `vh` a propósito: donde el navegador lo entiende, descuenta la barra del móvil. */
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 21-oct-2026 — Z-INDEX CORREGIDO: era 99990.
     El aviso se puso «por encima de todo», pero «todo» incluía el MENÚ DEL ☰, que es un
     modal de navegación: el aviso se dibujaba sobre el pie del panel y se comía las
     últimas entradas del menú. El panel se pinta a z-index 100000, pero VIVE DENTRO del
     header, y el header (su contenedor sticky) está en 10: dentro de ese contexto su
     100000 no compite contra nada de fuera, así que frente al aviso contaba el 10.
     Un aviso de cookies debe ir por encima del CONTENIDO (que no tiene z-index), no por
     encima del header ni de los modales. Con 9 queda por debajo del header (10) y por
     encima del contenido. MEDIDO en el punto de solape: antes ganaba el aviso, ahora
     gana el panel, y el aviso sigue visible en el resto de la página. */
  z-index: 9;
  background-color: #FFFFFF;
  color: #192335;
  border-top: 3px solid #0078BF;
  box-shadow: 0 -6px 24px rgba(25, 35, 53, 0.14);
  font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

/* `hidden` tiene que mandar: el aviso se abre y se cierra desde el JS. */
.bxm-cookies[hidden] {
  display: none;
}

.bxm-cookies-interior {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
}

.bxm-cookies-texto {
  flex: 1 1 460px;
  min-width: 0;
}

.bxm-cookies-texto p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.bxm-cookies-titulo {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.bxm-cookies-texto a {
  color: #00619A;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bxm-cookies-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Botones: alto mínimo de 44px para que se puedan tocar en el teléfono. */
.bxm-cookies-btn {
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 3px;
  border: 1px solid #192335;
  background-color: #FFFFFF;
  color: #192335;
  cursor: pointer;
  text-align: center;
}

.bxm-cookies-btn:hover {
  background-color: #FFFFFF;
  border-color: #00619A;
  color: #00619A;
}

.bxm-cookies-btn-primario {
  background-color: #0078BF;
  border-color: #0078BF;
  color: #FFFFFF;
}

.bxm-cookies-btn-primario:hover {
  background-color: #00619A;
  border-color: #00619A;
  color: #FFFFFF;
}

.bxm-cookies-btn-enlace {
  background-color: transparent;
  border-color: transparent;
  color: #00619A;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding-left: 6px;
  padding-right: 6px;
}

.bxm-cookies-btn-enlace:hover {
  background-color: transparent;
  color: #192335;
}

/* Foco visible: se navega con teclado. */
.bxm-cookies-btn:focus-visible,
.bxm-cookies-texto a:focus-visible,
.bxm-cookies-categoria input:focus-visible {
  outline: 3px solid #0078BF;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Panel de configuración por categoría
   -------------------------------------------------------------------------- */
.bxm-cookies-opciones {
  flex: 1 1 100%;
  border-top: 1px solid #E2E8F0;
  padding-top: 14px;
  margin-top: 2px;
}

.bxm-cookies-opciones[hidden] {
  display: none;
}

.bxm-cookies-categoria {
  margin-bottom: 10px;
}

.bxm-cookies-categoria label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.45;
  cursor: pointer;
}

.bxm-cookies-categoria input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: #0078BF;
}

.bxm-cookies-categoria strong {
  font-weight: 700;
}

.bxm-cookies-nota {
  font-size: 13.5px;
  color: #64748B;
  margin: 12px 0 14px;
  max-width: 720px;
}

/* El botón de la política de cookies reutiliza el estilo del aviso. */
.wp-block-post-content .bxm-cookies-btn,
.entry-content .bxm-cookies-btn {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .bxm-cookies-interior {
    padding: 15px 18px;
    gap: 12px;
  }

  .bxm-cookies-texto,
  .bxm-cookies-botones {
    flex: 1 1 100%;
  }

  .bxm-cookies-botones {
    gap: 8px;
  }

  .bxm-cookies-btn {
    flex: 1 1 auto;
    font-size: 14.5px;
    padding: 10px 14px;
  }
}