/* =========================================
   1. VARIABLES & CONFIGURACIÓN BASE
   ========================================= */
:root {
    /* Colores */
    --vexwod-primary: #25D366;
    --vexwod-primary-dark: #20b857;
    --vexwod-white: #ffffff;
    --vexwod-black: #111111;
    --vexwod-text-gray: #666666;
    --vexwod-border: #e7e7e7;
    --vexwod-shadow: rgba(0, 0, 0, 0.18);
    --vexwod-error-bg: #ffecec;
    --vexwod-error-text: #a40000;

    /* Dimensiones y Posición */
    --vexwod-bottom: 24px;
    --vexwod-side: 24px;
    --vexwod-width: 330px;
    --vexwod-radius: 16px;

    /* Tipografía */
    --vexwod-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    /*--vexwod-fs-title: 16px;*/
    --vexwod-fs-acc: 14px;
    --vexwod-fs-reg: 13px;
    --vexwod-fs-small: 12px;

    --vexwod-on-primary: #ffffff; /* texto encima del primary */
    --vexwod-label-width: 221px;  /* por si no viene del admin */
}

.vexwod-wa-widget {
    position: fixed;
    z-index: 999999;
    /*z-index: 10;*/
    bottom: var(--vexwod-bottom);
    font-family: var(--vexwod-font);
    box-sizing: border-box;
}

.vexwod-wa-widget * {
    box-sizing: border-box;
}

/* Posicionamiento dinámico */
.vexwod-wa-widget.is-right { right: var(--vexwod-side); }
.vexwod-wa-widget.is-left  { left: var(--vexwod-side); }
/* Por defecto a la derecha */
.vexwod-wa-widget:not(.is-left) {
    right: var(--vexwod-side);
    text-align: right;
}


/* =========================================
   BOTÓN FLOTANTE (FAB) REDISEÑADO
   ========================================= */

/* 1. Ajustes del contenedor principal */
.vexwod-wa-fab {
    /* Variables locales para facilitar cambios */
    --fab-size: 60px;
    --fab-icon-size: 32px;
    --pulse-color: rgba(37, 211, 102, 0.5); /* Color de la onda */

    position: relative; /* Necesario para los efectos absolutos */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%; /* Círculo perfecto */

    background: var(--vexwod-header-bg);
    color: var(--vexwod-on-primary);
    border: 0;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    padding: 0; /* Quitamos padding para centrar bien */

    /* Aseguramos que el botón esté por encima de la animación */
    /*z-index: 10;*/
    transition: transform 0.3s ease;
}

/* Efecto hover simple */
.vexwod-wa-fab:focus,
.vexwod-wa-fab:hover {
    transform: scale(1.05);
    /*background: #44af3e;*/
}

/* 2. Ocultar el texto para dejar solo el icono */
.vexwod-wa-fab-text {
    display: none;
}

/* 3. Ajustar el tamaño del Icono */
.vexwod-wa-fab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.vexwod-wa-fab-icon svg {
    width: var(--fab-icon-size);
    height: var(--fab-icon-size);
}

/* 4. ANIMACIÓN PULSE (Ondas infinitas) */
/* Usamos ::before y ::after para crear dos ondas */
.vexwod-wa-fab::before,
.vexwod-wa-fab::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--vexwod-header-bg);
    border-radius: 50%;
    z-index: -1; /* Detrás del botón */
    opacity: 0;
    pointer-events: none; /* Para que no interfiera con el click */
}

/* Animación para la primera onda */
.vexwod-wa-fab::before {
    animation: vexwod-pulse 2s infinite;
}

/* Animación para la segunda onda (con retraso para efecto continuo) */
.vexwod-wa-fab::after {
    animation: vexwod-pulse 2s infinite 0.6s;
}

/* Definición de la animación */
@keyframes vexwod-pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.8); /* Crece hasta 1.8 veces su tamaño */
        opacity: 0; /* Se desvanece */
    }
}

/* Mantener estilos de la etiqueta flotante si la usas */
.vexwod-wa-fab-label {
    display: block;
    /*max-width: 220px;*/
    max-width: var(--vexwod-label-width);
    background: #fff;
    color: #111;
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 15px; /* Un poco más de margen por la animación */
    margin-left: auto;
    margin-right: 0;
    text-align: left;
}
.vexwod-wa-widget.is-left .vexwod-wa-fab-label {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}


/* =========================================
   3. PANEL PRINCIPAL
   ========================================= */
.vexwod-wa-panel {
    position: absolute;
    bottom: -4px; /* Encima del botón */
    right: 0;
    width: var(--vexwod-width);
    max-width: calc(100vw - 40px);
    background: var(--vexwod-white);
    border-radius: var(--vexwod-radius);
    box-shadow: 0 18px 50px rgba(0,0,0,0.22);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);

    /* Animación */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.vexwod-wa-widget.is-left .vexwod-wa-panel {
    right: auto;
    left: 0;
}

.vexwod-wa-panel[hidden] {
    display: block !important;
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    pointer-events: none;
}


/* =========================================
   4. HEADER
   ========================================= */
.vexwod-wa-header {
    background: var(--vexwod-header-bg);
    color: var(--vexwod-header-text);
    padding: 16px;
    position: relative;
}

.vexwod-wa-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.vexwod-wa-header-title {
    font-size: var(--vexwod-fs-title);
    font-weight: 900;
    margin: 0;
}

.vexwod-wa-header-subtitle {
    margin-top: 4px;
    font-size: var(--vexwod-fs-reg);
    opacity: 0.95;
    line-height: 1.4;
}

.vexwod-wa-close {
    all:unset;
    background: rgba(0,0,0,.4);
    border: none;
    color: var(--vexwod-white);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    transition: background 0.2s;
}
.vexwod-wa-close:hover {
    background: rgba(0,0,0,.6);
}


/* =========================================
   5. CUERPO Y LISTA DE AGENTES
   ========================================= */

.vexwod-wa-agents {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

/* Soporte dual para ambas clases (antigua y nueva) */
.vexwod-wa-agent-option,
.vexwod-wa-agent-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--vexwod-white);
    border: 1px solid var(--vexwod-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.vexwod-wa-agent-option:hover,
.vexwod-wa-agent-btn:hover {
    border-color: #d0d0d0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.vexwod-wa-agent-option.is-selected,
.vexwod-wa-agent-btn.is-selected {
    border-color: var(--vexwod-primary);
    background: #f0fdf4;
    box-shadow: 0 0 0 2px rgba(37,211,102,0.12);
}

/* Avatares */
.vexwod-wa-agent-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vexwod-wa-agent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vexwod-wa-agent-avatar--placeholder {
    width: 100%;
    height: 100%;
    background: #ccc;
    border-radius: 50%;
}

/* Info del Agente */
.vexwod-wa-agent-info { flex: 1; min-width: 0; }

.vexwod-wa-agent-name {
    font-weight: 800;
    font-size: var(--vexwod-fs-acc);
    color: var(--vexwod-black);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vexwod-wa-agent-role {
    font-size: var(--vexwod-fs-reg);
    color: var(--vexwod-text-gray);
    margin-top: 2px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Checkbox visual (estilo opción 2) */
.vexwod-wa-agent-check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #cfcfcf;
    flex-shrink: 0;
}
.vexwod-wa-agent-option.is-selected .vexwod-wa-agent-check {
    border-color: var(--vexwod-primary);
    background: var(--vexwod-primary);
}


/* =========================================
   6. VISTA DE FORMULARIO
   ========================================= */
.vexwod-wa-view[hidden] {
    display: none;
}

.vexwod-wa-back {
    background: none;
    border: none;
    color: var(--vexwod-text-gray);
    font-size: var(--vexwod-fs-reg);
    font-weight: 700;
    cursor: pointer;
    padding: 0 0 10px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vexwod-wa-back:hover { color: var(--vexwod-black); }
.vexwod-wa-back::before { content: "←"; }

/* Tarjeta seleccionado (Formulario) */
.vexwod-wa-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--vexwod-white);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--vexwod-border);
    margin-bottom: 12px;
}
.vexwod-wa-selected-avatar {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
}
.vexwod-wa-selected-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vexwod-wa-selected-meta { display: flex; flex-direction: column; }
.vexwod-wa-selected-name { font-weight: 800; font-size: 13px; }
.vexwod-wa-selected-title { font-size: 11px; color: var(--vexwod-text-gray); }

/* Inputs */
.vexwod-wa-form { display: grid; gap: 10px; }

.vexwod-wa-field label,
.vexwod-wa-field span {
    display: block;
    font-size: var(--vexwod-fs-small);
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--vexwod-black);
}

.vexwod-wa-field input,
.vexwod-wa-field textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #dedede !important;
    border-radius: 10px !important;
    font-size: var(--vexwod-fs-reg);
    font-family: inherit;
    outline: none;
}

.vexwod-wa-field input:focus,
.vexwod-wa-field textarea:focus {
    border-color: var(--vexwod-header-bg) !important;
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.12);
}

.vexwod-wa-send {
    all: unset;
    /*width: 100%;*/
    padding: 12px;
    background: var(--vexwod-header-bg);
    color: var(--vexwod-header-text);
    border: none;
    border-radius: 12px;
    font-weight: 900;
    font-size: var(--vexwod-fs-reg);
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vexwod-wa-send:focus,
.vexwod-wa-send:hover {
    filter: brightness(0.95);
    /*background: #44af3e;*/
}

/* Extras (GDPR, Errores, Direct Chat) */
.vexwod-wa-gdpr {
    font-size: var(--vexwod-fs-small);
    color: var(--vexwod-text-gray);
    line-height: 1.35;
}

.vexwod-wa-error {
    /*margin-top: 10px;*/
    padding: 10px;
    background: var(--vexwod-error-bg);
    color: var(--vexwod-error-text);
    font-size: var(--vexwod-fs-reg);
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
}

/* Estilo de Éxito (Verde) */
.vexwod-wa-error.is-success {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

.vexwod-wa-direct {
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    background: var(--vexwod-black);
    color: var(--vexwod-white);
    font-weight: 900;
    font-size: var(--vexwod-fs-reg);
    margin-top: 10px;
    display: inline-block;
}

/* =========================================
   7. RESPONSIVE
   ========================================= */
@media (max-width: 480px) {
    .vexwod-wa-panel {
        bottom: 0;
        right: 0;
        left: 0;
        width: 90%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        margin: auto;
    }

    .vexwod-wa-widget {
        bottom: 0;
        right: 0 !important;
        width: 100%;
        pointer-events: none;
    }

    .vexwod-wa-fab {
        pointer-events: auto;
        /*position: absolute;*/
        bottom: 16px;
        right: 16px;
    }

    .vexwod-wa-panel {
        pointer-events: auto;
        max-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .vexwod-wa-body {
        flex: 1;
        max-height: 100% !important;
    }
    .vexwod-wa-field input,
    .vexwod-wa-field textarea{
        padding: 5px;
    }
}

/* Asegura que el dropdown de países esté por encima de todo */
.iti--container {
    z-index: 999999 !important;
}

/* Ajuste para que el input no se vea comprimido */
.iti {
    width: 100%;
    display: block !important;
}

/* ===== WhatsApp-like hero (bubble + CTA) ===== */
.vexwod-wa-brand {
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 10px;
}
.vexwod-wa-brand-title {
    font-size: var(--vexwod-fs-title);
    font-weight: 900;
}
.vexwod-wa-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}

.vexwod-wa-body {
    background: var(--vexwod-white);
    padding: 14px 16px 16px;
    text-align: left;
    max-height: 60vh;
    overflow-y: auto;
}

.vexwod-wa-welcome {
    display: grid;
    gap: 12px;
    padding: 6px 0 14px 0;
    /*margin-bottom: 15px;*/
}

.vexwod-wa-bubble {
    /*background: var(--vexwod-white);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.14);
    border: 1px solid rgba(0,0,0,0.06);
    position: relative;*/
    line-height: 1.35;
    font-size: var(--vexwod-fs-reg);
}

/*.vexwod-wa-bubble::after {
    content: "";
    position: absolute;
    left: 22px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: var(--vexwod-white);
    border-right: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transform: rotate(45deg);
}*/

.vexwod-wa-cta {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 12px 14px;
    background: var(--vexwod-primary);
    color: var(--vexwod-white);
    font-weight: 900;
    font-size: var(--vexwod-fs-reg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 12px 26px rgba(37,211,102,0.35);
}

.vexwod-wa-cta:hover { filter: brightness(0.97); }

.vexwod-wa-cta-icon {
    display: inline-flex;
    transform: translateY(1px);
}

/* Select same style as inputs */
.vexwod-wa-field select {
    width: 100%;
    padding: 10px;
    border: 1px solid #dedede;
    border-radius: 10px;
    font-size: var(--vexwod-fs-reg);
    font-family: inherit;
    outline: none;
    background: #fff;
}
.vexwod-wa-field select:focus {
    border-color: var(--vexwod-primary);
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.12);
}

/* Disclosure (agent optional) */
.vexwod-wa-disclosure {
    margin-top: 6px;
    border: 1px solid var(--vexwod-border);
    border-radius: 12px;
    padding: 10px;
    background: #fafafa;
}
.vexwod-wa-disclosure > summary {
    cursor: pointer;
    font-weight: 900;
    font-size: var(--vexwod-fs-reg);
    color: var(--vexwod-black);
    list-style: none;
}
.vexwod-wa-disclosure > summary::-webkit-details-marker { display: none; }
.vexwod-wa-disclosure > summary::after {
    content: "▾";
    float: right;
    opacity: 0.7;
}
.vexwod-wa-disclosure[open] > summary::after { content: "▴"; }

.d-none{
    display: none !important;
}


/* =========================================================
   VEXWOD – Anti-conflict shield (scoped to #vexwod-wa-widget)
   Pegar al FINAL del CSS
========================================================= */

#vexwod-wa-widget,
#vexwod-wa-widget * {
    box-sizing: border-box;
}

#vexwod-wa-widget button,
#vexwod-wa-widget input,
#vexwod-wa-widget textarea,
#vexwod-wa-widget select {
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
}

/* Evita que reglas globales del tema (button, [type=submit]) deformen estilos */
#vexwod-wa-widget button,
#vexwod-wa-widget [type="button"],
#vexwod-wa-widget [type="submit"],
#vexwod-wa-widget [type="reset"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
}

/* Reset fuerte SOLO para botones del plugin */
/*#vexwod-wa-widget .vexwod-wa-fab,*/
#vexwod-wa-widget .vexwod-wa-close,
#vexwod-wa-widget .vexwod-wa-send,
#vexwod-wa-widget .vexwod-wa-direct,
#vexwod-wa-widget .vexwod-wa-back,
#vexwod-wa-widget .vexwod-wa-cta {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
}

/* Reaplicar botón FAB (porque all:unset lo limpia) */
#vexwod-wa-widget .vexwod-wa-fab {
    --fab-size: 60px;
    --fab-icon-size: 32px;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    background: var(--vexwod-header-bg);
    color: var(--vexwod-on-primary);
    border: 0;
    padding: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}
#vexwod-wa-widget .vexwod-wa-fab:hover,
#vexwod-wa-widget .vexwod-wa-fab:focus {
    transform: scale(1.05);
}
#vexwod-wa-widget .vexwod-wa-fab::before,
#vexwod-wa-widget .vexwod-wa-fab::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vexwod-header-bg);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}

/* Reaplicar botón CLOSE */
#vexwod-wa-widget .vexwod-wa-close {
    background: rgba(0,0,0,.4);
    color: var(--vexwod-white);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    transition: background .2s;
}
#vexwod-wa-widget .vexwod-wa-close:hover,
#vexwod-wa-widget .vexwod-wa-close:focus {
    background: rgba(0,0,0,.6);
}

/* Reaplicar botón SEND */
#vexwod-wa-widget .vexwod-wa-send {
    padding: 12px;
    background: var(--vexwod-header-bg);
    color: var(--vexwod-header-text);
    border-radius: 12px;
    font-weight: 900;
    font-size: var(--vexwod-fs-reg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    transition: filter .2s;
    line-height: 1.2;
}
#vexwod-wa-widget .vexwod-wa-send:hover,
#vexwod-wa-widget .vexwod-wa-send:focus {
    filter: brightness(0.95);
}
#vexwod-wa-widget .vexwod-wa-field{
    margin-bottom: 0;
}
    /* Inputs: blindaje contra temas que los vuelven transparentes o uppercase */
#vexwod-wa-widget .vexwod-wa-field input,
#vexwod-wa-widget .vexwod-wa-field textarea,
#vexwod-wa-widget .vexwod-wa-field select {
    background-color: #fff !important;
    color: var(--vexwod-black) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: fit-content;
    margin: 0;
    box-shadow:none;
}

/* Select: flecha consistente (por si un tema rompe appearance) */
#vexwod-wa-widget .vexwod-wa-field select {
    padding: 10px 38px 10px 10px;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

.vexwod-wa-gdpr-container {
    margin: 15px 0;
    font-size: 13px;
    line-height: 1.4;
}

.vexwod-wa-gdpr-label {
    display: flex;
    align-items: flex-start;
    /*gap: 10px;*/
    cursor: pointer;
}

.vexwod-wa-gdpr-label input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.vexwod-wa-gdpr-text a {
    color: inherit;
    text-decoration: underline;
}