body{
font-family: Arial, Helvetica, sans-serif;
}

/* CONTENEDOR */

.chat-widget{
position:fixed;
right:20px;
bottom:20px; /* antes 30px */
z-index:9999;
}

/* BURBUJA */

.chat-tooltip{
position:absolute;
right:70px;
bottom:15px;
background:#fff;
padding:10px 14px;
border-radius:8px;
font-size:13px;
box-shadow:0 4px 30px rgba(37, 112, 255, 0.37);
animation:fadeIn .6s;

white-space: nowrap; /* evita salto de línea */
}

/* BOTÓN */

.chat-button{
width:60px;
height:60px;
border-radius:50%;
border:none;
background:#25D366;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 30px rgba(37, 112, 255, 0.50);
transition:.4s;
}

.chat-button.rotate{
transform:rotate(180deg);
}

/* ICONOS */

.icon.whatsapp::before{
content:"💬";
font-size:26px;
color:white;
}

.chat-button.active .icon.whatsapp::before{
content:"✕";
font-size:28px;
}

/* CAJA CHAT */

.chat-box{
position:absolute;
bottom:80px;
right:0;
width:320px;
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 8px 30px rgba(37, 112, 255, 0.35);

opacity:0;
transform:translateY(40px);
pointer-events:none;
transition:.5s;
}

.chat-box.open{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

/* HEADER */

.chat-header{
background:#008169;
color:white;
padding:20px;

display:flex;
align-items:center;
}

/* icono */

.header-left{
margin-right:12px;
display:flex;
align-items:center;
}

.header-icon{
font-size:30px;
}

/* texto */

.header-right{
display:flex;
flex-direction:column;
}

.chat-title{
font-size:16px;
font-weight:bold;
margin-bottom:4px;
}

.chat-subtitle{
font-size:13px;
opacity:.9;
}

/* BODY */

.chat-body{
padding:15px;
background:#FCF5EB;
}

.chat-info{
font-size:12px;
margin-bottom:12px;
color:#555;
}

/* CONTACTO */

.chat-contact{
display:flex;
align-items:center;
background:white;
padding:12px;
border-radius:5px;
text-decoration:none;
color:#333;
transition:.3s;
border-left:4px solid #25D366; /* línea verde */
margin-bottom:10px; /* separación entre contactos */
}

.chat-contact:hover{
background:#E6FFDA;
}

.avatar{
width:40px;
height:40px;
border-radius:50%;
background:#ddd;
margin-right:10px;
}

.contact-info{
flex:1;
}

.name{
font-weight:bold;
font-size:14px;
}

a .name,
a:hover .name{
color:#333;
text-decoration:none;
}

.role{
font-size:12px;
color:#777;
}

.wa-icon::before{
content:"";
width:10px;
height:10px;
border-radius:50%;
display:inline-block;
margin-right:6px;
}

.online::before{
background:#25D366;
}

.offline::before{
background:#ff4d4d;
}

/* ANIMACIONES */

@keyframes fadeIn{
from{opacity:0; transform:translateY(10px)}
to{opacity:1; transform:translateY(0)}
}

@keyframes slideDown{
from{transform:translateY(-10px); opacity:0}
to{transform:translateY(0); opacity:1}
}

/* RESPONSIVE */

@media(max-width:480px){

.chat-box{
width:90vw;
right:-10px;
}

.chat-tooltip{
display:none;
}

}

.chat-tooltip strong{
font-weight:600;
}

.name{
font-weight:bold;
font-size:14px;

display:flex;
align-items:center;
gap:6px;
}

.agent-icon{
display:flex;
align-items:center;
}

.whatsapp-icon{
width:28px;
height:28px;
}

.chat-button svg{
width:26px;
height:26px;
position:absolute;
transition:0.3s;
}

/* X oculta */

.icon-close{
opacity:0;
transform:rotate(-90deg);
}

/* cuando se abre el chat */

.chat-button.active .icon-whatsapp{
opacity:0;
transform:rotate(90deg);
}

.chat-button.active .icon-close{
opacity:1;
transform:rotate(0deg);
}

.header-whatsapp-icon{
width:32px;
height:32px;
}

.header-icon{
max-height:50px;
width:auto;
object-fit:contain;
display:block;
}

.header-icon-2{
max-height:14px;
width:auto;
object-fit:contain;
display:block;
}

.chat-icon svg{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================
ANIMACIÓN CONTACTOS
========================= */

.chat-contact{
opacity:0;
transform:translateX(40px);
}

/* posiciones iniciales */

.chat-contact:nth-child(2){
transform:translateX(40px);
}

.chat-contact:nth-child(3){
transform:translateX(-40px);
}

.chat-contact:nth-child(4){
transform:translateX(40px);
}

/* cuando el chat se abre */

.chat-box.open .chat-contact{
opacity:1;
transform:translateX(0);
transition:transform .45s ease, opacity .45s ease;
}

/* delays para efecto cascada */

.chat-box.open .chat-contact:nth-child(2){
transition-delay:.15s;
}

.chat-box.open .chat-contact:nth-child(3){
transition-delay:.30s;
}

.chat-box.open .chat-contact:nth-child(4){
transition-delay:.45s;
}