/* =========================================================
   HC ERP SIDEBAR FINAL
   Dynamics 365 + ERP corporativo
   NO modifica contenido del menú
   ========================================================= */

:root{
    --hcf-width:268px;
    --hcf-mini:76px;

    --hcf-nav1:#0c2b4c;
    --hcf-nav2:#06192c;

    --hcf-text:#dbe6f0;
    --hcf-muted:#8196ab;

    --hcf-blue:#2f76e9;
}


/* SIDEBAR */

aside.sidebar{
    width:var(--hcf-width) !important;

    padding:
        16px 13px 28px !important;

    background:
        linear-gradient(
            180deg,
            var(--hcf-nav1) 0%,
            #08213a 40%,
            var(--hcf-nav2) 100%
        ) !important;

    border-right:
        1px solid rgba(255,255,255,.06) !important;

    box-shadow:
        8px 0 28px rgba(15,23,42,.12) !important;

    overflow-x:hidden !important;

    transition:
        width .22s ease !important;
}


.content{
    margin-left:
        var(--hcf-width) !important;

    width:
        calc(100% - var(--hcf-width)) !important;

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


/* EMPRESA */

.sidebar .brand{
    position:relative !important;

    min-height:
        112px !important;

    margin:
        0 2px 21px !important;

    padding:
        17px 15px !important;

    border-radius:
        15px !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03) !important;
}


.sidebar .brand::before{
    content:"HC ERP";

    display:block;

    margin-bottom:
        14px;

    color:#8ebfff;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .13em;
}


.sidebar .brand strong{
    display:block !important;

    max-width:
        185px;

    padding:
        0 !important;

    color:
        #fff !important;

    font-size:
        15px !important;

    line-height:
        1.3 !important;

    font-weight:
        800 !important;
}


.sidebar .brand > span{
    display:inline-flex !important;

    margin-top:
        9px !important;

    padding:
        4px 8px !important;

    border-radius:
        999px !important;

    background:
        rgba(59,130,246,.16) !important;

    color:
        #a7cdff !important;

    border:
        1px solid rgba(96,165,250,.12) !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;
}


/* BOTON CONTRAER */

#hcFinalCollapse{
    position:absolute;

    top:11px;
    right:11px;

    width:31px;
    height:31px;

    display:flex;

    align-items:center;
    justify-content:center;

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

    border-radius:
        9px;

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

    color:
        #d1dce7;

    cursor:pointer;

    font-size:
        18px;
}


#hcFinalCollapse:hover{
    color:#fff;

    background:
        rgba(59,130,246,.22);
}


/* NAV */

.sidebar nav{
    display:flex !important;

    flex-direction:
        column !important;

    gap:
        3px !important;

    padding:
        0 1px 80px !important;
}


.sidebar nav::before{
    content:
        "NAVEGACIÓN";

    display:block;

    margin:
        0 11px 9px;

    color:
        #71899f;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .17em;
}


/* LINK DIRECTO */

.sidebar nav > a{
    min-height:
        44px !important;

    display:flex !important;

    align-items:center !important;

    margin:
        2px 0 !important;

    padding:
        10px 12px !important;

    border:
        1px solid transparent !important;

    border-radius:
        10px !important;

    background:
        transparent !important;

    color:
        var(--hcf-text) !important;

    font-size:
        13px !important;

    font-weight:
        650 !important;

    text-decoration:
        none !important;

    transition:
        .15s ease !important;

    white-space:
        nowrap;
}


.sidebar nav > a:hover{
    transform:none !important;

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


/* MODULOS */

.sidebar .hcerp-menu-group{
    position:relative !important;

    min-height:
        44px !important;

    display:flex !important;

    align-items:center !important;

    margin:
        3px 0 !important;

    padding:
        10px 38px 10px 12px !important;

    border:
        1px solid transparent !important;

    border-radius:
        10px !important;

    background:
        transparent !important;

    color:
        var(--hcf-text) !important;

    font-size:
        13px !important;

    line-height:
        1.2 !important;

    font-weight:
        650 !important;

    text-transform:
        none !important;

    letter-spacing:
        0 !important;

    cursor:
        pointer !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;
}


.sidebar .hcerp-menu-group:hover{
    background:
        rgba(255,255,255,.05) !important;
}


.sidebar .hcerp-menu-group.open{
    color:#fff !important;

    background:
        rgba(37,99,235,.17) !important;

    border-color:
        rgba(96,165,250,.12) !important;
}


/* FLECHA UNICA */

.sidebar .hcerp-menu-group::after{
    content:
        "›" !important;

    position:
        absolute !important;

    right:
        13px !important;

    top:
        50% !important;

    transform:
        translateY(-50%) !important;

    color:
        #7aa6d2 !important;

    font-size:
        18px !important;

    font-weight:
        500 !important;

    transition:
        transform .18s ease !important;
}


.sidebar .hcerp-menu-group.open::after{
    transform:
        translateY(-50%)
        rotate(90deg) !important;
}


/* CUALQUIER FLECHA CREADA POR UN SCRIPT ANTERIOR */

.hc-menu-chevron,
.hc-enterprise-chevron,
.hc-pro-arrow,
.hc365-arrow{
    display:none !important;
}


/* SUBMENU */

.sidebar .hcerp-menu-child{
    position:relative !important;

    margin-left:
        17px !important;

    padding-left:
        17px !important;
}


.sidebar .hcerp-menu-child::before{
    content:"";

    position:absolute;

    left:2px;
    top:0;
    bottom:0;

    width:1px;

    background:
        rgba(148,163,184,.15);
}


.sidebar .hcerp-menu-child a{
    min-height:
        36px !important;

    display:flex !important;

    align-items:center !important;

    margin:
        2px 0 !important;

    padding:
        8px 9px !important;

    border-radius:
        8px !important;

    background:
        transparent !important;

    color:
        #b6c6d6 !important;

    font-size:
        12.5px !important;

    font-weight:
        550 !important;

    opacity:
        1 !important;

    text-decoration:
        none !important;
}


.sidebar .hcerp-menu-child a::before{
    display:none !important;
}


.sidebar .hcerp-menu-child a:hover{
    transform:none !important;

    background:
        rgba(255,255,255,.05) !important;

    color:
        #fff !important;
}


/* ACTIVO */

.sidebar a.hc-final-active{
    background:
        linear-gradient(
            90deg,
            #2869e8,
            #377df4
        ) !important;

    color:
        #fff !important;

    border-color:
        rgba(255,255,255,.05) !important;

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


.sidebar
.hcerp-menu-child
a.hc-final-active{
    background:
        rgba(37,99,235,.16) !important;

    box-shadow:
        none !important;
}


/* DASHBOARD */

body.hc-final-dashboard{
    background:
        #f5f8fc !important;
}


body.hc-final-dashboard .wrap{
    max-width:
        none !important;

    padding:
        27px 30px 40px !important;
}


body.hc-final-dashboard
.hcd-kpis{
    gap:
        17px !important;
}


body.hc-final-dashboard
.hcd-kpi{
    border:
        1px solid #e4ebf3 !important;

    border-radius:
        14px !important;

    box-shadow:
        0 7px 22px rgba(15,23,42,.04) !important;
}


body.hc-final-dashboard
.hcd-card{
    border:
        1px solid #e4ebf3 !important;

    border-radius:
        14px !important;

    box-shadow:
        0 7px 22px rgba(15,23,42,.04) !important;
}


/* MINI */

body.hc-final-mini
aside.sidebar{
    width:
        var(--hcf-mini) !important;

    padding-left:
        10px !important;

    padding-right:
        10px !important;
}


body.hc-final-mini
.content{
    margin-left:
        var(--hcf-mini) !important;

    width:
        calc(100% - var(--hcf-mini)) !important;
}


body.hc-final-mini
.sidebar .brand{
    min-height:
        54px !important;

    padding:
        10px !important;
}


body.hc-final-mini
.sidebar .brand::before,

body.hc-final-mini
.sidebar .brand strong,

body.hc-final-mini
.sidebar .brand > span,

body.hc-final-mini
.sidebar nav::before{
    display:
        none !important;
}


body.hc-final-mini
#hcFinalCollapse{
    position:
        static !important;

    margin:
        auto !important;
}


body.hc-final-mini
.sidebar .hcerp-menu-child{
    display:
        none !important;
}


body.hc-final-mini
.sidebar nav > a,

body.hc-final-mini
.sidebar .hcerp-menu-group{
    width:
        50px !important;

    max-width:
        50px !important;

    min-width:
        50px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    padding:
        10px 12px !important;

    overflow:
        hidden !important;

    white-space:
        nowrap !important;
}


body.hc-final-mini
.sidebar .hcerp-menu-group::after{
    display:
        none !important;
}


/* RESPONSIVE */

@media(max-width:1100px){

    body.hc-final-dashboard
    .hcd-kpis{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }
}


@media(max-width:900px){

    #hcFinalCollapse{
        display:none !important;
    }
}


@media(max-width:700px){

    body.hc-final-dashboard
    .hcd-kpis{
        grid-template-columns:
            1fr !important;
    }
}