/* =====================================================
   WA Channels Widget v4 - Frontend Styles
===================================================== */

/* ── BOTÓN ── */
#wacw-btn {
  position: fixed !important;
  width: 62px !important; height: 62px !important;
  min-width: 62px !important; min-height: 62px !important;
  max-width: 62px !important; max-height: 62px !important;
  background: #25D366 !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 6px 24px rgba(37,211,102,.45) !important;
  z-index: 99999 !important;
  border: none !important; outline: none !important;
  padding: 0 !important; margin: 0 !important;
  line-height: 1 !important; appearance: none !important; -webkit-appearance: none !important;
  overflow: visible !important; flex-shrink: 0 !important;
  transition: transform .2s, box-shadow .2s !important;
  font-family: inherit !important;
  /* SIN top/bottom/left/right — los pone el JS */
}
#wacw-btn:hover { transform: scale(1.1) !important; box-shadow: 0 8px 32px rgba(37,211,102,.6) !important; }
#wacw-btn svg { width: 34px !important; height: 34px !important; display: block !important; pointer-events: none !important; }

/* ── PULSE ── */
#wacw-pulse {
  position: fixed !important;
  width: 62px !important; height: 62px !important;
  border-radius: 50% !important;
  background: rgba(37,211,102,.35) !important;
  z-index: 99997 !important;
  pointer-events: none !important;
  animation: wacwPulse 2s infinite !important;
  /* SIN top/bottom/left/right — los pone el JS */
}
@keyframes wacwPulse {
  0%   { transform: scale(1);    opacity: 1; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ── OVERLAY ── */
#wacw-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45) !important;
  z-index: 99996 !important;
  opacity: 0 !important;
  transition: opacity .25s !important;
}
#wacw-overlay.show { display:block !important; opacity: 1 !important; }

/* ── PANEL BASE ── */
#wacw-panel {
  position: fixed !important;
  /* SIN top/bottom/left/right/width — los pone el JS */
  max-width: calc(100vw - 20px) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.22) !important;
  z-index: 99998 !important;
  overflow: hidden !important;
  /* Estado inicial: oculto, sin posición fija */
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .25s, transform .28s !important;
  font-family: 'Montserrat', 'Segoe UI', sans-serif !important;
}
#wacw-panel.open {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* ══════════════════════════════════════════════
   DISEÑO 1 — Chat (azul marino + blanco)
══════════════════════════════════════════════ */
#wacw-panel.d1 { background: #fff !important; }
#wacw-panel.d1 .wacw-header { background: linear-gradient(135deg,#1a3a6b,#0d2147) !important; padding: 16px 16px 18px !important; display:flex !important; align-items:center !important; gap:10px !important; }
#wacw-panel.d1 .wacw-avatar { width:44px !important; height:44px !important; min-width:44px !important; background:#25D366 !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; }
#wacw-panel.d1 .wacw-title   { color:#fff !important; font-size:.88rem !important; font-weight:700 !important; margin:0 !important; }
#wacw-panel.d1 .wacw-subtitle{ color:rgba(255,255,255,.65) !important; font-size:.7rem !important; margin:2px 0 0 !important; }
#wacw-panel.d1 .wacw-close { margin-left:auto !important; background:rgba(255,255,255,.15) !important; border:none !important; color:#fff !important; width:28px !important; height:28px !important; border-radius:50% !important; cursor:pointer !important; font-size:.85rem !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; transition:background .2s !important; padding:0 !important; }
#wacw-panel.d1 .wacw-close:hover { background:rgba(255,255,255,.3) !important; }
#wacw-panel.d1 .wacw-bubble-wrap { background:#e5ddd5 !important; padding:10px 12px 6px !important; }
#wacw-panel.d1 .wacw-bubble { background:#fff !important; border-radius:8px 8px 8px 2px !important; padding:8px 10px !important; font-size:.78rem !important; color:#333 !important; line-height:1.4 !important; max-width:92% !important; margin:0 !important; }
#wacw-panel.d1 .wacw-bubble strong { color:#1a3a6b !important; font-weight:700 !important; }
#wacw-panel.d1 .wacw-time { text-align:right !important; font-size:.62rem !important; color:#999 !important; margin:3px 0 0 !important; padding-bottom:6px !important; }
#wacw-panel.d1 .wacw-channels { padding:8px 10px 10px !important; background:#fff !important; display:flex !important; flex-direction:column !important; gap:7px !important; }
#wacw-panel.d1 .wacw-channel { display:flex !important; align-items:center !important; gap:9px !important; padding:8px 10px !important; background:#f7f8fa !important; border:1px solid #eee !important; border-radius:10px !important; text-decoration:none !important; transition:background .2s,border-color .2s,transform .15s !important; }
#wacw-panel.d1 .wacw-channel:hover { background:#eafaf1 !important; border-color:#25D366 !important; transform:translateX(3px) !important; }
#wacw-panel.d1 .wacw-ch-icon { width:34px !important; height:34px !important; min-width:34px !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:1rem !important; }
#wacw-panel.d1 .wacw-ch-name { font-size:.76rem !important; font-weight:700 !important; color:#1a3a6b !important; display:block !important; margin:0 0 1px !important; }
#wacw-panel.d1 .wacw-ch-desc { font-size:.65rem !important; color:#888 !important; display:block !important; margin:0 !important; }
#wacw-panel.d1 .wacw-ch-num  { font-size:.68rem !important; font-weight:700 !important; color:#25D366 !important; white-space:nowrap !important; margin-left:auto !important; padding-left:5px !important; }
#wacw-panel.d1 .wacw-footer  { text-align:center !important; padding:6px 10px 10px !important; font-size:.6rem !important; color:#bbb !important; background:#fff !important; border-top:1px solid #f0f0f0 !important; }
#wacw-panel.d1 .wacw-footer span { color:#25D366 !important; font-weight:600 !important; }

/* ══════════════════════════════════════════════
   DISEÑO 2 — Verde WA
══════════════════════════════════════════════ */
#wacw-panel.d2 { background:#fff !important; }
#wacw-panel.d2 .wacw-header { background:#25D366 !important; padding:14px 16px !important; display:flex !important; align-items:center !important; gap:10px !important; }
#wacw-panel.d2 .wacw-avatar { display:none !important; }
#wacw-panel.d2 .wacw-title   { color:#fff !important; font-size:1rem !important; font-weight:800 !important; margin:0 !important; }
#wacw-panel.d2 .wacw-subtitle{ color:rgba(255,255,255,.8) !important; font-size:.72rem !important; margin:3px 0 0 !important; }
#wacw-panel.d2 .wacw-close { margin-left:auto !important; background:rgba(0,0,0,.15) !important; border:none !important; color:#fff !important; width:28px !important; height:28px !important; border-radius:50% !important; cursor:pointer !important; font-size:.85rem !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; transition:background .2s !important; padding:0 !important; }
#wacw-panel.d2 .wacw-close:hover { background:rgba(0,0,0,.25) !important; }
#wacw-panel.d2 .wacw-bubble-wrap { display:none !important; }
#wacw-panel.d2 .wacw-welcome { background:#f0fdf4 !important; padding:10px 14px !important; font-size:.78rem !important; color:#1a6b3a !important; border-bottom:1px solid #d1fae5 !important; }
#wacw-panel.d2 .wacw-channels { padding:10px 12px 14px !important; background:#fff !important; display:flex !important; flex-direction:column !important; gap:0 !important; }
#wacw-panel.d2 .wacw-channel { display:flex !important; align-items:center !important; gap:10px !important; padding:10px 10px !important; border-bottom:1px solid #f0f0f0 !important; text-decoration:none !important; transition:background .2s,padding-left .2s !important; border-left:4px solid #25D366 !important; margin-bottom:4px !important; }
#wacw-panel.d2 .wacw-channel:hover { background:#f0fdf4 !important; padding-left:14px !important; }
#wacw-panel.d2 .wacw-ch-icon { width:32px !important; height:32px !important; min-width:32px !important; border-radius:8px !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:1rem !important; }
#wacw-panel.d2 .wacw-ch-name { font-size:.76rem !important; font-weight:700 !important; color:#1a6b3a !important; display:block !important; margin:0 0 1px !important; }
#wacw-panel.d2 .wacw-ch-desc { font-size:.65rem !important; color:#888 !important; display:block !important; margin:0 !important; }
#wacw-panel.d2 .wacw-ch-num  { font-size:.68rem !important; font-weight:700 !important; color:#25D366 !important; white-space:nowrap !important; margin-left:auto !important; }
#wacw-panel.d2 .wacw-footer  { text-align:center !important; padding:6px 10px 10px !important; font-size:.6rem !important; color:#bbb !important; background:#fff !important; border-top:1px solid #f0f0f0 !important; }
#wacw-panel.d2 .wacw-footer span { color:#25D366 !important; font-weight:600 !important; }

/* ══════════════════════════════════════════════
   DISEÑO 3 — Dark Mode
══════════════════════════════════════════════ */
#wacw-panel.d3 { background:#1a1a2e !important; border:1px solid #2e2e4e !important; }
#wacw-panel.d3 .wacw-header { background:#12122a !important; padding:14px 16px !important; display:flex !important; align-items:center !important; gap:10px !important; border-bottom:1px solid #2e2e4e !important; }
#wacw-panel.d3 .wacw-avatar { width:40px !important; height:40px !important; min-width:40px !important; background:#25D366 !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; }
#wacw-panel.d3 .wacw-title   { color:#25D366 !important; font-size:.88rem !important; font-weight:700 !important; margin:0 !important; }
#wacw-panel.d3 .wacw-subtitle{ color:rgba(255,255,255,.45) !important; font-size:.7rem !important; margin:2px 0 0 !important; }
#wacw-panel.d3 .wacw-close { margin-left:auto !important; background:rgba(255,255,255,.08) !important; border:none !important; color:rgba(255,255,255,.7) !important; width:28px !important; height:28px !important; border-radius:50% !important; cursor:pointer !important; font-size:.85rem !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; transition:background .2s !important; padding:0 !important; }
#wacw-panel.d3 .wacw-close:hover { background:rgba(255,255,255,.15) !important; }
#wacw-panel.d3 .wacw-bubble-wrap { display:none !important; }
#wacw-panel.d3 .wacw-welcome { background:rgba(37,211,102,.08) !important; padding:10px 14px !important; font-size:.78rem !important; color:rgba(255,255,255,.6) !important; border-bottom:1px solid #2e2e4e !important; }
#wacw-panel.d3 .wacw-channels { padding:8px 10px 10px !important; background:#1a1a2e !important; display:flex !important; flex-direction:column !important; gap:6px !important; }
#wacw-panel.d3 .wacw-channel { display:flex !important; align-items:center !important; gap:9px !important; padding:8px 10px !important; background:#25262e !important; border:1px solid #2e2e4e !important; border-radius:10px !important; text-decoration:none !important; transition:background .2s,border-color .2s !important; }
#wacw-panel.d3 .wacw-channel:hover { background:#2d3044 !important; border-color:#25D366 !important; }
#wacw-panel.d3 .wacw-ch-icon { width:34px !important; height:34px !important; min-width:34px !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:1rem !important; }
#wacw-panel.d3 .wacw-ch-name { font-size:.76rem !important; font-weight:700 !important; color:#e0e0e0 !important; display:block !important; margin:0 0 1px !important; }
#wacw-panel.d3 .wacw-ch-desc { font-size:.65rem !important; color:rgba(255,255,255,.4) !important; display:block !important; margin:0 !important; }
#wacw-panel.d3 .wacw-ch-num  { font-size:.68rem !important; font-weight:700 !important; color:#25D366 !important; white-space:nowrap !important; margin-left:auto !important; padding-left:5px !important; }
#wacw-panel.d3 .wacw-footer  { text-align:center !important; padding:6px 10px 10px !important; font-size:.6rem !important; color:rgba(255,255,255,.25) !important; background:#12122a !important; border-top:1px solid #2e2e4e !important; }
#wacw-panel.d3 .wacw-footer span { color:#25D366 !important; font-weight:600 !important; }

/* ══════════════════════════════════════════════
   RESPONSIVE — SOLO tamaños, NUNCA posiciones
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #wacw-btn, #wacw-pulse { width:56px !important; height:56px !important; min-width:56px !important; min-height:56px !important; max-width:56px !important; max-height:56px !important; }
  #wacw-panel { font-size:.93em !important; max-height:80vh !important; overflow-y:auto !important; }
}
@media (max-width: 768px) {
  #wacw-btn, #wacw-pulse { width:54px !important; height:54px !important; min-width:54px !important; min-height:54px !important; max-width:54px !important; max-height:54px !important; }
  #wacw-panel { font-size:.92em !important; max-height:80vh !important; overflow-y:auto !important; }
}
/* Móvil: bottom sheet — aquí SÍ necesitamos posición fija pero la sobreescribimos via clase .is-mobile */
#wacw-panel.is-mobile {
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100% !important; max-width: 100% !important; max-height: 88vh !important;
  overflow-y: auto !important; border-radius: 20px 20px 0 0 !important;
  font-size: .92em !important;
}
#wacw-panel.is-mobile::before { content:'' !important; display:block !important; width:40px !important; height:4px !important; background:rgba(255,255,255,.25) !important; border-radius:4px !important; margin:10px auto 0 !important; }
#wacw-overlay.is-mobile { display:block !important; }
@media (max-width: 360px) {
  #wacw-btn, #wacw-pulse { width:46px !important; height:46px !important; min-width:46px !important; min-height:46px !important; max-width:46px !important; max-height:46px !important; }
  #wacw-panel { font-size:.85em !important; }
}

/* ══════════════════════════════════════════════
   ANIMACIONES DEL PANEL
   IMPORTANTE: transform-origin se pone en inline style desde el JS
══════════════════════════════════════════════ */

/* Zoom (default) */
#wacw-panel { transform: scale(0.85) !important; transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease !important; }
#wacw-panel.open { transform: scale(1) !important; }
/* Móvil siempre translateY */
#wacw-panel.is-mobile         { transform: translateY(100%) !important; transition: transform 0.3s ease, opacity 0.2s ease !important; }
#wacw-panel.is-mobile.open    { transform: translateY(0) !important; }

/* Slide */
#wacw-panel.anim-slide        { transform: translateY(24px) scale(0.97) !important; opacity:0 !important; transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease !important; }
#wacw-panel.anim-slide.open   { transform: translateY(0) scale(1) !important; opacity:1 !important; }
#wacw-panel.anim-slide.pos-top       { transform: translateY(-24px) scale(0.97) !important; }
#wacw-panel.anim-slide.pos-top.open  { transform: translateY(0) scale(1) !important; }

/* Flip 3D */
#wacw-panel.anim-flip       { transform: perspective(600px) rotateX(-15deg) scale(0.92) !important; opacity:0 !important; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease !important; }
#wacw-panel.anim-flip.open  { transform: perspective(600px) rotateX(0deg) scale(1) !important; opacity:1 !important; }

/* Bounce */
@keyframes wacw-bounce-in  { 0%{transform:scale(0.6);opacity:0} 60%{transform:scale(1.06);opacity:1} 80%{transform:scale(0.97)} 100%{transform:scale(1)} }
@keyframes wacw-bounce-out { 0%{transform:scale(1);opacity:1} 30%{transform:scale(1.04)} 100%{transform:scale(0.6);opacity:0} }
#wacw-panel.anim-bounce          { opacity:0 !important; transform:scale(0.6) !important; pointer-events:none !important; }
#wacw-panel.anim-bounce.open     { opacity:1 !important; pointer-events:all !important; animation: wacw-bounce-in 0.42s cubic-bezier(0.34,1.56,0.64,1) forwards !important; }
#wacw-panel.anim-bounce.closing  { animation: wacw-bounce-out 0.25s ease forwards !important; }

/* Fade */
#wacw-panel.anim-fade       { opacity:0 !important; transform:scale(1) !important; transition:opacity 0.3s ease !important; }
#wacw-panel.anim-fade.open  { opacity:1 !important; }

/* Rotate */
#wacw-panel.anim-rotate       { transform:scale(0.7) rotate(-8deg) !important; opacity:0 !important; transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease !important; }
#wacw-panel.anim-rotate.open  { transform:scale(1) rotate(0deg) !important; opacity:1 !important; }

/* ── Animaciones del BOTÓN al clic ── */
@keyframes wacw-btn-pop    { 0%{transform:scale(1)} 40%{transform:scale(0.88)} 70%{transform:scale(1.12)} 100%{transform:scale(1)} }
@keyframes wacw-btn-spin   { 0%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(180deg) scale(0.9)} 100%{transform:rotate(360deg) scale(1)} }
@keyframes wacw-btn-shake  { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px) rotate(-5deg)} 40%{transform:translateX(5px) rotate(5deg)} 60%{transform:translateX(-4px) rotate(-3deg)} 80%{transform:translateX(4px) rotate(3deg)} }
@keyframes wacw-ripple-out { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)} 100%{box-shadow:0 0 0 22px rgba(37,211,102,0)} }
#wacw-btn.anim-click-pop    { animation: wacw-btn-pop    0.35s cubic-bezier(0.34,1.56,0.64,1) !important; }
#wacw-btn.anim-click-spin   { animation: wacw-btn-spin   0.45s ease-in-out !important; }
#wacw-btn.anim-click-shake  { animation: wacw-btn-shake  0.4s ease !important; }
#wacw-btn.anim-click-ripple { animation: wacw-ripple-out 0.45s ease-out !important; }