/* ============================================================
   LEOSTUDIO — components/chat-widget.css
   Botón flotante global de contacto por WhatsApp (position: fixed,
   visible en todas las secciones). Abre WhatsApp con un mensaje
   predefinido. El verde es el de WhatsApp (literal, NO color de
   marca) — afordancia de reconocimiento inmediato; misma excepción
   documentada que los rgba decorativos de cta-footer.css.
   Depende de: tokens.css.
   ============================================================ */

.ls-chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900; /* sobre el contenido; el nav (1000) queda por encima.
                   Los paneles modales se gestionan ocultando el widget vía JS. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #1DA851); /* verde WhatsApp */
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              opacity var(--transition-base);
}

.ls-chat-widget:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.ls-chat-widget:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

/* El ícono por encima del pulso */
.ls-chat-widget svg {
  position: relative;
  z-index: 1;
}

/* Pulso de disponibilidad (sutil, no agresivo) */
.ls-chat-widget__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  pointer-events: none;
  animation: ls-chat-pulse 2.5s ease-out infinite;
}

@keyframes ls-chat-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Oculto temporalmente (JS) mientras haya un panel/modal abierto */
.ls-chat-widget.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* === RESPONSIVE === */

@media (max-width: 767px) {
  .ls-chat-widget {
    width: 50px;
    height: 50px;
    bottom: 16px;
    right: 16px;
  }
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
  .ls-chat-widget {
    transition: none;
  }
  .ls-chat-widget__pulse {
    display: none;
    animation: none;
  }
}