/*
 * Boton flotante de WhatsApp.
 *
 * Vive en el pie del documento y se posiciona con `position:fixed`, asi que no
 * depende de la plantilla que lo pinta: sirve igual en la home, en una ficha de
 * plan o en un 404.
 *
 * Reglas de convivencia (el objetivo es NO tapar nada):
 *  - Abajo a la derecha, con margenes que respetan el notch del telefono
 *    (`env(safe-area-inset-*)`).
 *  - El valor de `bottom` es una variable CSS: el JS la sube cuando el pie o un
 *    control del mapa (la atribucion de Leaflet, los filtros) cae justo debajo.
 *    El valor por defecto funciona sin JS; el JS solo mejora el caso del mapa.
 *  - Cuando el menu movil esta desplegado, el boton se aparta (clase
 *    `andes-wa--oculto`): el menu manda, y en pantallas cortas podrian solaparse.
 *  - z-index 900: por encima del mapa (que encierra sus capas en su propio
 *    contexto con z-index 0) y por debajo de la barra de administracion de
 *    WordPress, que no debe quedar tapada para quien edita el sitio.
 */

.andes-wa {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  /* Respaldo para navegadores sin `max()`/`env()`: si la linea siguiente no se
     entiende, el boton se queda a 1.25rem del borde. */
  bottom: 1.25rem;
  bottom: var(--andes-wa-abajo, max(1.25rem, env(safe-area-inset-bottom, 0px)));

  z-index: 900;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;

  border-radius: 50%;
  /*
   * COLOR DE MARCA, no el verde de WhatsApp.
   *
   * Mateo lo pidio: "si se puede cambiar como el loguito de WhatsApp, como con
   * los colores de Andes". El verde #25d366 chocaba con el resto del sitio,
   * que es naranja y carbon.
   *
   * El glifo sigue siendo el de WhatsApp, asi que el boton se sigue leyendo
   * como WhatsApp; lo que cambia es el soporte. Ojo: la guia de marca de
   * WhatsApp pide su verde para el logotipo *oficial* en materiales de
   * marketing. En el boton flotante de un sitio propio es una decision
   * estetica del cliente y esta tomada con conocimiento.
   */
  background: var(--andes-naranja, #ff3700);
  color: #fff;
  text-decoration: none;

  box-shadow: 0 10px 24px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .10);

  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.32, .72, 0, 1), opacity .2s ease;
}

.andes-wa__icono {
  display: block;
  width: 30px;
  height: 30px;
}

.andes-wa__icono svg {
  display: block;
  width: 100%;
  height: 100%;
}

.andes-wa:hover {
  /* Naranja mas oscuro: el mismo tono, un escalon por debajo. */
  background: #d92f00;
}

/* Foco visible de verdad: el boton es el unico control flotante del sitio y
   tiene que verse al tabular. Como el fondo ya es naranja, el halo va en blanco
   para que se distinga incluso sobre la foto clara de un hero. */
.andes-wa:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 55, 0, .38), 0 10px 24px rgba(0, 0, 0, .38);
}

/* Menu movil desplegado: el boton se aparta. */
.andes-wa--oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Animaciones: solo si el sistema no pide reducir movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .andes-wa {
    animation: andes-wa-entrada .45s cubic-bezier(.32, .72, 0, 1) both;
  }

  .andes-wa:hover {
    transform: translateY(-2px) scale(1.04);
  }
}

@keyframes andes-wa-entrada {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.86);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Pantallas muy bajas (movil en horizontal): mas pequeño para estorbar menos. */
@media (max-height: 420px) {
  .andes-wa {
    width: 46px;
    height: 46px;
  }

  .andes-wa__icono {
    width: 24px;
    height: 24px;
  }
}