/* =========================================================
   Collie Suite — Widget flotante de WhatsApp
   Compartido por todas las páginas del sitio.
========================================================= */

.whatsapp-button{
  position:fixed; right:1.4rem; bottom:1.4rem;
  width:56px; height:56px; border-radius:50%;
  background:transparent; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px rgba(17,32,27,.25);
  cursor:pointer; z-index:10000; transition:transform .25s var(--ease); border:0;
}
.whatsapp-button:hover{ transform:scale(1.05); }
.whatsapp-button .wa-icon{ width:56px; height:56px; display:block; }

.wa-badge{
  position:absolute; top:9px; right:9px; width:11px; height:11px;
  border-radius:50%; background:var(--clay); box-shadow:0 0 0 3px rgba(255,255,255,.85);
}

.whatsapp-chat{
  position:fixed; right:1.2rem; bottom:5.4rem;
  width:min(360px, 92vw); max-height:420px;
  background:var(--white); border-radius:16px; box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
  opacity:0; transform:translateY(12px) scale(.96); pointer-events:none;
  transition:.2s var(--ease); z-index:9999;
}
.whatsapp-chat.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.wa-chat-header{
  background:var(--pine); padding:.8rem .9rem; display:flex; align-items:center; gap:.6rem; color:var(--white);
}
.wa-avatar{
  width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;
}
.wa-avatar .wa-icon{ width:19px; height:19px; color:#fff; }
.wa-chat-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wa-chat-name{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.95rem; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wa-chat-status{ font-weight:500; font-size:.75rem; opacity:.85; }
.wa-chat-close{
  margin-left:auto; cursor:pointer; font-size:1.4rem; line-height:1;
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.16); color:var(--white); border:0;
}
.wa-chat-close:hover{ background:rgba(255,255,255,.26); }

.wa-chat-body{ flex:1; padding:.8rem; overflow-y:auto; background:var(--paper-dim); }
.wa-message{ max-width:80%; font-size:.85rem; padding:.55rem .75rem; border-radius:12px; margin-bottom:.5rem; line-height:1.4; }
.wa-message.agent{ background:var(--white); color:var(--ink-soft); box-shadow:0 8px 18px rgba(17,32,27,.07); }
.wa-message.user{ margin-left:auto; background:var(--pine); color:var(--white); }

.wa-chat-input{ display:flex; gap:.4rem; padding:.6rem; background:var(--white); border-top:1px solid var(--line-soft); }
.wa-chat-input input{
  flex:1; border-radius:999px; border:1px solid var(--line-soft);
  padding:.55rem .85rem; background:var(--paper); color:var(--ink); outline:none; font-family:inherit; font-size:.85rem;
}
.wa-chat-input input:focus{ border-color:var(--pine-light); }
.wa-send-btn{
  width:40px; height:40px; border-radius:999px; border:0; background:transparent;
  color:var(--pine); font-size:1.2rem; cursor:pointer;
}
.wa-send-btn:hover{ color:var(--pine-deep); }

@media (max-width:860px){
  .whatsapp-button{ right:1rem; bottom:1rem; }
  .whatsapp-chat{ right:1rem; bottom:5.1rem; }
}