/* === YESMARKET • Floating Chat Button (One-Circle Clean Version) === */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css");

:root{
  --ymw-bg:#25D366;         /* color del botón */
  --ymw-text:#ffffff;       /* color del icono */
  --ymw-bubble-bg:#111111;  /* color del globo */
  --ymw-bubble-text:#ffffff;
}

#ymw{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  display:flex; align-items:center; gap:10px;
  -webkit-tap-highlight-color: transparent;
}

/* Botón principal */
#ymw-btn{
  width:60px; height:60px; border-radius:50%;
  background:var(--ymw-bg);
  color:var(--ymw-text);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease;
  text-decoration:none;
}
#ymw-btn:hover{
  transform:scale(1.05);
  box-shadow:0 12px 36px rgba(0,0,0,.3);
}

/* Ícono oficial WhatsApp */
#ymw-btn i.fa-whatsapp{
  font-size:32px;
  line-height:1;
  color:currentColor;
  display:block;
}

/* Globo de texto */
#ymw-label{
  background:var(--ymw-bubble-bg);
  color:var(--ymw-bubble-text);
  padding:10px 14px;
  border-radius:14px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0;
  transform:translateY(6px) scale(.98);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#ymw.announce #ymw-label{ opacity:1; transform:translateY(0) scale(1); }

/* Animación de tipeo */
#ymw-label.typing {
  border-right: 2px solid var(--ymw-bubble-text);
}
@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
#ymw-label.typing::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 1em;
  border-right: 2px solid var(--ymw-bubble-text);
  animation: caretBlink 1s step-end infinite;
  margin-left: 2px;
}

/* Microvibración (más notoria y elegante) */
@keyframes ymw-vibrate{
  0%,100%{ transform:translate(0,0) }
  10%{ transform:translate(-3px,3px) }
  25%{ transform:translate(3px,-2px) }
  50%{ transform:translate(-2px,3px) }
  75%{ transform:translate(2px,-3px) }
}
#ymw-btn.vibrate{ animation:ymw-vibrate .45s linear 1; }

/* Mobile */
@media (max-width:576px){
  #ymw{ right:14px; bottom:14px; }
  #ymw-btn{ width:56px; height:56px; }
  #ymw-btn i.fa-whatsapp{ font-size:28px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #ymw-btn, #ymw-label{ transition:none; animation:none }
}
/* Badge de notificación */
#ymw-btn{
  position: relative; /* importante para posicionar el badge */
}

/* Circulito rojo tipo notificación */
#ymw-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff3b30;      /* rojo iOS style */
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #ffffff;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

/* Estado visible del badge */
#ymw-badge.ymw-badge--show{
  opacity: 1;
  transform: scale(1);
}