/* ===============================
   WhatsApp Widget (CSS estable)
   =============================== */

/* Variables: inyectadas desde render.php */
:root{
  --mwapp-trigger-bg:#0f0f0f;
  --mwapp-trigger-bg-hover:#1a1a1a;
  --mwapp-ring-color:rgba(0,0,0,.35);
  --mwapp-trigger-size:6rem;
  --mwapp-gap:1rem;
  --mwapp-panel-max-w:22.5rem;
  --mwapp-panel-min-h:18rem;
  --mwapp-panel-bg-color:#ffffff;
  --mwapp-panel-bg-image:none;
  --mwapp-accent:#0b6cff;

  /* CTA WhatsApp */
  --mwapp-cta-bg:#09d75c;
  --mwapp-cta-bg-hover:#08c757;
}

/* Contenedor raíz (solo panel usa eventos) */
#mwapp-root{
  position:fixed !important;
  inset:auto !important;
  z-index:9999 !important;
  pointer-events:none !important;
}

/* ================= TRIGGER ================= */
#mwapp-trigger{
  position:fixed !important;
  right:var(--mwapp-gap) !important;
  bottom:var(--mwapp-gap) !important;
  width:var(--mwapp-trigger-size) !important;
  height:var(--mwapp-trigger-size) !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:0.0625rem solid var(--mwapp-ring-color) !important;
  border-radius:50% !important;
  background:var(--mwapp-trigger-bg) !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:0 8px 28px rgba(0,0,0,.25) !important;
  cursor:pointer !important;
  z-index:9999 !important;
  pointer-events:auto !important;
  transition:transform .15s ease, background-color .2s ease !important;
}
#mwapp-trigger:hover,
#mwapp-trigger:focus-visible{
  background:var(--mwapp-trigger-bg-hover) !important;
  transform:scale(1.06) !important;
  outline:none !important;
}
/* Tamaño del icono del trigger */
#mwapp-trigger .mwfw-wa-icon,
#mwapp-trigger .mwapp-trigger-icon{
  width:2rem !important;
  height:2rem !important;
  display:block !important;
  flex:0 0 auto !important;
  fill:currentColor !important;
}

/* Dot de disponibilidad */
#mwapp-trigger .mwfw-live-dot,
#mwapp-trigger .mwapp-trigger-dot{
  position:absolute !important;
  width:1rem !important;
  height:1rem !important;
  border-radius:999px !important;
  background:#00b94a !important;
  left:0.25rem !important;
  top:0.25rem !important;
  box-shadow:none !important;
}
#mwapp-trigger .mwfw-live-dot::before,
#mwapp-trigger .mwfw-live-dot::after,
#mwapp-trigger .mwapp-trigger-dot::before,
#mwapp-trigger .mwapp-trigger-dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  border:2px solid rgba(0,185,74,.45);
  transform:scale(0.6);
  opacity:0;
  animation:mwfw-wave 2.8s ease-out infinite;
}
#mwapp-trigger .mwfw-live-dot::after,
#mwapp-trigger .mwapp-trigger-dot::after{ animation-delay:1.1s; }
@keyframes mwfw-wave{
  0%   { transform:scale(0.6); opacity:0; }
  6%   { opacity:1; }
  38%  { transform:scale(1.8); opacity:.15; }
  40%  { opacity:0; }
  100% { transform:scale(2.0); opacity:0; }
}

/* ================= PANEL ================= */
#mwapp-panel.mwfw-chat{
  position:fixed !important;
  right:var(--mwapp-gap) !important;
  bottom:calc(var(--mwapp-gap) + var(--mwapp-trigger-size) + 1rem) !important;
  width:min(calc(100vw - 2*var(--mwapp-gap)), var(--mwapp-panel-max-w)) !important;
  min-height:var(--mwapp-panel-min-h) !important;
  background:var(--mwapp-panel-bg-color) !important;
  background-image:var(--mwapp-panel-bg-image) !important;
  background-size:cover !important;
  background-position:center !important;
  border-radius:16px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.18) !important;
  overflow:hidden !important;
  z-index:2147483646 !important;
  display:flex !important;
  flex-direction:column !important;
  pointer-events:auto !important;

  opacity:1; transform:none; visibility:visible;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}

/* aria-hidden controla visibilidad (JS) */
#mwapp-panel[aria-hidden="true"]{
  opacity:0 !important;
  transform:translateY(8px) scale(.98) !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s !important;
}

/* ================= ESTRUCTURA INTERNA ================= */
.mwfw-card{ display:flex; flex-direction:column; min-height:var(--mwapp-panel-min-h); }

/* Cabecera */
.mwfw-top{
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem .75rem; background:#f6f7f8;
}

/* AVATAR: sin fondo y borde 0.1rem */
.mwfw-avatar{
  width:40px; height:40px;
  border-radius:.1rem !important;
  overflow:hidden;
  background:transparent !important;
  display:grid; place-items:center;
}
.mwfw-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.mwfw-avatar__fallback{ font-size:.8rem; color:#555; }
.mwfw-toptext{ display:flex; flex-direction:column; min-width:0; }
.mwfw-agent-name{ font-weight:600; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mwfw-agent-subtitle{ font-size:.85rem; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mwfw-close{
  margin-left:auto; display:inline-grid; place-items:center;
  width:32px; height:32px; border:none; background:transparent; cursor:pointer;
}

/* Cuerpo */
.mwfw-chatbody{
  flex:1 1 auto; padding:.75rem; overflow:auto;
  display:flex; flex-direction:column; gap:.5rem;
  background:transparent;
}
.mwfw-bubblewrap{ display:flex; flex-direction:column; gap:.5rem; }

/* Bubble */
.mwfw-bubble{
  max-width:90%; background:#fff; color:#222; border:1px solid #eee;
  padding:.65rem .8rem; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.05);
  opacity:0; transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
}
.mwfw-bubble.is-visible{ opacity:1; transform:translateY(0); }
.mwfw-bubble__header{ font-weight:600; font-size:.85rem; margin-bottom:.25rem; color:#111; }
.mwfw-bubble__text{ line-height:1.35; white-space:pre-wrap; }

/* “Escribiendo…” */
.mwfw-typing{ display:none; align-items:center; gap:4px; }
.mwfw-typing__dot{
  width:6px; height:6px; border-radius:999px; background:#bbb; opacity:.8;
  animation:mwfw-blink 1s infinite ease-in-out;
}
.mwfw-typing__dot:nth-child(2){ animation-delay:.15s; }
.mwfw-typing__dot:nth-child(3){ animation-delay:.3s; }
@keyframes mwfw-blink{ 0%,80%,100%{ opacity:.2 } 40%{ opacity:1 } }

/* ================= QR ================= */
/* Texto ARRIBA con separación de 0.5rem respecto al QR */
.mwfw-qr-screen{
  display:none;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:1rem;
}
.mwfw-qrhint{
  font-size:.9rem; color:#444;
  margin:0 0 .5rem !important;   /* ← separación correcta */
  text-align:center;
}
.mwfw-qrwrap{
  display:flex; align-items:center; justify-content:center;
  margin:0 !important;
}
.mwfw-qr{ display:block; margin:0 auto; }
.mwfw-qrwrap img,
.mwfw-qrwrap canvas{ display:block; margin:0 auto; }

/* ================= CTA ================= */
.mwfw-ctaarea{
  margin-top:auto; padding:.75rem; border-top:1px solid #eee;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(110%) blur(2px);
}
.mwfw-cta{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1rem; border-radius:10px; text-decoration:none;
  background:var(--mwapp-cta-bg);
  color:#fff; font-weight:600;
  transition:filter .15s ease, background-color .15s ease;
}
.mwfw-cta:hover,
.mwfw-cta:focus-visible{
  background:var(--mwapp-cta-bg-hover);
  outline:none;
}
.mwfw-cta__icon{ width:18px; height:18px; }

/* Accesibilidad */
.mwapp-sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* Responsive */
@media (max-width:480px){
  :root{ --mwapp-trigger-size:5rem; }
}