/* === Panel de chat (compartido en espíritu con Diseño 1, mismos valores visuales) === */
:root{
  --vv-purple1: #34024f;
  --vv-purple2: #9905c5;
  --vv-fab-size: 68px;
  --vv-fab-gap: 46px;
  --vv-fab-base-bottom: 18px;
  --vv-fab-base-right: 18px;
  --vv-fab-grad: linear-gradient(111.8deg, var(--vv-purple1) 22%, var(--vv-purple2) 90%);
}

.vv-chat-panel{position:fixed;right:18px;bottom:78px;width:360px;max-width:90vw;max-height:70vh;background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.2);display:none;flex-direction:column;overflow:hidden;z-index:99999}
.vv-chat-panel.vv-open{display:flex}
.vv-chat-header{
  display:flex; align-items:center; gap:10px;
  background: linear-gradient(111.8deg, var(--vv-purple1) 22%, var(--vv-purple2) 90%) !important;
  color:#fff;
  padding:12px 14px; font-weight:700;
}
.vv-chat-title{ display:flex; align-items:center; gap:8px; }
.vv-chat-title img{ width:40px; height:40px; display:block; object-fit:contain; }
.vv-chat-close{ margin-left:auto; background:transparent; border:0; color:#fff !important; font-size:18px; cursor:pointer; position:relative; z-index:1; }
.vv-chat-close:hover, .vv-chat-close:focus{ color:#fff !important; opacity:.9; background:transparent !important; }
.vv-chat-body{padding:12px;overflow:auto;scroll-behavior:smooth;background:#f8fafc}
.vv-msg{max-width:80%;padding:10px 12px;border-radius:12px;margin:8px 0;line-height:1.3;white-space:pre-wrap;word-wrap:break-word}
.vv-user{
  margin-left:auto;
  background: linear-gradient(111.8deg, var(--vv-purple1) 22%, var(--vv-purple2) 90%) !important;
  color:#fff !important;
  border-bottom-right-radius:4px;
}
.vv-bot{margin-right:auto;background:#e5e7eb;color:#0f172a;border-bottom-left-radius:4px}
.vv-typing{opacity:.7;font-style:italic}
.vv-chat-footer{display:flex;gap:8px;padding:10px;background:#fff;border-top:1px solid #e5e7eb}
.vv-chat-input{flex:1;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font-size:14px}
.vv-chat-send{
  border:0; border-radius:10px; font-weight:700; cursor:pointer; padding:10px 14px;
  background: linear-gradient(111.8deg, var(--vv-purple1) 22%, var(--vv-purple2) 90%) !important;
  color:#fff !important;
  position:relative; z-index:1;
  transition: filter .2s ease, transform .05s ease;
}
.vv-chat-send:hover, .vv-chat-send:focus{ filter:brightness(1.06); color:#fff !important; }
.vv-chat-send:active{ transform: translateY(1px); }
@media (max-width:480px){.vv-chat-panel{right:8px;left:8px;bottom:80px;width:auto;max-height:75vh}}

/* === Globo "Chat con nosotros" (mismo look que el globo de Diseño 1) === */
.vv-balloon{
  position:fixed; right:18px; z-index:99998; max-width:260px; padding:10px 12px;
  background:#ffffff; color:#0f172a; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.22);
  display:flex; align-items:center; gap:10px; font-weight:600; line-height:1.25;
  transform:translateY(8px); opacity:0; pointer-events:auto;
  transition:opacity .2s ease, transform .2s ease;
}
.vv-balloon::after{
  content:""; position:absolute; right:42px; bottom:-8px; width:16px; height:16px;
  background:#ffffff; transform:rotate(45deg); box-shadow: 2px 2px 10px rgba(0,0,0,.08);
}
.vv-balloon.vv-show{ opacity:1; transform:translateY(0); }
.vv-balloon-close{
  margin-left:auto; border:0; background:transparent; color:#475569; font-size:16px;
  cursor:pointer; line-height:1; padding:0 2px;
}
.vv-balloon-close:hover{ color:#0f172a; }

/* === Liquid FAB === */
.vv-fab-wrap{
  position:fixed;
  right:var(--vv-fab-base-right);
  bottom:var(--vv-fab-base-bottom);
  z-index:99999;
  width:var(--vv-fab-size); height:var(--vv-fab-size);
  transition: bottom .25s ease;
}

/* Botones (principal y de acción) comparten base circular */
.vv-fab-main,
.vv-fab-action{
  width:var(--vv-fab-size); height:var(--vv-fab-size);
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  background-clip:padding-box;
}
/* Blindaje contra estilos de hover/pseudo-elementos del tema que taparían el ícono */
.vv-fab-main::before, .vv-fab-main::after,
.vv-fab-action::before, .vv-fab-action::after{ content:none !important; display:none !important; }

.vv-fab-main{
  position:relative;
  border:2px solid #FF8A00;
  background: var(--vv-fab-grad) !important;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22), 0 0 0 3px rgba(255,138,0,.35);
  z-index:3;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.vv-fab-main:hover, .vv-fab-main:focus{
  background: var(--vv-fab-grad) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.26), 0 0 0 4px rgba(255,138,0,.45);
  outline:none;
}
.vv-fab-main:active{ transform:scale(.94); }

/* Íconos del botón principal: burbuja (cerrado) <-> flecha (abierto) */
.vv-fab-icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.vv-fab-icon-chat img{
  width:var(--vv-fab-size) !important;
  height:var(--vv-fab-size) !important;
  max-width:none !important;
  max-height:none !important;
  flex:0 0 auto !important;
  display:block !important;
  object-fit:cover;
  border-radius:50%;
  margin:0; padding:0;
}
.vv-fab-icon-arrow{ opacity:0; transform:scale(.4) rotate(-90deg); }
.vv-fab-wrap.vv-fab-open .vv-fab-icon-chat{ opacity:0; transform:scale(.4) rotate(90deg); }
.vv-fab-wrap.vv-fab-open .vv-fab-icon-arrow{ opacity:1; transform:scale(1) rotate(0); }

.vv-fab-actions{
  position:absolute; right:0; bottom:0;
  width:var(--vv-fab-size); height:var(--vv-fab-size);
  pointer-events:none; z-index:1;
}

.vv-fab-action{
  position:absolute; right:0; bottom:0;
  border:0;
  overflow:visible !important; /* el tema pone overflow:hidden en <button> y recortaría la etiqueta */
  opacity:0; transform:translateX(0) scale(.35); pointer-events:none;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .28s ease-out;
}
.vv-fab-action img{ position:relative; z-index:2; }

/* Etiquetas flotantes de cada sub-botón (globito con flechita, como el del botón principal) */
.vv-fab-label{
  position:absolute;
  left:50%;
  bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(8px) scale(.85);
  transform-origin:center bottom;
  text-align:center;
  white-space:nowrap;               /* respeta exactamente el <br> (2 líneas), sin sobre-partir */
  background:#fff; color:#0f172a;
  padding:7px 12px; border-radius:10px;
  font-size:12.5px; font-weight:700; line-height:1.2;
  text-transform:none !important;   /* el tema pone uppercase en <button> */
  letter-spacing:normal !important;
  box-shadow:0 8px 22px rgba(0,0,0,.20);
  opacity:0; pointer-events:none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
/* Flechita del globito apuntando a su botón */
.vv-fab-label::after{
  content:""; position:absolute; left:50%; bottom:-5px;
  width:12px; height:12px; background:#fff;
  transform:translateX(-50%) rotate(45deg);
  box-shadow:3px 3px 8px rgba(0,0,0,.06);
}

/* Visibles solo cuando el FAB está expandido y el chat no está abierto */
.vv-fab-wrap.vv-fab-open:not(.vv-chat-active) .vv-fab-action .vv-fab-label{
  opacity:1; transform:translateX(-50%) translateY(0) scale(1);
}
.vv-fab-wrap.vv-fab-open:not(.vv-chat-active) .vv-fab-whatsapp .vv-fab-label{ transition-delay:.18s; }
.vv-fab-wrap.vv-fab-open:not(.vv-chat-active) .vv-fab-vecinito .vv-fab-label{ transition-delay:.26s; }

.vv-fab-whatsapp,
.vv-fab-whatsapp:hover,
.vv-fab-whatsapp:focus{
  background:#25D366 !important;
  border:2px solid #1ebe5b;
}
.vv-fab-whatsapp img{
  width:30px !important;
  height:30px !important;
  max-width:none !important;
  max-height:none !important;
  flex:0 0 auto !important;
  display:block !important;
  object-fit:contain;
  margin:0; padding:0;
}
.vv-fab-vecinito,
.vv-fab-vecinito:hover,
.vv-fab-vecinito:focus{
  background: var(--vv-fab-grad) !important;
  border:2px solid #FF8A00;
  box-shadow:0 8px 20px rgba(0,0,0,.2), 0 0 0 3px rgba(255,138,0,.35);
}
.vv-fab-vecinito img{
  width:32px !important;
  height:32px !important;
  max-width:none !important;
  max-height:none !important;
  flex:0 0 auto !important;
  display:block !important;
  object-fit:contain;
  border-radius:50%;
  margin:0; padding:0;
}

/* Apertura: fila horizontal hacia la izquierda, escalonada (efecto "goteo líquido") */
.vv-fab-wrap.vv-fab-open .vv-fab-whatsapp{
  transform: translateX(calc(-1 * (var(--vv-fab-size) + var(--vv-fab-gap)))) scale(1);
  opacity:1; pointer-events:auto; transition-delay:.05s, 0s;
}
.vv-fab-wrap.vv-fab-open .vv-fab-vecinito{
  transform: translateX(calc(-2 * (var(--vv-fab-size) + var(--vv-fab-gap)))) scale(1);
  opacity:1; pointer-events:auto; transition-delay:.12s, .06s;
}

/* Cierre: recogida simultánea y más rápida (sensación de "absorción" líquida) */
.vv-fab-wrap:not(.vv-fab-open) .vv-fab-action{
  transition-delay:0s !important; transition-duration:.25s, .18s;
}

/* Separadores circulares entre los botones (aparecen con el mismo "goteo") */
.vv-fab-dot{
  position:absolute; right:0; bottom:0;
  width:var(--vv-fab-size); height:var(--vv-fab-size);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:0;
  opacity:0; transform:translateX(0) scale(.2);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .28s ease-out;
}
.vv-fab-dot::before{
  content:"";
  width:10px; height:10px; border-radius:50%;
  background:#FF8A00;
  box-shadow:0 2px 6px rgba(0,0,0,.2), 0 0 0 3px rgba(255,138,0,.22);
}
.vv-fab-wrap.vv-fab-open .vv-fab-dot-1{
  transform:translateX(calc(-0.5 * (var(--vv-fab-size) + var(--vv-fab-gap)))) scale(1);
  opacity:1; transition-delay:.08s, .02s;
}
.vv-fab-wrap.vv-fab-open .vv-fab-dot-2{
  transform:translateX(calc(-1.5 * (var(--vv-fab-size) + var(--vv-fab-gap)))) scale(1);
  opacity:1; transition-delay:.15s, .08s;
}
.vv-fab-wrap:not(.vv-fab-open) .vv-fab-dot{
  transition-delay:0s !important; transition-duration:.25s, .18s;
}

/* Tablet / móvil grande */
@media (max-width:600px){
  :root{ --vv-fab-size: 66px; --vv-fab-gap: 44px; --vv-fab-base-right: 14px; --vv-fab-base-bottom: 14px; }
}
/* Móvil */
@media (max-width:480px){
  :root{ --vv-fab-size: 64px; --vv-fab-gap: 48px; }
  .vv-fab-label{ font-size:12px; padding:6px 10px; }
  .vv-fab-vecinito img{ width:34px !important; height:34px !important; }
  .vv-fab-whatsapp img{ width:32px !important; height:32px !important; }
}