/* =====================================================================
   whatsapp-chat.css — Widget de chat WhatsApp moderno
   Reemplaza al antiguo .whatsapp-float. Cargar después de site-extras.css
   ===================================================================== */
.wa-widget{
    --wa-green:#25D366;
    --wa-teal:#128C7E;
    --wa-dark:#075E54;
    --wa-ink:#0b2545;
    position:fixed; right:24px; bottom:24px; z-index:1500;
    font-family:'Montserrat',sans-serif;
}

/* ---------- Botón flotante ---------- */
.wa-fab{
    position:relative; width:64px; height:64px; border:0; border-radius:22px;
    cursor:pointer; color:#fff; font-size:30px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(145deg,var(--wa-green) 0%,var(--wa-teal) 100%);
    box-shadow:0 12px 30px rgba(18,140,126,.45), inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), border-radius .35s, box-shadow .35s;
    animation:waFloat 4s ease-in-out infinite;
}
.wa-fab::after{ /* reflejo tipo cristal */
    content:''; position:absolute; inset:3px 3px 50% 3px; border-radius:19px 19px 40% 40%;
    background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0)); pointer-events:none;
}
.wa-fab:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 18px 40px rgba(18,140,126,.55); }
.wa-fab:focus-visible{ outline:3px solid rgba(37,211,102,.5); outline-offset:4px; }

.wa-fab i{ position:absolute; transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .25s; }
.wa-ico-close{ font-size:24px; opacity:0; transform:rotate(-90deg) scale(.5); }
.wa-widget.open .wa-fab{ border-radius:50%; animation:none; }
.wa-widget.open .wa-ico-open{ opacity:0; transform:rotate(90deg) scale(.5); }
.wa-widget.open .wa-ico-close{ opacity:1; transform:none; }

/* Anillos de pulso */
.wa-ring{
    position:absolute; inset:0; border-radius:inherit; border:2px solid var(--wa-green);
    animation:waPulse 2.6s cubic-bezier(.2,.6,.4,1) infinite; pointer-events:none;
}
.wa-ring-2{ animation-delay:1.3s; }
.wa-widget.open .wa-ring{ display:none; }

/* Badge de notificación */
.wa-badge{
    position:absolute; top:-6px; right:-6px; min-width:22px; height:22px; padding:0 6px;
    border-radius:11px; background:#ff3b30; color:#fff; font-size:.72rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; border:2px solid #fff;
    transform:scale(0); transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.wa-badge.show{ transform:scale(1); }
.wa-widget.open .wa-badge{ transform:scale(0); }

/* ---------- Globo de aviso ---------- */
.wa-teaser{
    position:absolute; right:78px; bottom:12px; white-space:nowrap;
    background:#fff; color:var(--wa-ink); font-size:.82rem; font-weight:600;
    padding:10px 16px; border-radius:16px 16px 4px 16px;
    box-shadow:0 10px 30px rgba(11,37,69,.18);
    opacity:0; transform:translateX(10px) scale(.9); transform-origin:right bottom;
    transition:opacity .35s, transform .45s cubic-bezier(.34,1.56,.64,1); pointer-events:none;
}
.wa-teaser.show{ opacity:1; transform:none; pointer-events:auto; cursor:pointer; }
.wa-widget.open .wa-teaser{ opacity:0; pointer-events:none; }

/* ---------- Tarjeta de chat ---------- */
.wa-card{
    position:absolute; right:0; bottom:82px; width:340px; max-width:calc(100vw - 32px);
    border-radius:20px; overflow:hidden; background:#fff;
    box-shadow:0 25px 70px rgba(11,37,69,.28);
    opacity:0; visibility:hidden; transform:translateY(16px) scale(.94); transform-origin:right bottom;
    transition:opacity .3s, transform .45s cubic-bezier(.34,1.56,.64,1), visibility .3s;
}
.wa-widget.open .wa-card{ opacity:1; visibility:visible; transform:none; }

.wa-card-head{
    display:flex; align-items:center; gap:12px; padding:18px 18px 16px; color:#fff;
    background:linear-gradient(135deg,var(--wa-dark) 0%,var(--wa-teal) 100%);
}
.wa-avatar{
    position:relative; width:46px; height:46px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:20px;
    background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.35); color:#f1c40f;
}
.wa-online{
    position:absolute; right:0; bottom:1px; width:12px; height:12px; border-radius:50%;
    background:var(--wa-green); border:2px solid var(--wa-dark);
    animation:waBlink 2s ease-in-out infinite;
}
.wa-head-text{ flex:1; line-height:1.3; }
.wa-head-text strong{ display:block; font-size:.95rem; }
.wa-head-text small{ font-size:.72rem; opacity:.85; }
.wa-close{
    width:30px; height:30px; border:0; border-radius:50%; cursor:pointer;
    background:rgba(255,255,255,.12); color:#fff; transition:background .2s;
}
.wa-close:hover{ background:rgba(255,255,255,.25); }

.wa-card-body{
    min-height:120px; padding:20px 18px;
    background-color:#efeae2;
    background-image:radial-gradient(rgba(7,94,84,.07) 1px,transparent 1px);
    background-size:14px 14px;
}
.wa-msg, .wa-typing{
    position:relative; display:inline-block; max-width:88%;
    background:#fff; border-radius:0 14px 14px 14px; box-shadow:0 1px 1px rgba(0,0,0,.08);
}
.wa-msg::before, .wa-typing::before{ /* colita del globo */
    content:''; position:absolute; left:-7px; top:0;
    border-top:8px solid #fff; border-left:8px solid transparent;
}
.wa-msg{
    padding:10px 14px 18px; font-size:.86rem; color:#222; line-height:1.5;
    display:none; animation:waPop .4s cubic-bezier(.34,1.56,.64,1);
}
.wa-msg time{ position:absolute; right:10px; bottom:4px; font-size:.62rem; color:#999; }
.wa-msg.show{ display:inline-block; }

.wa-typing{ padding:12px 16px; display:none; gap:4px; }
.wa-typing.show{ display:inline-flex; }
.wa-typing span{
    width:7px; height:7px; border-radius:50%; background:#9aa5a1;
    animation:waDots 1.2s infinite ease-in-out;
}
.wa-typing span:nth-child(2){ animation-delay:.15s; }
.wa-typing span:nth-child(3){ animation-delay:.3s; }

.wa-cta{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin:14px; padding:14px; border-radius:50px; text-decoration:none;
    color:#fff; font-weight:700; font-size:.82rem; letter-spacing:1px; text-transform:uppercase;
    background:linear-gradient(135deg,var(--wa-green),var(--wa-teal));
    box-shadow:0 8px 20px rgba(37,211,102,.35); transition:transform .25s, box-shadow .25s;
}
.wa-cta i{ font-size:1.25rem; }
.wa-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(37,211,102,.45); }

/* ---------- Animaciones ---------- */
@keyframes waFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.6); opacity:0; } }
@keyframes waBlink{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.6); } 50%{ box-shadow:0 0 0 5px rgba(37,211,102,0); } }
@keyframes waDots{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }
@keyframes waPop{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:none; } }

/* ---------- Móvil ---------- */
@media (max-width:600px){
    .wa-widget{ right:16px; bottom:16px; }
    .wa-fab{ width:58px; height:58px; font-size:27px; border-radius:20px; }
    .wa-teaser{ display:none; }
    .wa-card{ bottom:74px; }
}

@media (prefers-reduced-motion:reduce){
    .wa-fab, .wa-ring, .wa-online, .wa-typing span{ animation:none !important; }
}