/* ═══════════════════════════════════════════════════════
   WIDGET CHAT — CSS UNIFICADO (reemplaza TODO el anterior)
   ═══════════════════════════════════════════════════════ */

/* ── Widget contenedor ───────────────────────────────── */
.whatsapp-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    font-family: 'Poppins', sans-serif;
}

/* ── Botón flotante ──────────────────────────────────── */
.whatsapp-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(37,211,102,.5);
    font-size: 1.85rem;
    color: #fff;
    position: relative;
    transition: transform .2s;
    animation: pulse 2s infinite;
}
.whatsapp-button:hover { transform: scale(1.08); }
.whatsapp-button i { color: white; font-size: 2rem; }

/* ── Ventana del chat — DESKTOP ──────────────────────── */
.whatsapp-chat {
    position: fixed;
    bottom: 94px;
    right: 24px;
    width: 340px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    display: none;
    flex-direction: column;
    overflow: hidden;
    height: 480px;
}
.whatsapp-chat.active { display: flex; }

/* ── Header ──────────────────────────────────────────── */
.chat-header {
    background: linear-gradient(135deg, #075e54, #128c7e);
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}
.chat-header-info { flex: 1; min-width: 0; }
.chat-header-info h4 {
    margin: 0; color: #fff; font-size: .95rem; font-weight: 700;
}
.chat-header-info p {
    margin: 0; color: rgba(255,255,255,.85); font-size: .75rem;
    display: flex; align-items: center; gap: 4px;
}
.close-chat {
    background: transparent; border: none;
    color: rgba(255,255,255,.8); font-size: 1.1rem;
    cursor: pointer; padding: 4px; flex-shrink: 0; line-height: 1;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
}
.close-chat:hover { color: #fff; }

.chat-status-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: #25D366; flex-shrink: 0;
    animation: pulseDot 2s infinite;
}
.chat-user-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(255,255,255,.2); color: #fff;
    border-radius: 20px; padding: 1px 8px;
    font-size: .7rem; font-weight: 600; margin-top: 3px;
}

/* ── Spinner ─────────────────────────────────────────── */
#chat-loading {
    flex: 1; display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: .75rem; color: #9ca3af; font-size: .82rem;
}
#chat-loading i { font-size: 1.6rem; animation: spin 1s linear infinite; }

/* ── Pantalla inicio ─────────────────────────────────── */
#chat-inicio {
    display: none;
    flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1.5rem; gap: 1rem; text-align: center; flex: 1;
}
#chat-inicio i { font-size: 2.5rem; color: #25D366; }
#chat-inicio p { color: #374151; font-size: .875rem; margin: 0; }

#chat-nombre-input {
    width: 100%; padding: .6rem 1rem;
    border: 1.5px solid #d1d5db; border-radius: 8px;
    font-size: 16px; font-family: inherit;
    outline: none; box-sizing: border-box; transition: border-color .2s;
}
#chat-nombre-input:focus { border-color: #25D366; }
#chat-nombre-input.error { border-color: #dc2626; }

.btn-start {
    width: 100%; padding: .65rem; background: #25D366; color: #fff;
    border: none; border-radius: 8px; font-size: .9rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    transition: opacity .2s;
}
.btn-start:hover    { opacity: .88; }
.btn-start:disabled { opacity: .55; cursor: not-allowed; }

/* ── Chat activo ─────────────────────────────────────── */
#chat-activo {
    display: none;
    flex-direction: column; flex: 1; min-height: 0;
}
.chat-body {
    flex: 1; overflow-y: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 3px;
    background: #ece5dd; min-height: 0;
    -webkit-overflow-scrolling: touch;
}
.chat-input {
    display: flex; gap: .5rem; padding: .65rem .85rem;
    border-top: 1px solid #d1d5db; background: #f0f0f0;
    flex-shrink: 0; align-items: center;
}
.chat-input input {
    flex: 1; padding: .5rem .9rem; border: 1px solid #ccc;
    border-radius: 22px; font-size: 16px; font-family: inherit;
    outline: none; background: #fff; transition: border-color .2s;
    min-width: 0;
}
.chat-input input:focus { border-color: #25D366; }
.chat-input button {
    width: 38px; height: 38px; min-width: 38px;
    background: #25D366; color: #fff;
    border: none; border-radius: 50%; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; transition: opacity .2s;
}
.chat-input button:hover { opacity: .88; }

/* ── Burbujas ────────────────────────────────────────── */
.msg-visitante {
    background: #dcf8c6; color: #1f2937;
    align-self: flex-end; margin-left: auto;
    border-radius: 12px 12px 2px 12px;
    padding: 8px 12px; max-width: 82%; margin-bottom: 2px;
    font-size: .875rem; word-break: break-word;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
    animation: fadeInMsg .18s ease-out;
}
.msg-admin {
    background: #fff; color: #1f2937;
    align-self: flex-start;
    border-radius: 12px 12px 12px 2px;
    padding: 8px 12px; max-width: 82%; margin-bottom: 2px;
    font-size: .875rem; word-break: break-word;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
    animation: fadeInMsg .18s ease-out;
}
.msg-visitante small, .msg-admin small {
    display: block; font-size: .68rem;
    color: rgba(0,0,0,.38); margin-top: 3px; text-align: right;
}
.msg-sistema {
    text-align: center; font-size: .73rem; color: #888;
    padding: 6px 0; width: 100%; align-self: center;
}

/* ── Badge ───────────────────────────────────────────── */
.chat-notif-badge {
    position: absolute; top: -4px; right: -4px;
    background: #dc2626; color: #fff; border-radius: 50%;
    width: 20px; height: 20px; font-size: .68rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ── Animaciones ─────────────────────────────────────── */
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0   rgba(37,211,102,0.5); }
    70%  { box-shadow: 0 0 0 12px rgba(37,211,102,0);  }
    100% { box-shadow: 0 0 0 0   rgba(37,211,102,0);   }
}
@keyframes pulseDot {
    0%,100% { box-shadow: 0 0 0 2px rgba(37,211,102,.3); }
    50%      { box-shadow: 0 0 0 5px rgba(37,211,102,.1); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeInMsg {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════
   MÓVIL  ≤ 520px
   ═══════════════════════════════════════════════════════ */
@media (max-width: 520px) {

    .whatsapp-widget {
        bottom: 16px;
        right: 16px;
    }

    /* La ventana ocupa todo el ancho del viewport */
    .whatsapp-chat {
        position: fixed;
        bottom: 88px;
        left: 12px;
        right: 12px;
        width: auto;           /* ← clave: no ancho fijo */
        height: auto;
        max-height: calc(100svh - 108px);
        border-radius: 14px;
    }

    #chat-activo {
        min-height: 0;
    }

    .chat-body {
        max-height: calc(100svh - 108px - 58px - 60px);
    }

    #chat-inicio {
        padding: 1.5rem 1.25rem;
        gap: .75rem;
    }
}