/**
 * ============================================================
 *  L-LEDS — WIDGET FLOTANTE DE WHATSAPP (CSS)
 *  Archivo : ll-wa-widget.css
 *  Dep.    : ll-tokens.css (debe cargarse antes)
 *
 *  SECCIONES:
 *   §1  Contenedor del widget (posición fija)
 *   §2  Botón principal
 *   §3  Anillo de pulso (animación de atención)
 *   §4  Ícono SVG
 *   §5  Badge de estado "En línea"
 *   §6  Tooltip / Globo de texto
 *   §7  Estado scroll-hidden (tooltip oculto)
 *   §8  Micro-animaciones (@keyframes)
 *   §9  Reducción de movimiento (prefers-reduced-motion)
 *   §10 Responsive
 * ============================================================
 */


/* ═══════════════════════════════════════════════════════════
   §1 — CONTENEDOR DEL WIDGET
   Anclado en la esquina inferior derecha del viewport.
   z-index alto pero por debajo del loader (9999).
   ═══════════════════════════════════════════════════════════ */

.ll-wa-widget {
  position     : fixed;
  bottom       : 28px;
  right        : 28px;
  z-index      : 8000;       /* debajo del loader (9999), encima de todo lo demás */

  display      : flex;
  flex-direction: column;
  align-items  : flex-end;
  gap          : 10px;

  /* GPU */
  will-change  : transform;
}


/* ═══════════════════════════════════════════════════════════
   §2 — BOTÓN PRINCIPAL
   ═══════════════════════════════════════════════════════════ */

.ll-wa-widget__btn {
  position         : relative;
  display          : flex;
  align-items      : center;
  justify-content  : center;

  width            : 58px;
  height           : 58px;
  border-radius    : 50%;
  border           : none;
  cursor           : pointer;
  outline          : none;

  /*
   * Fondo: verde oficial de WhatsApp (#25D366) con un gradiente
   * sutil hacia su variante más oscura para cohesión con el dark mode.
   * Se usa el verde WA en lugar del verde de marca para máximo
   * reconocimiento del canal por parte del usuario.
   */
  background       : radial-gradient(
    ellipse at 30% 30%,
    #2fde74 0%,
    #25D366 45%,
    #1da851 100%
  );

  color            : #ffffff;

  /* Sombra LED: verde oscuro con glow sutil */
  box-shadow       : 0 4px 20px rgba(37, 211, 102, 0.40),
                     0 2px 8px  rgba(0, 0, 0, 0.35);

  transition       : transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                     box-shadow 0.25s ease;
}

.ll-wa-widget__btn:hover {
  transform        : scale(1.10) translateY(-2px);
  box-shadow       : 0 8px 32px rgba(37, 211, 102, 0.55),
                     0 4px 12px rgba(0, 0, 0, 0.40);
}

.ll-wa-widget__btn:active {
  transform        : scale(0.96) translateY(0);
  box-shadow       : 0 2px 10px rgba(37, 211, 102, 0.35),
                     0 1px 4px  rgba(0, 0, 0, 0.30);
}

/* Focus visible accesible */
.ll-wa-widget__btn:focus-visible {
  outline          : 2px solid #25D366;
  outline-offset   : 4px;
}


/* ═══════════════════════════════════════════════════════════
   §3 — ANILLO DE PULSO (animación de atención)
   El pseudo-elemento se expande y desvanece infinitamente
   para llamar la atención sin ser intrusivo.
   ═══════════════════════════════════════════════════════════ */

.ll-wa-widget__pulse {
  position         : absolute;
  inset            : 0;
  border-radius    : 50%;
  border           : 2px solid rgba(37, 211, 102, 0.70);
  pointer-events   : none;

  animation        : ll-wa-pulse 2.4s ease-out infinite;
}

/* Segundo anillo con delay para efecto "respiración" */
.ll-wa-widget__pulse::after {
  content          : '';
  position         : absolute;
  inset            : -4px;
  border-radius    : 50%;
  border           : 1.5px solid rgba(37, 211, 102, 0.35);
  animation        : ll-wa-pulse 2.4s ease-out 0.8s infinite;
}


/* ═══════════════════════════════════════════════════════════
   §4 — ÍCONO SVG
   ═══════════════════════════════════════════════════════════ */

.ll-wa-widget__icon {
  width            : 30px;
  height           : 30px;
  flex-shrink      : 0;
  position         : relative;
  z-index          : 1;

  /* Micro-animación de entrada */
  animation        : ll-wa-icon-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay  : 1.2s;  /* espera antes de hacer bounce inicial */
}


/* ═══════════════════════════════════════════════════════════
   §5 — BADGE DE ESTADO "EN LÍNEA"
   Dot verde lima en la esquina superior derecha del botón.
   JS controla la visibilidad según el horario comercial.
   ═══════════════════════════════════════════════════════════ */

.ll-wa-widget__status-dot {
  position         : absolute;
  top              : 4px;
  right            : 4px;
  width            : 11px;
  height           : 11px;
  border-radius    : 50%;
  background       : var(--ll-color-secondary, #c2f000);  /* verde lima de marca */
  border           : 2px solid #1a1a2e;                    /* borde oscuro para contraste */
  z-index          : 2;

  /* Parpadeo suave cuando "en línea" */
  animation        : ll-wa-dot-blink 3s ease-in-out infinite;
}

/* Oculto por defecto — JS lo muestra cuando está en horario */
.ll-wa-widget__status-dot.is-hidden {
  display          : none;
}


/* ═══════════════════════════════════════════════════════════
   §6 — TOOLTIP / GLOBO DE TEXTO
   Aparece a la izquierda del botón. JS lo oculta al scroll.
   ═══════════════════════════════════════════════════════════ */

.ll-wa-widget__tooltip {
  position         : relative;
  background       : var(--ll-color-bg-elevated, #1a1a2e);
  border           : 1px solid rgba(37, 211, 102, 0.25);
  border-radius    : 12px;
  padding          : 10px 14px;
  max-width        : 220px;
  pointer-events   : none;

  /* Entrada: el tooltip se desliza desde abajo */
  animation        : ll-wa-tooltip-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2s both;
}

.ll-wa-widget__tooltip-msg {
  font-family      : var(--ll-font-sans, system-ui, sans-serif);
  font-size        : 13px;
  font-weight      : 500;
  color            : var(--ll-color-text-primary, #f5f5f5);
  line-height      : 1.4;
  margin           : 0;
  white-space      : nowrap;
}

/* Flecha apuntando al botón (triángulo CSS) */
.ll-wa-widget__tooltip-arrow {
  position         : absolute;
  right            : -7px;
  top              : 50%;
  transform        : translateY(-50%);
  width            : 0;
  height           : 0;
  border-top       : 6px solid transparent;
  border-bottom    : 6px solid transparent;
  border-left      : 7px solid var(--ll-color-bg-elevated, #1a1a2e);
}

/* Borde de la flecha */
.ll-wa-widget__tooltip-arrow::before {
  content          : '';
  position         : absolute;
  right            : 1px;
  top              : 50%;
  transform        : translateY(-50%);
  width            : 0;
  height           : 0;
  border-top       : 7px solid transparent;
  border-bottom    : 7px solid transparent;
  border-left      : 8px solid rgba(37, 211, 102, 0.25);
  z-index          : -1;
}


/* ═══════════════════════════════════════════════════════════
   §7 — ESTADO OCULTO DEL TOOLTIP (al hacer scroll)
   JS añade la clase .is-scrolled al widget para ocultar el tooltip.
   ═══════════════════════════════════════════════════════════ */

.ll-wa-widget.is-scrolled .ll-wa-widget__tooltip {
  opacity          : 0;
  transform        : translateY(8px) scale(0.95);
  pointer-events   : none;
  transition       : opacity 0.3s ease,
                     transform 0.3s ease;
}

/* Al volver al top, el tooltip reaparece */
.ll-wa-widget .ll-wa-widget__tooltip {
  transition       : opacity 0.4s ease,
                     transform 0.4s ease;
}


/* ═══════════════════════════════════════════════════════════
   §8 — @KEYFRAMES
   ═══════════════════════════════════════════════════════════ */

/* Anillo de pulso expansivo */
@keyframes ll-wa-pulse {
  0% {
    transform : scale(1);
    opacity   : 0.8;
  }
  70% {
    transform : scale(1.55);
    opacity   : 0;
  }
  100% {
    transform : scale(1.55);
    opacity   : 0;
  }
}

/* Parpadeo del dot de estado */
@keyframes ll-wa-dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Bounce de entrada del ícono (sutil, ocurre 1 vez) */
@keyframes ll-wa-icon-bounce {
  0%   { transform: scale(0.8) rotate(-10deg); }
  60%  { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1)   rotate(0deg); }
}

/* Entrada del tooltip */
@keyframes ll-wa-tooltip-enter {
  from {
    opacity   : 0;
    transform : translateY(10px) scale(0.95);
  }
  to {
    opacity   : 1;
    transform : translateY(0) scale(1);
  }
}


/* ═══════════════════════════════════════════════════════════
   §9 — REDUCCIÓN DE MOVIMIENTO (accesibilidad)
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  .ll-wa-widget__pulse,
  .ll-wa-widget__pulse::after,
  .ll-wa-widget__status-dot,
  .ll-wa-widget__icon {
    animation      : none;
  }

  .ll-wa-widget__btn {
    transition     : none;
  }

  /* El tooltip aparece directamente sin animación */
  .ll-wa-widget__tooltip {
    animation      : none;
    opacity        : 1;
    transform      : none;
  }

  .ll-wa-widget.is-scrolled .ll-wa-widget__tooltip {
    transition     : none;
  }

}


/* ═══════════════════════════════════════════════════════════
   §10 — RESPONSIVE
   En mobile, ajustar posición para no tapar elementos críticos.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 639px) {

  .ll-wa-widget {
    bottom         : 20px;
    right          : 16px;
  }

  /* En mobile el tooltip ocupa todo el ancho disponible */
  .ll-wa-widget__tooltip {
    max-width      : calc(100vw - 100px);   /* deja espacio al botón */
  }

  .ll-wa-widget__btn {
    width          : 52px;
    height         : 52px;
  }

  .ll-wa-widget__icon {
    width          : 26px;
    height         : 26px;
  }

}