/* ==========================================================================
   Banner de consentimiento de cookies. BM Premier Solutions, 2026-09-05.

   Archivo propio y no un añadido a home.css a propósito: home.css, style.css y
   tokens.css se desplegaron hoy con el rediseño v6 y los comparte otra sesión
   de trabajo. Un archivo aparte se despliega, se revierte y se lee solo, y el
   día que el banner se retire basta con dejar de enlazarlo.

   Consume los tokens del v6 (--bg-raise, --text, --line, --shadow-3, --accent…),
   así que hereda claro y oscuro sin definir un solo color propio.
   ========================================================================== */

.bm-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 900;              /* por encima de la página, por debajo de nada más:
                                el portal no tiene otras capas fijas */
  display: flex;
  justify-content: center;
  padding: clamp(.75rem, 2vw, 1.25rem);
  pointer-events: none;      /* solo la tarjeta recibe clics, no la franja */
}

.bm-consent[hidden] { display: none; }

.bm-consent-caja {
  pointer-events: auto;
  width: min(64rem, 100%);
  background: var(--bg-raise);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  padding: clamp(1rem, 2.5vw, 1.6rem);
}

.bm-consent-titulo {
  margin: 0 0 .35rem;
  font-family: var(--font-display, inherit);
  font-size: var(--t-1, 1.2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.bm-consent-texto {
  margin: 0 0 1rem;
  color: var(--text-2);
  max-width: 68ch;
}

.bm-consent-texto a { color: inherit; text-underline-offset: 3px; }

/* --- los tres botones ------------------------------------------------------
   Aceptar y Rechazar comparten EL MISMO estilo a propósito: mismo tamaño,
   mismo relleno, mismo borde, misma tipografía, mismo peso visual. Rechazar
   tiene que costar exactamente un clic y llamar exactamente lo mismo que
   aceptar. No es estética, es lo que exigen el RGPD y la ley de Texas: el
   criterio de las autoridades es "mismo formato, mismo tamaño, misma
   legibilidad", y un botón dorado frente a uno gris ya es una diferencia de
   prominencia que se ha multado. Un rechazo apagado convierte al banner en la
   prueba de la infracción.

   Si alguien vuelve a maquetar esto: los dos primeros botones se quedan
   IGUALES. El color de marca vive en "Guardar mi elección", dentro del
   detalle, que no compite con nada. */
.bm-consent-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.bm-consent-acciones .btn { min-height: 44px; }

/* Los dos primeros, idénticos. */
.bm-consent-decidir {
  min-height: 44px;
  padding: .7rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: 600 var(--t-0, 1rem) var(--font-body, inherit);
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.bm-consent-decidir:hover { border-color: var(--accent); background: var(--bg-sink, transparent); }
.bm-consent-decidir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* El tercero es texto, no botón: abre el detalle, no decide nada. */
.bm-consent-mas {
  background: none;
  border: 0;
  padding: .5rem .25rem;
  min-height: 44px;
  color: var(--text-2);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bm-consent-mas:hover { color: var(--text); }

/* --- el detalle de categorías --------------------------------------------- */

.bm-consent-prefs {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.bm-consent-prefs[hidden] { display: none; }

.bm-consent-cat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .8rem;
  align-items: start;
  padding: .7rem 0;
}
.bm-consent-cat + .bm-consent-cat { border-top: 1px solid var(--line-2); }

.bm-consent-cat input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: .15rem 0 0;
  accent-color: var(--accent);
}

.bm-consent-cat-nombre { font-weight: 600; }
.bm-consent-cat-nota { grid-column: 2; margin: .15rem 0 0; color: var(--text-3); font-size: .92em; }

/* Las necesarias no se pueden apagar: se dice y se enseña, no se esconde. */
.bm-consent-fijo {
  grid-column: 1;
  width: 22px;
  text-align: center;
  color: var(--accent-text);
  font-weight: 700;
}

@media (max-width: 560px) {
  .bm-consent-acciones .btn,
  .bm-consent-decidir { flex: 1 1 100%; justify-content: center; text-align: center; }
  .bm-consent-mas { width: 100%; }
}

/* La aparición es un detalle, no un espectáculo: sube un poco y ya. Y con
   "reducir movimiento" no se mueve nada, solo aparece. */
@media (prefers-reduced-motion: no-preference) {
  .bm-consent-caja { animation: bm-consent-entra .28s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes bm-consent-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* El enlace del pie para cambiar de opinión. Obligatorio que exista y que se
   pueda alcanzar desde cualquier página. */
.bm-consent-abrir {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}