* { box-sizing: border-box; margin: 0; padding: 0; }
    body{ background:#EDEEEB; display:flex; justify-content:center; padding:30px 10px; font-family:'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
    .stage{ position:relative; width:460px; height:760px; background:#0b021d; border-radius:6px; overflow:hidden; }

    /* --- Paleta unificada (verde oficial WhatsApp) --- */
    :root{
        --wa-dark:#075E54;
        --wa-dark-2:#0b7a6d;
        --wa-green:#25D366;
        --wa-green-hover:#1fb85a;
    }

    /* --- PANEL (popup) --- */
    .wa-panel{
        position:absolute; right:20px; bottom:96px; width:380px; background-color:#eef3f6; border-radius:10px;
        overflow:hidden; box-shadow:0 12px 34px rgba(7,30,24,0.28);
        opacity:0; visibility:hidden; transform:translateY(14px) scale(0.97); pointer-events:none;
        transition:opacity .22s ease, transform .22s ease, visibility .22s;
    }
    .wa-panel.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto; }

    .chat-header{ background:linear-gradient(135deg, var(--wa-dark-2), var(--wa-dark)); color:white; padding:18px 16px; position:relative; }
    .chat-header-top{ display:flex; align-items:flex-start; gap:12px; }
    .header-whatsapp-icon{ font-size:22px; color:var(--wa-dark); background:#fff; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 3px 8px rgba(0,0,0,0.15); }
    .chat-header-text{ flex:1; }
    .chat-header-text h2{ font-size:17px; font-weight:700; margin-bottom:2px; line-height:1.2; letter-spacing:-.01em; }
    .chat-header-text p{ font-size:11.5px; line-height:1.4; opacity:0.9; }
    .close-btn{
        position:absolute; top:10px; right:10px; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
        color:var(--close-btn-color, white); font-size:13px; cursor:pointer; background:var(--close-btn-bg, rgba(255,255,255,0.14)); border:none; border-radius:50%;
        opacity:0.9; transition:background var(--close-btn-hover-speed,.15s) ease, opacity var(--close-btn-hover-speed,.15s) ease, color var(--close-btn-hover-speed,.15s) ease;
    }
    .close-btn:hover{ opacity:1; background:var(--close-btn-hover-bg, rgba(255,255,255,0.24)); color:var(--close-btn-hover-color, #ffffff); }

    .sub-header{ text-align:center; font-size:11px; color:#6c757d; padding:8px 0 4px; font-weight:500; background:#eef3f6; }

    .advisor-list{ padding:10px; display:flex; flex-direction:column; gap:8px; }
    .advisor-card{
        background-color:var(--card-bg, #ffffff); border-radius:12px; display:flex; align-items:center; justify-content:space-between;
        padding:9px 12px; border:var(--card-border-width, 1px) solid var(--card-border, #dfe5e9); border-left:var(--card-border-left-width, 3px) solid var(--card-border-left, var(--wa-green));
        text-decoration:none; color:inherit; cursor:pointer;
        transition:background-color var(--card-hover-speed, .15s) ease, transform var(--card-hover-speed, .15s) ease,
                   box-shadow var(--card-hover-shadow-speed, .15s) ease, border-color var(--card-hover-speed, .15s) ease,
                   border-left-color var(--card-hover-speed, .15s) ease;
    }
    .advisor-card:hover{ background-color:var(--card-hover-bg,#f5f9f7); border-color:var(--card-border-hover, var(--card-border, #dfe5e9)); border-left-color:var(--card-border-left-hover, var(--wa-green)); transform:translateY(-1px); box-shadow:var(--card-hover-shadow, 0 4px 12px rgba(7,30,24,0.1)); }
    .is-admin-preview .advisor-card:hover{ transform:none; }
    .advisor-info{ display:flex; align-items:center; gap:10px; min-width:0; }
    .avatar-container{ position:relative; width:44px; height:44px; flex-shrink:0; }
    .advisor-avatar{ width:44px; height:44px; object-fit:cover; border-radius:50%; border:1px solid #dfe5e9; display:block; }
    .status-dot{ position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:var(--dot-color-active, var(--wa-green)); border:2px solid #ffffff; animation:dotBlink 1.6s ease-in-out infinite; }
    .status-dot.inactive{ background:var(--dot-color-inactive, #a8adaa); animation:none; }
    @keyframes dotBlink{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
    .advisor-details{ display:flex; flex-direction:column; min-width:0; }
    .advisor-role{ font-size:12px; color:#495057; font-weight:600; line-height:1.2; }
    .advisor-name-row{ display:flex; align-items:center; gap:6px; margin-top:2px; }
    .fi{ font-size:13px; border-radius:2px; }
    .advisor-name{ font-size:14px; font-weight:500; color:#212529; }
    .card-icon{ color:var(--wa-green); font-size:26px; flex-shrink:0; margin-left:8px; }

    /* --- DISPARADOR (botón + tooltip, siempre visible) --- */
    .wa-trigger{ position:absolute; right:20px; bottom:20px; }
    .fab-wrap{ position:relative; display:inline-flex; align-items:center; }
    .chat-bubble-prompt{
        position:absolute; background:var(--tooltip-bg, white); padding:8px 14px; border-radius:20px; font-size:12px; color:var(--tooltip-text-color, #212529);
        box-shadow:0 3px 10px rgba(0,0,0,0.14); border:1px solid #ececec; font-weight:500; white-space:nowrap;
        cursor:pointer; transition:box-shadow var(--tooltip-hover-speed,.15s) ease, transform var(--tooltip-hover-speed,.15s) ease, background-color var(--tooltip-hover-speed,.15s) ease, color var(--tooltip-hover-speed,.15s) ease;
    }
    .fab-wrap.tt-left .chat-bubble-prompt{ right:calc(100% + var(--tooltip-margin, 10px)); top:50%; transform:translateY(-50%); }
    .fab-wrap.tt-right .chat-bubble-prompt{ left:calc(100% + var(--tooltip-margin, 10px)); top:50%; transform:translateY(-50%); }
    .fab-wrap.tt-top .chat-bubble-prompt{ bottom:calc(100% + var(--tooltip-margin, 10px)); left:50%; transform:translateX(-50%); }
    .fab-wrap.tt-bottom .chat-bubble-prompt{ top:calc(100% + var(--tooltip-margin, 10px)); left:50%; transform:translateX(-50%); }
    .chat-bubble-prompt:hover{ box-shadow:var(--tooltip-hover-shadow, 0 5px 14px rgba(0,0,0,0.2)); background-color:var(--tooltip-hover-bg, var(--tooltip-bg, white)); color:var(--tooltip-hover-text-color, var(--tooltip-text-color, #212529)); animation-play-state:paused !important; }
    .chat-bubble-prompt:hover #triggerBubbleInner{ animation-play-state:paused !important; }
    .fab-wrap.tt-left .chat-bubble-prompt:hover, .fab-wrap.tt-right .chat-bubble-prompt:hover{ transform:translateY(-50%) scale(var(--tooltip-hover-scale,1)); transition:transform var(--tooltip-hover-speed,.15s) ease, box-shadow var(--tooltip-hover-speed,.15s) ease, background-color var(--tooltip-hover-speed,.15s) ease, color var(--tooltip-hover-speed,.15s) ease; }
    .fab-wrap.tt-top .chat-bubble-prompt:hover, .fab-wrap.tt-bottom .chat-bubble-prompt:hover{ transform:translateX(-50%) scale(var(--tooltip-hover-scale,1)); transition:transform var(--tooltip-hover-speed,.15s) ease, box-shadow var(--tooltip-hover-speed,.15s) ease, background-color var(--tooltip-hover-speed,.15s) ease, color var(--tooltip-hover-speed,.15s) ease; }
    .fab-badge{
        position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:50%;
        background:#E23B3B; color:#fff; border:2px solid #fff; font-size:10px; font-weight:700;
        display:none; align-items:center; justify-content:center; line-height:1;
    }
    .floating-whatsapp{
        position:relative; background-color:var(--btn-bg, var(--wa-green)); width:56px; height:56px; border-radius:50%; display:flex; align-items:center;
        justify-content:center; color:white; font-size:28px; box-shadow:0 4px 14px rgba(7,30,24,0.35);
        cursor:pointer; border:none; flex-shrink:0;
        animation:wa-pulse 2.2s ease-out infinite; transition:transform var(--btn-hover-speed,.15s) ease, background-color var(--btn-hover-speed,.15s) ease;
    }
    .floating-whatsapp:hover{ background-color:var(--btn-hover-bg, var(--btn-bg, var(--wa-green-hover))); transform:var(--btn-hover-transform, scale(1.06)); animation-play-state:paused !important; }
    #fabIconDefault{ color:var(--icon-color, #ffffff); transition:color var(--btn-hover-speed,.15s) ease; }
    #fabIconCustomMask{ background-color:var(--icon-color, #ffffff); transition:background-color var(--btn-hover-speed,.15s) ease; }
    .floating-whatsapp:hover #fabIconDefault{ color:var(--btn-hover-icon-color, var(--icon-color, #ffffff)); }
    .floating-whatsapp:hover #fabIconCustomMask{ background-color:var(--btn-hover-icon-color, var(--icon-color, #ffffff)); }
    .floating-whatsapp.fab-anim-none{ animation:none; }
    .floating-whatsapp.fab-anim-bounce{ animation:fab-bounce 1.8s ease-in-out infinite; }
    .floating-whatsapp.fab-anim-float{ animation:fab-float 2.6s ease-in-out infinite; }
    .floating-whatsapp.fab-anim-breathe{ animation:fab-breathe 2.2s ease-in-out infinite; }
    .floating-whatsapp.fab-anim-sway{ animation:fab-sway 2s ease-in-out infinite; }
    .floating-whatsapp.fab-anim-flash{ animation:fab-flash 2s ease-in-out infinite; }
    @keyframes wa-pulse{
        0%{ box-shadow:var(--btn-shadow, 0 4px 14px rgba(7,30,24,0.35)), 0 0 0 0 rgba(37,211,102,0.55); }
        70%{ box-shadow:var(--btn-shadow, 0 4px 14px rgba(7,30,24,0.35)), 0 0 0 14px rgba(37,211,102,0); }
        100%{ box-shadow:var(--btn-shadow, 0 4px 14px rgba(7,30,24,0.35)), 0 0 0 0 rgba(37,211,102,0); }
    }
    @keyframes fab-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
    @keyframes fab-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
    @keyframes fab-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
    @keyframes fab-sway{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-4deg); } 75%{ transform:rotate(4deg); } }
    @keyframes fab-flash{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }
    @keyframes tt-pulse-ring{ 0%{ box-shadow:0 3px 10px rgba(0,0,0,0.14), 0 0 0 0 rgba(37,211,102,.45); } 70%{ box-shadow:0 3px 10px rgba(0,0,0,0.14), 0 0 0 8px rgba(37,211,102,0); } 100%{ box-shadow:0 3px 10px rgba(0,0,0,0.14), 0 0 0 0 rgba(37,211,102,0); } }
    .chat-bubble-prompt.tt-anim-pulse{ animation:tt-pulse-ring 1.8s ease-out infinite; }
    #triggerBubbleInner{ display:inline-block; }
    #triggerBubbleInner.tt-anim-bounce{ animation:fab-bounce 1.8s ease-in-out infinite; }
    #triggerBubbleInner.tt-anim-float{ animation:fab-float 2.6s ease-in-out infinite; }
    #triggerBubbleInner.tt-anim-breathe{ animation:fab-breathe 2.2s ease-in-out infinite; }
    #triggerBubbleInner.tt-anim-sway{ animation:fab-sway 2s ease-in-out infinite; }
    #triggerBubbleInner.tt-anim-flash{ animation:fab-flash 2s ease-in-out infinite; }