/**
 * OM UI — Look fintech serio (2026-06-03).
 * -----------------------------------------------------------
 * BLINDAJE 1: TODO selector scopeado con body.om-portal-app
 *             para NO afectar /operaciones/ (body.om-portal-ops).
 * BLINDAJE 2: el sidebar oscuro + colapso SOLO en
 *             @media (min-width: 861px). El móvil sigue con
 *             el CSS bulletproof off-canvas + JS drawer-root.
 *
 * Se carga DESPUÉS de om-portal-v2-extra.css.
 */

/* ============================================================
   Tokens locales derivados (degradado + magenta).
   Los tokens base viven en om-agencias/assets/css/tokens.css.
   ============================================================ */
body.om-portal-app {
    --sb-grad: linear-gradient(180deg, var(--om-sidebar-deep, #1A0857) 0%, var(--om-sidebar-mid, #29108F) 60%, var(--om-primary-dark, #5C1F9E) 100%);
    --topbar-h: 60px;
}

/* ============================================================
   Canvas del contenido principal
   ============================================================ */
body.om-portal-app .omp-app-main {
    background: var(--om-canvas, #F4F6FB);
}

/* ============================================================
   Topbar: fondo blanco + logo agencia y user a la derecha
   ============================================================ */
body.om-portal-app .omp-app-topbar {
    background: #fff;
    border-bottom: 1px solid var(--om-border, #E2E8F0);
}
body.om-portal-app .omp-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 4px;
}
/* Fix (2026-06-03): el grid base de .omp-app-topbar asumía burger como 1er hijo.
   En desktop el burger es display:none → el grid colapsa mal y manda el wrap
   derecho a las columnas 1-2. Cambiamos a flex SOLO en desktop. El móvil queda
   con su grid original (auto 1fr auto) que sí funciona porque ahí el burger está. */
@media (min-width: 861px) {
    body.om-portal-app .omp-app-topbar {
        display: flex;
        align-items: center;
        /* Sidebar sube a top:0 ocupando el lado izquierdo; reservamos su ancho aquí */
        padding-left: calc(var(--omp-sidebar-w) + 1.25rem);
    }
    body.om-portal-app .omp-app-header-center {
        flex: 1 1 auto;
    }
    body.om-portal-app .omp-topbar-right {
        margin-left: auto;
    }
    /* Sidebar oscuro llega hasta el top — elimina la franja blanca arriba */
    body.om-portal-app .omp-app-sidebar {
        top: 0;
        margin-top: calc(-1 * var(--omp-topbar-h));
        min-height: 100vh;
        z-index: 20;
    }
}
body.om-portal-app .omp-brand-agencia {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    text-decoration: none;
    color: var(--om-text, #0F172A);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.om-portal-app .omp-brand-agencia:hover {
    opacity: 0.85;
}
body.om-portal-app .omp-brand-logo-agencia {
    max-height: 48px;
    width: auto;
    display: block;
}
body.om-portal-app .omp-brand-nombre {
    font-family: var(--om-font, sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--om-text, #0F172A);
    letter-spacing: -0.01em;
}

/* ============================================================
   Sidebar fintech: desktop SOLO (≥861px).
   Móvil intacto (bloque bulletproof de om-portal.css).
   ============================================================ */
@media (min-width: 861px) {

    body.om-portal-app .omp-app-sidebar {
        background: var(--sb-grad);
        border-right: 0;
        color: rgba(255, 255, 255, 0.85);
        padding: 0;
        transition: width 0.2s ease;
        display: flex;
        flex-direction: column;
        overflow: visible; /* permitir que el dropdown del usuario al pie salga del aside */
        height: auto;                                  /* anula el height fijo de om-portal.css: el aside crece con el contenido */
        min-height: calc(100vh - var(--omp-topbar-h)); /* piso = alto visible; el degradado cubre todo el menú por largo que sea */
    }

    /* Header de marca OM + botón de colapso */
    body.om-portal-app .omp-sb-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    body.om-portal-app .omp-sb-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #fff;
        text-decoration: none;
        font-family: var(--om-font, sans-serif);
        font-weight: 700;
        font-size: 13px;
        letter-spacing: -0.01em;
    }
    body.om-portal-app .omp-sb-brand-mark { flex-shrink: 0; }
    body.om-portal-app .omp-sb-brand-text { white-space: nowrap; }
    body.om-portal-app .omp-sb-brand-logo { height: 26px; width: auto; display: block; }
    body.om-portal-app .omp-mini-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 6px;
        color: rgba(255, 255, 255, 0.85);
        cursor: pointer;
        transition: background 0.15s ease, transform 0.2s ease;
    }
    body.om-portal-app .omp-mini-toggle:hover { background: rgba(255, 255, 255, 0.18); }
    html.omp-mini body.om-portal-app .omp-mini-toggle svg { transform: rotate(180deg); }

    /* CTA magenta */
    body.om-portal-app .omp-cta-b2b {
        margin: 14px 14px 6px;
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        padding: 12px 14px;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: background 0.18s ease, border-color 0.18s ease;
    }
    body.om-portal-app .omp-cta-b2b:hover {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.22);
        color: #fff;
    }
    body.om-portal-app .omp-cta-b2b-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        background: rgba(236, 25, 156, 0.22);
        border-radius: 8px;
        flex-shrink: 0;
        color: #F7C2E4;
    }
    body.om-portal-app .omp-cta-b2b-body {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        min-width: 0;
        flex: 1;
    }
    body.om-portal-app .omp-cta-b2b-body strong { font-size: 13px; font-weight: 700; color: #fff; }
    body.om-portal-app .omp-cta-b2b-body em {
        font-size: 11px;
        font-weight: 400;
        font-style: normal;
        color: rgba(255, 255, 255, 0.6);
    }
    body.om-portal-app .omp-cta-b2b-go {
        display: inline-flex;
        align-self: flex-start;
        margin-top: 7px;
        padding: 3px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.20);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: #fff;
    }
    body.om-portal-app .omp-cta-b2b:hover .omp-cta-b2b-go { background: rgba(255, 255, 255, 0.16); }

    /* Nav groups */
    body.om-portal-app .omp-app-sidebar .omp-nav-group { padding: 4px 10px; margin: 0; }
    body.om-portal-app .omp-nav-group-label {
        font-size: 10px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.45);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 14px 8px 6px;
    }
    body.om-portal-app .omp-nav-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.12s ease, color 0.12s ease;
    }
    body.om-portal-app .omp-nav-item svg { color: rgba(255, 255, 255, 0.62); transition: color 0.12s ease; }
    body.om-portal-app .omp-nav-item:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }
    body.om-portal-app .omp-nav-item:hover svg { color: #fff; }
    body.om-portal-app .omp-nav-item.is-active {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        font-weight: 600;
    }
    body.om-portal-app .omp-nav-item.is-active svg { color: #fff; }
    body.om-portal-app .omp-nav-item.is-active::before {
        content: '';
        position: absolute;
        left: -10px;
        top: 8px;
        bottom: 8px;
        width: 3px;
        background: var(--om-magenta, #EC199C);
        border-radius: 0 3px 3px 0;
    }
    body.om-portal-app .omp-nav-item.is-soon {
        color: rgba(255, 255, 255, 0.4);
        cursor: not-allowed;
    }
    body.om-portal-app .omp-nav-item.is-soon:hover { background: transparent; color: rgba(255, 255, 255, 0.4); }
    body.om-portal-app .omp-nav-item-badge {
        margin-left: auto;
        font-size: 9px;
        font-weight: 700;
        padding: 2px 6px;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.55);
        border-radius: 999px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    body.om-portal-app .omp-nav-alert-badge {
        margin-left: auto;
        font-size: 10px;
        font-weight: 700;
        min-width: 18px;
        padding: 2px 6px;
        background: var(--om-magenta, #EC199C);
        color: #fff;
        border-radius: 999px;
        text-align: center;
    }

    /* ===== Pie del sidebar — bloque de usuario ===== */
    body.om-portal-app .omp-sb-foot {
        margin-top: auto;
        padding: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }
    body.om-portal-app .omp-sb-foot .omp-app-user {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.12s ease;
        outline: none;
    }
    body.om-portal-app .omp-sb-foot .omp-app-user:hover,
    body.om-portal-app .omp-sb-foot .omp-app-user:focus-visible {
        background: rgba(255, 255, 255, 0.08);
    }
    body.om-portal-app .omp-sb-foot .omp-app-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        letter-spacing: 0.02em;
    }
    body.om-portal-app .omp-sb-foot .omp-app-user-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1;
        line-height: 1.2;
    }
    body.om-portal-app .omp-sb-foot .omp-app-user-name {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.om-portal-app .omp-sb-foot .omp-app-user-meta {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.55);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.om-portal-app .omp-sb-foot .omp-app-user-chev {
        color: rgba(255, 255, 255, 0.7);
        flex-shrink: 0;
        transition: transform 0.18s ease;
    }
    body.om-portal-app .omp-sb-foot .omp-app-user.is-open .omp-app-user-chev,
    body.om-portal-app .omp-sb-foot .omp-app-user:focus-within .omp-app-user-chev {
        transform: rotate(180deg);
    }

    /* Dropdown abre HACIA ARRIBA (bottom:100%) con fondo blanco para legibilidad */
    body.om-portal-app .omp-sb-foot .omp-user-menu {
        position: absolute;
        top: auto; /* anula el top de om-portal.css: sin esto el dropdown tiene top+bottom y se estira en una caja blanca vacía */
        bottom: calc(100% + 8px);
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid var(--om-border, #E2E8F0);
        border-radius: 10px;
        padding: 6px;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
        opacity: 0;
        visibility: hidden;
        transform: translateY(4px);
        transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
        z-index: 100;
    }
    body.om-portal-app .omp-sb-foot .omp-app-user.is-open .omp-user-menu,
    body.om-portal-app .omp-sb-foot .omp-app-user:focus-within .omp-user-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    body.om-portal-app .omp-sb-foot .omp-user-menu a {
        display: block;
        padding: 8px 12px;
        font-size: 13px;
        color: var(--om-text, #0F172A);
        text-decoration: none;
        border-radius: 6px;
        transition: background 0.12s ease;
    }
    body.om-portal-app .omp-sb-foot .omp-user-menu a:hover {
        background: var(--om-surface-alt, #F8FAFC);
    }
    body.om-portal-app .omp-sb-foot .omp-user-menu a.omp-logout {
        color: var(--om-danger, #DC2626);
    }
    body.om-portal-app .omp-sb-foot .omp-user-menu-sep {
        height: 1px;
        background: var(--om-border, #E2E8F0);
        margin: 4px 6px;
    }

    /* ===== Modo colapsado (html.omp-mini) =====
       Redefinimos --omp-sidebar-w (definido en om-portal.css :root como 240px).
       AMBOS grids (.omp-app-body y .omp-app-topbar) lo consumen, así que
       colapsan a la par sin reglas extra ni hardcodeos. */
    html.omp-mini body.om-portal-app {
        --omp-sidebar-w: 76px;
    }
    html.omp-mini body.om-portal-app .omp-sb-brand-text,
    html.omp-mini body.om-portal-app .omp-sb-brand-logo,
    html.omp-mini body.om-portal-app .omp-nav-label-text,
    html.omp-mini body.om-portal-app .omp-nav-group-label,
    html.omp-mini body.om-portal-app .omp-cta-b2b-body,
    html.omp-mini body.om-portal-app .omp-nav-item-badge {
        display: none;
    }
    html.omp-mini body.om-portal-app .omp-nav-alert-badge {
        position: absolute;
        top: 2px;
        right: 4px;
        margin: 0;
        min-width: 14px;
        padding: 1px 4px;
        font-size: 9px;
    }
    html.omp-mini body.om-portal-app .omp-nav-item {
        justify-content: center;
        padding: 10px 0;
    }
    html.omp-mini body.om-portal-app .omp-cta-b2b {
        justify-content: center;
        padding: 10px;
        margin: 14px 10px 6px;
    }
    html.omp-mini body.om-portal-app .omp-sb-head {
        justify-content: center;
        padding: 16px 8px 12px;
    }
    html.omp-mini body.om-portal-app .omp-sb-brand { gap: 0; }

    /* Foot del usuario en modo mini: solo avatar centrado */
    html.omp-mini body.om-portal-app .omp-sb-foot .omp-app-user-info,
    html.omp-mini body.om-portal-app .omp-sb-foot .omp-app-user-chev {
        display: none;
    }
    html.omp-mini body.om-portal-app .omp-sb-foot .omp-app-user {
        justify-content: center;
        padding: 8px 0;
    }
    html.omp-mini body.om-portal-app .omp-sb-foot .omp-user-menu {
        left: calc(100% + 8px);
        right: auto;
        bottom: 0;
        min-width: 180px;
    }
}

/* ============================================================
   FAB WhatsApp (solo portal de agencias).
   Posición fixed bottom-right. z-index por DEBAJO del drawer móvil (2147483000).
   ============================================================ */
.omp-fab-wa {
    position: fixed;
    bottom: 96px;     /* apilado arriba del launcher de Crisp (bottom-right ~20px + ~60px alto) */
    right: 20px;
    left: auto;
    z-index: 9000;    /* arriba del contenido y topbar; debajo del drawer móvil (2147483000) y toasts (9999) */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.omp-fab-wa-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25D366; /* WhatsApp brand green */
    color: #fff;
    border: 0;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.omp-fab-wa-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5);
}
.omp-fab-wa-menu {
    position: absolute;
    bottom: calc(100% + 10px); /* abre hacia arriba, sobre el botón; entra en el stacking z-9000 del FAB */
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--om-border, #E2E8F0);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15);
    min-width: 240px;
    transform-origin: bottom right;
    transform: scale(0.95) translateY(8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.omp-fab-wa[data-open="true"] .omp-fab-wa-menu {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.omp-fab-wa[data-open="true"] .omp-fab-wa-menu[aria-hidden] { /* override aria once open */ }
.omp-fab-wa-opt {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--om-text, #0F172A);
    transition: background 0.15s ease;
}
.omp-fab-wa-opt:hover { background: var(--om-surface-alt, #F8FAFC); }
.omp-fab-wa-opt-name { font-size: 13px; font-weight: 700; color: var(--om-text, #0F172A); }
.omp-fab-wa-opt-meta { font-size: 11px; color: var(--om-text-muted, #475569); margin-top: 2px; }

/* En móvil el FAB es un poco más pequeño y separado del borde */
@media (max-width: 860px) {
    .omp-fab-wa { bottom: 88px; right: 14px; left: auto; }
    .omp-fab-wa-btn { width: 48px; height: 48px; }
    .omp-fab-wa-menu { min-width: 220px; }
}

/* ============================================================
   F2 (2026-06-03) — Cards y KPIs unificados al look fintech
   Radius var(--om-radius-card) + shadow var(--om-shadow-card).
   Scopeado a body.om-portal-app.
   Vencimientos se scopea con .omv-wrap para NO afectar Ventas
   (Ventas usa .omv-app como wrap distinto).
   ============================================================ */

/* a) Cards/KPIs primarios: radius + shadow base (sin hover, son muertos) */
body.om-portal-app .omh-kpi,
body.om-portal-app .omcli-kpi,
body.om-portal-app .omvja-kpi,
body.om-portal-app .omg-kpi,
body.om-portal-app .omfin-kpi,
body.om-portal-app .omv-wrap .omv-kpi {
    border-radius: var(--om-radius-card);
    box-shadow: var(--om-shadow-card);
}

/* b) Cards CLICABLES (anchor o contienen link interno): radius + shadow base + hover lift */
body.om-portal-app .omcli-card,
body.om-portal-app .omcat-card,
body.om-portal-app .omfly-card {
    border-radius: var(--om-radius-card);
    box-shadow: var(--om-shadow-card);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
body.om-portal-app .omcli-card:hover,
body.om-portal-app .omcat-card:hover,
body.om-portal-app .omfly-card:hover {
    box-shadow: var(--om-shadow-card-hover);
    transform: translateY(-1px);
}

/* c) Override del .omc-card (genérico del Home) — v2.css usa !important con
      box-shadow:none, border-radius 10px, etc. Lo vencemos con !important
      SOLO en las 4 propiedades peleadas. */
body.om-portal-app .omc-card {
    border-radius: var(--om-radius-card) !important;
    box-shadow: var(--om-shadow-card) !important;
    background: var(--om-surface) !important;
    border: 1px solid var(--om-border) !important;
}

/* ============================================================
   F3 (2026-06-03) — Sparklines en KPI cards.
   El color viene del stroke inline del <svg>. Aquí solo posición.
   ============================================================ */
body.om-portal-app .omh-kpi-spark,
body.om-portal-app .omfin-kpi-spark {
    margin-top: 6px;
    line-height: 0;
}

/* ============================================================
   F4 (2026-06-03) — Chips/badges/pills: FORMA unificada.
   REGLA DURA: NO se tocan color/background/border. Solo radius/
   padding/font/letter-spacing/display. Los colores semánticos de
   cada variante quedan EXACTAMENTE como están.
   ============================================================ */
body.om-portal-app .omc-saav-badge,
body.om-portal-app .omcli-badge,
body.om-portal-app .omg-badge,
body.om-portal-app .omv-chip,
body.om-portal-app .omfin-chip,
body.om-portal-app .omv-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
}

/* ============================================================
   F4 (2026-06-03) — Tablas uniformes en Vencimientos, Finanzas y
   Gastos. Ventas (.omv-app .omv-table) conserva su look morado
   intencional, por eso NO entra en este selector.
   ============================================================ */
body.om-portal-app .omfin-table thead th,
body.om-portal-app .omg-table thead th,
body.om-portal-app .omv-wrap .omv-table thead th {
    background: var(--om-surface-alt);
    color: var(--om-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--om-border);
}
body.om-portal-app .omfin-table tbody td,
body.om-portal-app .omg-table tbody td,
body.om-portal-app .omv-wrap .omv-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--om-border);
    vertical-align: middle;
}
body.om-portal-app .omfin-table tbody tr:last-child td,
body.om-portal-app .omg-table tbody tr:last-child td,
body.om-portal-app .omv-wrap .omv-table tbody tr:last-child td {
    border-bottom: 0;
}
body.om-portal-app .omfin-table tbody tr:hover,
body.om-portal-app .omg-table tbody tr:hover,
body.om-portal-app .omv-wrap .omv-table tbody tr:hover {
    background: var(--om-surface-hover);
}

/* ============================================================
   F4 (2026-06-03) — Avatar mini de iniciales (para celdas
   entidad/cliente en tablas). Insertable junto al texto en celda
   sin romper el responsive de Vencimientos (envuelto en
   .om-entidad-cell).
   ============================================================ */
body.om-portal-app .om-avatar-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--om-primary-light);
    color: var(--om-primary-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
/* Wrapper interno que conviven con el flex móvil de Vencimientos
   (la celda en móvil ya es display:flex con ::before del label). */
body.om-portal-app .om-entidad-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
body.om-portal-app .om-entidad-cell-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Boton flotante WhatsApp (cresta) por encima de las cards */
body.om-portal-app .cresta-whatsapp-chat-box,
body.om-portal-app .cresta-whatsapp-chat-container,
body.om-portal-app .cresta-whatsapp-chat-overlay {
    z-index: 8000 !important;
}