/* =====================================================================
   EL AVISO DE COOKIES

   Va donde no tapa nada: abajo, pegado al borde, ANCHO LIMITADO. Un
   aviso a pantalla completa con el fondo oscurecido es la forma más
   rápida de que alguien que venía a ver una demostración se vaya sin
   verla.

   LAS DOS RESPUESTAS SE VEN IGUAL DE BIEN. «Solo lo necesario» no está
   escondido en gris claro ni más pequeño que «Aceptar»: un botón de
   rechazo que cuesta encontrar no es un consentimiento válido, y encima
   se nota.

   TODO POR TOKENS, con su valor de respaldo detrás: así el modo oscuro
   sale solo y el día que cambie el azul de la marca, cambia esto también.
   ===================================================================== */

.nx-cookies {
  position: fixed;
  z-index: 60;                      /* encima de la página, debajo de los modales */
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  margin-inline: auto;
  max-width: 44rem;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.1rem;

  padding: .95rem 1.15rem;
  border: 1px solid var(--borde, #e4e8ef);
  border-radius: 14px;
  background: var(--superficie, #fff);
  box-shadow: 0 10px 34px rgba(13, 20, 36, .16);

  /* Aparece sin sobresaltar: sube un dedo y se queda. Y si el visitante
     pidió menos movimiento en su sistema, no se mueve —ver más abajo—. */
  animation: nxCookiesEntra .22s ease-out both;
}

@keyframes nxCookiesEntra {
  from { opacity: 0; transform: translateY(.6rem); }
  to   { opacity: 1; transform: none; }
}

.nx-cookies__texto {
  flex: 1 1 22rem;
  min-width: 0;                     /* si no, el texto largo empuja los botones fuera */
  margin: 0;
  font-size: 13.4px;
  line-height: 1.55;
  color: var(--tinta-2, #475569);
}

.nx-cookies__botones {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.nx-cookies__btn {
  flex: 0 0 auto;
  padding: .5rem .95rem;
  border-radius: 9px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 13.4px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.nx-cookies__btn--si {
  background: var(--marca, #1d4ed8);
  border-color: var(--marca, #1d4ed8);
  color: #fff;
}

.nx-cookies__btn--si:hover { background: var(--marca-hover, #1a43bb); }

/* MISMO TAMAÑO Y MISMO PESO que «Aceptar»: solo cambia el relleno. */
.nx-cookies__btn--no {
  background: transparent;
  border-color: var(--borde-fuerte, #d3d9e3);
  color: var(--tinta, #0f172a);
}

.nx-cookies__btn--no:hover {
  border-color: var(--tinta-3, #7c8899);
  background: var(--superficie-2, #fafbfd);
}

.nx-cookies__btn:focus-visible {
  outline: 2px solid var(--marca, #1d4ed8);
  outline-offset: 2px;
}

/* EN EL TELEFONO OCUPA LO MINIMO, y no es cosmetica: es un recuadro fijo
   encima de la pagina, y lo que tape sera lo que la persona iba a pulsar.
   Se vio: con el texto largo tapaba «Entrar a esta demostracion», que es
   justo el boton que paga el anuncio.

   Los botones se estiran porque son dos, y uno a lo ancho se acierta con
   el pulgar sin mirar. */
/* EN EL TELEFONO ES UNA BARRA, no un recuadro flotante.

   El primer día de campaña Meta reportó 173 visitas y el píxel registró
   8. La sospecha principal era esta pantalla: un recuadro encima de lo
   que la persona vino a ver se ignora, y sin respuesta NO SE MIDE NADA.

   Pegada al borde, a todo lo ancho y sin esquinas redondeadas abajo,
   ocupa lo mínimo. Dos líneas de texto y los dos botones en su fila.

   `env(safe-area-inset-bottom)` es por los teléfonos con barra de gestos:
   sin eso, los botones quedan debajo de la raya y cuesta acertarlos. */
@media (max-width: 30rem) {
  .nx-cookies {
    left: 0; right: 0; bottom: 0;
    max-width: none;
    gap: .55rem;
    padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    border-radius: 14px 14px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: 0 -6px 24px rgba(13, 20, 36, .18);
  }
  .nx-cookies__texto {
    flex-basis: 100%;
    font-size: 12.6px;
    line-height: 1.4;
  }
  .nx-cookies__botones { width: 100%; gap: .5rem; }
  /* Los dos del mismo tamaño: un rechazo que cuesta encontrar no vale. */
  .nx-cookies__btn { flex: 1 1 0; text-align: center; padding: .6rem .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-cookies { animation: none; }
}

[data-tema="oscuro"] .nx-cookies {
  background: var(--superficie, #111a2e);
  border-color: var(--borde, #24314e);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
}