/* ============================================================
   WÖRTH Selection · EMPRESA · ICONOS v3
   ============================================================ */


/* ============================================================
   TOP NAV
   ============================================================ */

body.ws-role-client #topNav > span,
body.ws-role-client #topNav > a,
body.ws-role-client #topNav > button{
    gap:7px !important;
}


.ws-client-top-icon{
    width:21px;
    height:21px;

    display:inline-grid;
    place-items:center;

    flex:0 0 21px;

    border-radius:6px;

    color:#087258;

    pointer-events:none;
}


.ws-client-top-icon svg{
    width:15px;
    height:15px;
}


/* activo / hover */

body.ws-role-client #topNav > span:hover .ws-client-top-icon,
body.ws-role-client #topNav > a:hover .ws-client-top-icon,
body.ws-role-client #topNav > button:hover .ws-client-top-icon{
    color:#07513e;
}


/* ============================================================
   KPI
   ============================================================ */

.ws-client-kpi-icon{
    width:37px;
    height:37px;

    display:grid;
    place-items:center;

    margin-bottom:10px;

    border-radius:50%;

    background:#edf5f1;
    color:#087258;
}


.ws-client-kpi-icon.sand{
    background:#f3e8d7;
    color:#a97a3a;
}


.ws-client-kpi-icon svg{
    width:18px;
    height:18px;
}


.ws-client-kpi-decorated{
    position:relative !important;

    overflow:hidden !important;

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


.ws-client-kpi-decorated:hover{
    transform:translateY(-2px);

    border-color:#c9d9d1 !important;

    box-shadow:
        0 8px 22px
        rgba(24,57,44,.045) !important;
}


.ws-client-kpi-decorated::after{
    content:"";

    position:absolute;

    right:-18px;
    bottom:-18px;

    width:45px;
    height:45px;

    border-radius:50%;

    background:
        rgba(196,228,212,.20);

    pointer-events:none;
}


/* ============================================================
   TÍTULOS DE SECCIÓN
   ============================================================ */

.ws-client-section-title{
    display:flex !important;

    align-items:center !important;

    gap:9px !important;
}


.ws-client-section-icon{
    width:29px;
    height:29px;

    display:grid;
    place-items:center;

    flex:0 0 29px;

    border-radius:8px;

    background:#edf5f1;
    color:#087258;
}


.ws-client-section-icon svg{
    width:17px;
    height:17px;
}


/* ============================================================
   CARDS
   ============================================================ */

body.ws-role-client #content .panel,
body.ws-role-client #content .card{
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}


body.ws-role-client #content .panel:hover,
body.ws-role-client #content .card:hover{
    border-color:#cbdad3 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:900px){

    .ws-client-top-icon{
        display:none;
    }

}