:root{
    --hes-navy:#0b2d68;
    --hes-green:#079d82;
    --hes-green-soft:#e9f8f4;
    --hes-text:#314568;
    --hes-muted:#71809a;
    --hes-border:#e1e9f1;
}

/* ==========================================================
   LAYOUT REAL FOSSBILLING
   ========================================================== */

@media (min-width: 768px){

    .he-client-layout{
        display:grid !important;
        grid-template-columns:260px minmax(0,1fr) !important;
        column-gap:24px !important;

        margin-left:0 !important;
        margin-right:0 !important;

        align-items:start !important;
    }

    .he-sidebar-column{
        width:auto !important;
        max-width:none !important;

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

        margin-top:26px !important;
    }

    .he-content-column{
        width:auto !important;
        max-width:none !important;

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

        min-width:0 !important;
    }
}

/* ==========================================================
   TARJETA BLANCA COMPLETA
   ========================================================== */

.he-sidebar-card{
    width:100% !important;

    background:#fff !important;

    border:1px solid var(--hes-border) !important;
    border-radius:18px !important;

    box-shadow:
        0 10px 28px
        rgba(16,48,89,.07) !important;

    overflow:hidden !important;
}

.he-sidebar-card .offcanvas-body{
    display:flex !important;
    flex-direction:column !important;

    padding:16px 14px 18px !important;

    background:#fff !important;
}

/* ==========================================================
   MENÚ
   ========================================================== */

.he-sidebar-card .nav{
    gap:5px !important;
}

.he-sidebar-card .offcanvas-item{
    border:0 !important;

    margin:0 !important;

    background:transparent !important;
}

.he-sidebar-card .nav-link{
    position:relative !important;

    min-height:46px !important;

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

    gap:12px !important;

    padding:11px 13px !important;

    border-radius:11px !important;

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

    font-size:14px !important;
    font-weight:650 !important;

    text-decoration:none !important;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease !important;
}

.he-sidebar-card .nav-link svg{
    width:19px !important;
    height:19px !important;

    flex:0 0 19px !important;

    color:#243a62 !important;
}

.he-sidebar-card .nav-link:hover{
    background:#f3faf8 !important;

    color:var(--hes-navy) !important;

    transform:translateX(2px) !important;
}

.he-sidebar-card .offcanvas-item.active,
.he-sidebar-card .nav-link.active{
    background:
        linear-gradient(
            90deg,
            #e6f7f3 0%,
            #f0faf7 100%
        ) !important;

    color:var(--hes-navy) !important;

    font-weight:850 !important;
}

.he-sidebar-card .nav-link.active::before{
    content:"";

    position:absolute;

    left:-14px;
    top:8px;
    bottom:8px;

    width:4px;

    border-radius:0 4px 4px 0;

    background:var(--hes-green);
}

/* ==========================================================
   BALANCE
   ========================================================== */

.he-sidebar-card h5{
    margin:
        20px 12px 4px !important;

    color:var(--hes-navy) !important;

    font-size:14px !important;
    font-weight:850 !important;
}

.he-sidebar-card h5 + span,
.he-sidebar-card h5 + div{
    margin-left:12px !important;

    color:#172f58 !important;

    font-size:14px !important;
    font-weight:800 !important;
}

/* ==========================================================
   SEPARACIÓN VISUAL
   ========================================================== */

.he-sidebar-card .nav + *{
    margin-top:12px;
}

/* ==========================================================
   BLOQUE DE AYUDA
   ========================================================== */

.he-sidebar-card::after{
    content:
        "¿Necesitas ayuda?\A"
        "Nuestro equipo está listo para ayudarte.\A\A"
        "Abrir un ticket →";

    white-space:pre-wrap;

    display:block;

    margin:
        18px 14px 16px;

    padding:
        17px;

    background:
        linear-gradient(
            145deg,
            #f2faf7,
            #f8fcfb
        );

    border:
        1px solid #dceee8;

    border-radius:
        14px;

    color:
        var(--hes-navy);

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1.5;
}

/* ==========================================================
   FONDO Y ESPACIADO
   ========================================================== */

.he-sidebar-column{
    position:relative;
}

.he-sidebar-column::after{
    content:"⚡ Ideas de hoy, negocios de mañana.\A Tu sitio web puede llegar muy lejos.";

    white-space:pre-wrap;

    display:block;

    margin:
        18px 10px 0;

    color:
        var(--hes-muted);

    font-size:
        12px;

    line-height:
        1.5;
}

/* ==========================================================
   BREADCRUMB MÁS CERCA DEL CONTENIDO
   ========================================================== */

.he-content-column .breadcrumb{
    margin-top:2px !important;
    margin-bottom:16px !important;
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px){

    .he-client-layout{
        display:block !important;
    }

    .he-content-column{
        width:100% !important;
    }

}