/* ==========================================================
   TRAZION ASSETS
   SIDEBAR V2
   ----------------------------------------------------------
   Identidad:
   Navy       #0B1D3A
   Slate Blue #44566F
   Vivid Blue #2563EB
   Light Gray #D6DCE6
   White      #FFFFFF
   ========================================================== */

:root {
    --tr-sidebar-navy: #0B1D3A;
    --tr-sidebar-slate: #44566F;
    --tr-sidebar-blue: #2563EB;
    --tr-sidebar-light: #D6DCE6;
    --tr-sidebar-white: #FFFFFF;

    --tr-sidebar-hover: rgba(255, 255, 255, .08);
    --tr-sidebar-border: rgba(214, 220, 230, .11);
}


/* ==========================================================
   SUPERFICIE PRINCIPAL
   ========================================================== */

body.trazion-app .main-sidebar.trazion-sidebar {
    background: var(--tr-sidebar-navy) !important;
    border-right: 1px solid var(--tr-sidebar-border) !important;

    box-shadow:
        5px 0 22px rgba(11, 29, 58, .13) !important;

    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;

    overflow: hidden;

    transition:
        width .22s ease,
        margin-left .22s ease,
        box-shadow .22s ease !important;
}


/* ==========================================================
   LOGO / MARCA
   ========================================================== */

body.trazion-app
.main-sidebar.trazion-sidebar
> .brand-link.trazion-brand-link {

    min-height: 64px !important;

    display: flex !important;
    align-items: center !important;

    padding: 9px 14px !important;

    background: var(--tr-sidebar-navy) !important;

    border-bottom:
        1px solid var(--tr-sidebar-border) !important;

    box-shadow: none !important;

    color: var(--tr-sidebar-white) !important;

    border-top-right-radius: 15px !important;
}


/* Logo */

body.trazion-app
.main-sidebar.trazion-sidebar
.brand-link
.trazion-sidebar-brand-icon {

    width: 40px !important;
    height: 40px !important;
    max-height: 40px !important;

    margin: 0 10px 0 0 !important;

    padding: 0 !important;

    object-fit: contain !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* TRAZION */

body.trazion-app
.main-sidebar.trazion-sidebar
.trazion-brand-word {

    color: var(--tr-sidebar-white) !important;
}


/* ASSETS */

body.trazion-app
.main-sidebar.trazion-sidebar
.trazion-product-word {

    color: #4D7FFF !important;
}


/* Línea principal */

body.trazion-app
.main-sidebar.trazion-sidebar
.trazion-brand-title-line {

    color: var(--tr-sidebar-white) !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    letter-spacing: -.01em !important;
}


/* BY TRAZION CLOUD */

body.trazion-app
.main-sidebar.trazion-sidebar
.trazion-brand-text small {

    color: rgba(214, 220, 230, .70) !important;

    font-size: 8px !important;

    letter-spacing: 1.05px !important;

    font-weight: 700 !important;
}


/* Hover marca */

body.trazion-app
.main-sidebar.trazion-sidebar
.brand-link:hover {

    background: rgba(255, 255, 255, .025) !important;
}


/* ==========================================================
   CONTENEDOR SIDEBAR
   ========================================================== */

body.trazion-app
.main-sidebar.trazion-sidebar
> .sidebar {

    background: var(--tr-sidebar-navy) !important;

    padding-left: 7px;
    padding-right: 7px;

    border-bottom-right-radius: 15px !important;
}


/* ==========================================================
   PANEL DE USUARIO
   ========================================================== */

body.trazion-app
.trazion-sidebar
.user-panel {

    margin-top: 12px !important;
    margin-bottom: 10px !important;

    padding:
        9px
        7px
        13px !important;

    border-bottom:
        1px solid var(--tr-sidebar-border) !important;
}


/* Avatar */

body.trazion-app
.trazion-sidebar
.user-panel
.image img {

    width: 36px !important;
    height: 36px !important;

    padding: 2px;

    background: rgba(255, 255, 255, .96);

    border:
        1px solid rgba(255, 255, 255, .15);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .18) !important;
}


/* Nombre */

body.trazion-app
.trazion-sidebar
.user-panel
.info > a {

    color: var(--tr-sidebar-white) !important;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.2;
}


/* Rol */

body.trazion-app
.trazion-sidebar
.user-panel
.info
.text-muted {

    color:
        rgba(214, 220, 230, .65) !important;

    font-size: 11px;
}


/* Empresa */

body.trazion-app
.trazion-sidebar
.trazion-sidebar-tenant {

    color: #7EA4FF !important;

    font-size: 10px !important;

    font-weight: 500;
}


/* ==========================================================
   NAVEGACIÓN
   ========================================================== */

body.trazion-app
.trazion-sidebar
.nav-sidebar {

    padding-top: 3px;
}


/* Item */

body.trazion-app
.trazion-sidebar
.nav-sidebar
> .nav-item {

    margin-bottom: 2px;
}


/* Link */

body.trazion-app
.trazion-sidebar
.nav-sidebar
.nav-link {

    min-height: 41px;

    display: flex;
    align-items: center;

    margin:
        2px
        3px !important;

    padding:
        9px
        11px !important;

    border-radius: 10px !important;

    color:
        rgba(214, 220, 230, .82) !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;

    font-weight: 500;

    transition:
        background-color .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        transform .16s ease !important;
}


/* Texto */

body.trazion-app
.trazion-sidebar
.nav-sidebar
.nav-link p {

    margin-left: 4px;
}


/* ==========================================================
   ICONOS
   ========================================================== */

body.trazion-app
.trazion-sidebar
.nav-sidebar
.nav-link
.nav-icon {

    width: 24px !important;

    margin:
        0
        7px
        0
        0 !important;

    text-align: center;

    color:
        rgba(214, 220, 230, .72) !important;

    font-size: 16px !important;

    transition:
        color .16s ease,
        transform .16s ease;
}


/* ==========================================================
   HOVER
   ========================================================== */

body.trazion-app
.trazion-sidebar
.nav-sidebar
.nav-link:hover {

    background:
        var(--tr-sidebar-hover) !important;

    color:
        var(--tr-sidebar-white) !important;
}


body.trazion-app
.trazion-sidebar
.nav-sidebar
.nav-link:hover
.nav-icon {

    color:
        var(--tr-sidebar-white) !important;
}


/* ==========================================================
   ELEMENTO ACTIVO
   ========================================================== */

body.trazion-app
.trazion-sidebar
.nav-sidebar
> .nav-item
> .nav-link.active,

body.trazion-app
.trazion-sidebar
.nav-treeview
> .nav-item
> .nav-link.active {

    background:
        var(--tr-sidebar-blue) !important;

    color:
        var(--tr-sidebar-white) !important;

    font-weight: 600 !important;

    box-shadow:
        0 7px 16px rgba(37, 99, 235, .27) !important;
}


body.trazion-app
.trazion-sidebar
.nav-link.active
.nav-icon {

    color:
        var(--tr-sidebar-white) !important;
}


/* ==========================================================
   ENCABEZADOS
   ========================================================== */

body.trazion-app
.trazion-sidebar
.nav-header {

    padding:
        15px
        12px
        6px !important;

    margin:
        0 !important;

    color:
        rgba(214, 220, 230, .48) !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height: 1;

    letter-spacing:
        .10em !important;

    text-transform:
        uppercase;
}


/* ==========================================================
   SUBMENÚ
   ========================================================== */

body.trazion-app
.trazion-sidebar
.nav-treeview {

    margin:
        3px
        5px
        6px
        15px !important;

    padding-left:
        6px !important;

    border-left:
        1px solid
        rgba(214, 220, 230, .12);
}


body.trazion-app
.trazion-sidebar
.nav-treeview
.nav-link {

    min-height: 36px;

    padding:
        7px
        8px !important;

    font-size:
        13px;
}


body.trazion-app
.trazion-sidebar
.nav-treeview
.nav-icon {

    font-size:
        9px !important;
}


/* Flecha del treeview */

body.trazion-app
.trazion-sidebar
.nav-link
.right {

    color:
        rgba(214, 220, 230, .55) !important;
}


/* ==========================================================
   MODO SOPORTE
   ========================================================== */

body.trazion-app
.trazion-sidebar
.trazion-support-menu-item
.nav-link {

    color: #FCA5A5 !important;

    background:
        rgba(239, 68, 68, .10) !important;

    border:
        1px solid
        rgba(239, 68, 68, .20) !important;
}


/* ==========================================================
   SIDEBAR COLAPSADO
   AdminLTE conserva el comportamiento.
   Aquí únicamente refinamos visualmente.
   ========================================================== */

@media (min-width: 992px) {

    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar:not(:hover) {

        border-top-right-radius:
            12px !important;

        border-bottom-right-radius:
            12px !important;
    }


    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar:not(:hover)
    > .brand-link {

        justify-content:
            center !important;

        padding-left:
            7px !important;

        padding-right:
            7px !important;
    }


    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar:not(:hover)
    .trazion-sidebar-brand-icon {

        margin-right:
            0 !important;
    }


    /* Navegación centrada */

    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar:not(:hover)
    .nav-sidebar
    > .nav-item
    > .nav-link {

        width:
            48px !important;

        min-height:
            40px;

        margin:
            3px auto !important;

        padding:
            9px 0 !important;

        justify-content:
            center;
    }


    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar:not(:hover)
    .nav-sidebar
    > .nav-item
    > .nav-link
    .nav-icon {

        width:
            24px !important;

        margin:
            0 !important;

        font-size:
            17px !important;
    }


    /* Usuario centrado */

    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar:not(:hover)
    .user-panel {

        justify-content:
            center !important;

        padding-left:
            0 !important;

        padding-right:
            0 !important;
    }


    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar:not(:hover)
    .user-panel
    .image {

        padding-left:
            0 !important;
    }


    /* Los títulos de sección no ocupan espacio */

    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar:not(:hover)
    .nav-header {

        display:
            none !important;
    }
}


/* ==========================================================
   AL EXPANDIR POR HOVER
   ========================================================== */

@media (min-width: 992px) {

    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar:hover {

        box-shadow:
            9px 0 30px
            rgba(11, 29, 58, .21) !important;
    }
}


/* ==========================================================
   SCROLL
   ========================================================== */

body.trazion-app
.trazion-sidebar
.os-scrollbar-handle {

    background:
        rgba(214, 220, 230, .20) !important;
}


/* ==========================================================
   FONDO GENERAL DE TRAZION
   gris muy suave para separar sidebar y tarjetas.
   ========================================================== */

body.trazion-app
.content-wrapper {

    background:
        #F5F7FA !important;
}


/* ==========================================================
   TRAZION SIDEBAR V2.1
   Modo fijo controlado exclusivamente por PushMenu
   ========================================================== */

@media (min-width: 992px) {

    /*
     * Sidebar separado ligeramente del borde izquierdo.
     */
    body.trazion-app .main-sidebar.trazion-sidebar {
        left: 8px !important;
        border-radius: 14px !important;
    }


    /*
     * EXPANDIDO
     * AdminLTE usa 250px.
     * Sumamos los 8px del margen exterior.
     */
    body.trazion-app:not(.sidebar-collapse) .main-header,
    body.trazion-app:not(.sidebar-collapse) .content-wrapper,
    body.trazion-app:not(.sidebar-collapse) .main-footer {
        margin-left: 258px !important;
    }


    /*
     * COLAPSADO
     * 4.6rem es el ancho mini estándar de AdminLTE.
     * Sumamos nuevamente los 8px exteriores.
     */
    body.trazion-app.sidebar-collapse .main-header,
    body.trazion-app.sidebar-collapse .content-wrapper,
    body.trazion-app.sidebar-collapse .main-footer {
        margin-left: calc(4.6rem + 8px) !important;
    }


    /*
     * IMPORTANTE:
     * Al estar contraído los iconos siguen centrados incluso
     * cuando el cursor está encima.
     */
    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar.sidebar-no-expand {
        border-radius: 12px !important;
    }


    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar.sidebar-no-expand
    > .brand-link {
        justify-content: center !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }


    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar.sidebar-no-expand
    .trazion-sidebar-brand-icon {
        margin-right: 0 !important;
    }


    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar.sidebar-no-expand
    .nav-sidebar
    > .nav-item
    > .nav-link {

        width: 48px !important;
        min-height: 40px;

        margin: 3px auto !important;
        padding: 9px 0 !important;

        justify-content: center !important;
    }


    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar.sidebar-no-expand
    .nav-sidebar
    > .nav-item
    > .nav-link
    .nav-icon {

        width: 24px !important;
        margin: 0 !important;

        font-size: 17px !important;
    }


    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar.sidebar-no-expand
    .user-panel {

        justify-content: center !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar.sidebar-no-expand
    .user-panel
    .image {

        padding-left: 0 !important;
    }


    body.trazion-app.sidebar-mini.sidebar-collapse
    .main-sidebar.trazion-sidebar.sidebar-no-expand
    .nav-header {

        display: none !important;
    }
}


/*
 * Transición limpia al pulsar el botón hamburguesa.
 */
body.trazion-app .main-header,
body.trazion-app .content-wrapper,
body.trazion-app .main-footer {

    transition:
        margin-left .25s ease !important;
}

body.trazion-app .main-sidebar.trazion-sidebar {

    transition:
        width .25s ease,
        margin-left .25s ease,
        box-shadow .20s ease !important;
}


/*
 * El hover cambia solamente el color.
 * Ya no abre el sidebar.
 */
body.trazion-app
.main-sidebar.trazion-sidebar.sidebar-no-expand:hover {

    box-shadow:
        6px 0 22px rgba(11, 29, 58, .16) !important;
}



/* ==========================================================
   TRAZION SIDEBAR V2.2
   Margen superior e inferior
   ========================================================== */

@media (min-width: 992px) {

    body.trazion-app .main-sidebar.trazion-sidebar,
    body.trazion-app .main-sidebar.trazion-sidebar::before {
        top: 10px !important;
        bottom: 10px !important;
        height: calc(100vh - 20px) !important;
        border-radius: 14px !important;
    }

    body.trazion-app .main-sidebar.trazion-sidebar > .brand-link {
        border-top-right-radius: 14px !important;
    }

    body.trazion-app .main-sidebar.trazion-sidebar > .sidebar {
        height: calc(100vh - 20px - 64px) !important;
        border-bottom-right-radius: 14px !important;
    }
}



/* ==========================================================
   TRAZION SIDEBAR V2.3
   Solo panel de marca en gris de paleta
   ========================================================== */

body.trazion-app
.main-sidebar.trazion-sidebar {
    background: #D6DCE6 !important;
}

body.trazion-app
.main-sidebar.trazion-sidebar
> .sidebar {
    background: var(--tr-sidebar-navy) !important;
}

body.trazion-app
.main-sidebar.trazion-sidebar
> .brand-link.trazion-brand-link {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    background: #D6DCE6 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .20) !important;
    border-top-right-radius: 0 !important;
    outline: none;
    box-shadow: none !important;
    color: #0B1D3A !important;
}

body.trazion-app
.main-sidebar.trazion-sidebar
> .brand-link.trazion-brand-link:hover {
    background: #CDD5E0 !important;
    color: #0B1D3A !important;
}

body.trazion-app
.main-sidebar.trazion-sidebar
> .brand-link.trazion-brand-link:focus {
    outline: none !important;
    box-shadow: none !important;
}

body.trazion-app
.main-sidebar.trazion-sidebar
> .brand-link.trazion-brand-link:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .52) !important;
    outline-offset: -3px;
    box-shadow: none !important;
}

body.trazion-app
.main-sidebar.trazion-sidebar
.trazion-brand-word {
    color: #0B1D3A !important;
}

body.trazion-app
.main-sidebar.trazion-sidebar
.trazion-product-word {
    color: #2563EB !important;
}

body.trazion-app
.main-sidebar.trazion-sidebar
.trazion-brand-text small {
    color: #44566F !important;
    opacity: 1 !important;
}


/* ==========================================================
   TRAZION SIDEBAR
   DRILL-DOWN SAAS -> EMPRESA SOPORTE
   Inspirado en navegación secundaria tipo Atera
   ========================================================== */


/* El sidebar no debe mostrar scroll horizontal durante slide */
body.trazion-app
.trazion-sidebar
.sidebar {

    overflow-x:
        hidden !important;

}


/* El nav es la superficie que se desplaza */
body.trazion-app
.trazion-sidebar
.sidebar > nav {

    transform:
        translate3d(0,0,0);

    opacity:
        1;

    will-change:
        transform,
        opacity;

}


/* ==========================================================
   SALIENDO DE CONSOLA SAAS
   menú principal sale hacia la izquierda
   ========================================================== */

body.trazion-app
.trazion-sidebar.trazion-saas-drill-leave
.sidebar > nav {

    animation:
        trazionSaasMenuOut
        .20s
        cubic-bezier(.4,0,1,1)
        both;

}


@keyframes trazionSaasMenuOut {

    from {

        opacity:
            1;

        transform:
            translate3d(0,0,0);

    }

    to {

        opacity:
            .15;

        transform:
            translate3d(-42px,0,0);

    }

}


/* ==========================================================
   ENTRANDO A EMPRESA
   menú soporte entra desde la derecha
   ========================================================== */

body.trazion-app
.trazion-sidebar.trazion-support-drill-enter
.sidebar > nav {

    animation:
        trazionSupportMenuIn
        .34s
        cubic-bezier(.22,.61,.36,1)
        both;

}


@keyframes trazionSupportMenuIn {

    from {

        opacity:
            .15;

        transform:
            translate3d(42px,0,0);

    }

    to {

        opacity:
            1;

        transform:
            translate3d(0,0,0);

    }

}


/* ==========================================================
   SALIENDO DE EMPRESA
   menú soporte sale hacia la derecha
   ========================================================== */

body.trazion-app
.trazion-sidebar.trazion-support-drill-leave
.sidebar > nav {

    animation:
        trazionSupportMenuOut
        .20s
        cubic-bezier(.4,0,1,1)
        both;

}


@keyframes trazionSupportMenuOut {

    from {

        opacity:
            1;

        transform:
            translate3d(0,0,0);

    }

    to {

        opacity:
            .12;

        transform:
            translate3d(42px,0,0);

    }

}


/* ==========================================================
   REGRESANDO A CONSOLA SAAS
   menú SaaS entra desde la izquierda
   ========================================================== */

body.trazion-app
.trazion-sidebar.trazion-saas-drill-return
.sidebar > nav {

    animation:
        trazionSaasMenuReturn
        .34s
        cubic-bezier(.22,.61,.36,1)
        both;

}


@keyframes trazionSaasMenuReturn {

    from {

        opacity:
            .15;

        transform:
            translate3d(-42px,0,0);

    }

    to {

        opacity:
            1;

        transform:
            translate3d(0,0,0);

    }

}


/* ==========================================================
   CABECERA MODO SOPORTE
   ========================================================== */

body.trazion-app
.trazion-support-drill-header {

    list-style:
        none;

    margin:
        5px
        8px
        10px;

    padding:
        0;

}


body.trazion-app
.trazion-support-drill-back {

    position:
        relative;

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        10px
        10px;

    color:
        #FFFFFF !important;

    background:
        rgba(255,255,255,.065);

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        11px;

    text-decoration:
        none !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035);

    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease;

}


body.trazion-app
.trazion-support-drill-back:hover {

    color:
        #FFFFFF !important;

    background:
        rgba(255,255,255,.105);

    border-color:
        rgba(96,165,250,.30);

    transform:
        translateX(-2px);

}


/* Flecha */
body.trazion-app
.trazion-support-drill-arrow {

    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #BFDBFE;

    background:
        rgba(37,99,235,.20);

    border:
        1px solid
        rgba(96,165,250,.22);

    border-radius:
        9px;

    font-size:
        12px;

    transition:
        transform .18s ease,
        background-color .18s ease;

}


body.trazion-app
.trazion-support-drill-back:hover
.trazion-support-drill-arrow {

    transform:
        translateX(-2px);

    background:
        rgba(37,99,235,.30);

}


/* textos */
body.trazion-app
.trazion-support-drill-copy {

    display:
        block;

    flex:
        1;

    min-width:
        0;

    line-height:
        1.15;

}


body.trazion-app
.trazion-support-drill-copy small {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    margin-bottom:
        4px;

    color:
        #FBBF24;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

}


body.trazion-app
.trazion-support-drill-copy strong {

    display:
        block;

    overflow:
        hidden;

    color:
        #FFFFFF;

    font-size:
        12.5px;

    font-weight:
        700;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


body.trazion-app
.trazion-support-drill-copy em {

    display:
        block;

    margin-top:
        3px;

    color:
        #94A3B8;

    font-size:
        9.5px;

    font-style:
        normal;

    font-weight:
        500;

}


/* punto vivo de soporte */
body.trazion-app
.trazion-support-live-dot {

    width:
        6px;

    height:
        6px;

    display:
        inline-block;

    border-radius:
        50%;

    background:
        #F59E0B;

    box-shadow:
        0 0 0 3px
        rgba(245,158,11,.12);

}


/* separador EMPRESA */
body.trazion-app
.trazion-support-company-label {

    margin-top:
        3px !important;

    color:
        #94A3B8 !important;

}


/* ==========================================================
   COLLAPSED SIDEBAR
   En modo iconos dejamos únicamente la flecha.
   ========================================================== */

@media (min-width: 992px) {

    body.trazion-app.sidebar-collapse
    .trazion-support-context
    .trazion-support-drill-header {

        margin-left:
            5px;

        margin-right:
            5px;

    }


    body.trazion-app.sidebar-collapse
    .trazion-support-context
    .trazion-support-drill-back {

        justify-content:
            center;

        padding:
            8px
            4px;

    }


    body.trazion-app.sidebar-collapse
    .trazion-support-context
    .trazion-support-drill-copy,

    body.trazion-app.sidebar-collapse
    .trazion-support-context
    .trazion-support-company-label {

        display:
            none !important;

    }

}


/* ==========================================================
   REDUCIR MOVIMIENTO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    body.trazion-app
    .trazion-sidebar
    .sidebar > nav {

        animation:
            none !important;

        transition:
            none !important;

    }

}



/* ==========================================================
   TRAZION SIDEBAR
   SUPPORT CONTEXT UI V2
   Cambio de contexto sin refresh
   ========================================================== */


/* ==========================================================
   USER PANEL - MODO SOPORTE
   Reemplaza avatar / nombre del Superadministrador
   ========================================================== */

body.trazion-app
.trazion-sidebar
.trazion-support-user-panel {

    display:
        block !important;

    margin:
        13px
        8px
        14px !important;

    padding:
        0 !important;

    border:
        0 !important;

}


body.trazion-app
.trazion-sidebar
.trazion-support-user-return {

    width:
        100%;

    min-height:
        64px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        9px
        9px;

    color:
        #FFFFFF !important;

    background:
        rgba(255,255,255,.065);

    border:
        1px solid
        rgba(148,163,184,.18);

    border-radius:
        12px;

    text-decoration:
        none !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035);

    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;

}


body.trazion-app
.trazion-sidebar
.trazion-support-user-return:hover {

    color:
        #FFFFFF !important;

    background:
        rgba(255,255,255,.095);

    border-color:
        rgba(96,165,250,.28);

    box-shadow:
        0 6px 14px
        rgba(0,0,0,.08);

}


/* Flecha */
body.trazion-app
.trazion-sidebar
.trazion-support-user-arrow {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #BFDBFE;

    background:
        rgba(37,99,235,.20);

    border:
        1px solid
        rgba(96,165,250,.23);

    border-radius:
        9px;

    font-size:
        12px;

    transition:
        transform .18s ease,
        background-color .18s ease;

}


body.trazion-app
.trazion-sidebar
.trazion-support-user-return:hover
.trazion-support-user-arrow {

    transform:
        translateX(-2px);

    background:
        rgba(37,99,235,.30);

}


/* Texto */
body.trazion-app
.trazion-sidebar
.trazion-support-user-copy {

    min-width:
        0;

    flex:
        1;

    display:
        block;

    line-height:
        1.12;

}


body.trazion-app
.trazion-sidebar
.trazion-support-user-copy small {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    margin:
        0
        0
        4px;

    color:
        #FBBF24;

    font-size:
        8.7px;

    font-weight:
        800;

    letter-spacing:
        .065em;

}


body.trazion-app
.trazion-sidebar
.trazion-support-user-copy strong {

    display:
        block;

    overflow:
        hidden;

    color:
        #FFFFFF;

    font-size:
        12.4px;

    font-weight:
        700;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


body.trazion-app
.trazion-sidebar
.trazion-support-user-copy em {

    display:
        block;

    margin-top:
        4px;

    color:
        #94A3B8;

    font-size:
        9.4px;

    font-style:
        normal;

    font-weight:
        500;

}


/* punto MODO SOPORTE */
body.trazion-app
.trazion-sidebar
.trazion-support-live-dot {

    width:
        6px;

    height:
        6px;

    display:
        inline-block;

    flex:
        0 0 6px;

    background:
        #F59E0B;

    border-radius:
        50%;

    box-shadow:
        0 0 0 3px
        rgba(245,158,11,.12);

}


/* ==========================================================
   TRANSICIÓN DEL MENÚ
   ========================================================== */

body.trazion-app
.trazion-sidebar
.sidebar {

    overflow-x:
        hidden !important;

}


/*
 * Salir menú SaaS -> izquierda
 */
body.trazion-app
.trazion-sidebar
.sidebar.trazion-context-out-left
> .user-panel,

body.trazion-app
.trazion-sidebar
.sidebar.trazion-context-out-left
> nav {

    animation:
        trazionContextOutLeft
        .18s
        cubic-bezier(.4,0,1,1)
        both;

}


@keyframes trazionContextOutLeft {

    from {

        opacity:
            1;

        transform:
            translate3d(0,0,0);

    }

    to {

        opacity:
            .06;

        transform:
            translate3d(-44px,0,0);

    }

}


/*
 * Entra menú soporte desde derecha
 */
body.trazion-app
.trazion-sidebar
.sidebar.trazion-context-in-right
> .user-panel,

body.trazion-app
.trazion-sidebar
.sidebar.trazion-context-in-right
> nav {

    animation:
        trazionContextInRight
        .34s
        cubic-bezier(.22,.61,.36,1)
        both;

}


@keyframes trazionContextInRight {

    from {

        opacity:
            .08;

        transform:
            translate3d(44px,0,0);

    }

    to {

        opacity:
            1;

        transform:
            translate3d(0,0,0);

    }

}


/*
 * Salir soporte -> derecha
 */
body.trazion-app
.trazion-sidebar
.sidebar.trazion-context-out-right
> .user-panel,

body.trazion-app
.trazion-sidebar
.sidebar.trazion-context-out-right
> nav {

    animation:
        trazionContextOutRight
        .18s
        cubic-bezier(.4,0,1,1)
        both;

}


@keyframes trazionContextOutRight {

    from {

        opacity:
            1;

        transform:
            translate3d(0,0,0);

    }

    to {

        opacity:
            .06;

        transform:
            translate3d(44px,0,0);

    }

}


/*
 * Regresa SaaS desde izquierda
 */
body.trazion-app
.trazion-sidebar
.sidebar.trazion-context-in-left
> .user-panel,

body.trazion-app
.trazion-sidebar
.sidebar.trazion-context-in-left
> nav {

    animation:
        trazionContextInLeft
        .34s
        cubic-bezier(.22,.61,.36,1)
        both;

}


@keyframes trazionContextInLeft {

    from {

        opacity:
            .08;

        transform:
            translate3d(-44px,0,0);

    }

    to {

        opacity:
            1;

        transform:
            translate3d(0,0,0);

    }

}


/* ==========================================================
   YA NO MOSTRAMOS SALIR SOPORTE EN CABEZOTE
   porque ahora vive en el user panel.
   ========================================================== */

body.trazion-app
.main-header
.btnSalirSoporteTenant {

    display:
        none !important;

}


/* ==========================================================
   SIDEBAR COLAPSADO
   ========================================================== */

@media (min-width: 992px) {

    body.trazion-app.sidebar-collapse
    .trazion-support-user-panel {

        margin:
            10px
            5px
            12px !important;

    }


    body.trazion-app.sidebar-collapse
    .trazion-support-user-return {

        min-height:
            46px;

        justify-content:
            center;

        padding:
            6px
            3px;

    }


    body.trazion-app.sidebar-collapse
    .trazion-support-user-copy {

        display:
            none !important;

    }

}


/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {

    body.trazion-app
    .trazion-sidebar
    .sidebar
    > .user-panel,

    body.trazion-app
    .trazion-sidebar
    .sidebar
    > nav {

        animation:
            none !important;

    }

}