/* ============================================================
   WÖRTH Selection · UX Layer
   Sidebar + progreso de perfil
   ============================================================ */


/* ------------------------------------------------------------
   JERARQUÍA DEL SIDEBAR
   ------------------------------------------------------------ */

body.ws-worth-portal .menu-group{
    margin-bottom:20px !important;
}


body.ws-worth-portal .menu-title{

    margin:
        20px 10px 9px !important;

    color:
        #0a4636 !important;

    font-size:
        12px !important;

    line-height:
        1.3 !important;

    font-weight:
        800 !important;

    letter-spacing:
        .035em !important;

    text-transform:
        uppercase !important;
}


body.ws-worth-portal .menu-item,
body.ws-worth-portal .nav{

    min-height:
        42px !important;

    display:flex !important;

    align-items:center !important;

    padding:
        10px 12px !important;

    margin-bottom:
        3px !important;

    color:
        #39534a !important;

    font-size:
        13.5px !important;

    line-height:
        1.35 !important;

    font-weight:
        500 !important;

    border-radius:
        9px !important;
}


body.ws-worth-portal .menu-item.active,
body.ws-worth-portal .nav.active{

    position:relative;

    background:
        #e1efe8 !important;

    color:
        #073f31 !important;

    font-weight:
        700 !important;
}


body.ws-worth-portal .menu-item.active::before,
body.ws-worth-portal .nav.active::before{

    content:"";

    position:absolute;

    left:0;

    width:3px;
    height:22px;

    border-radius:
        0 4px 4px 0;

    background:
        #0a4636;
}


/* ------------------------------------------------------------
   TARJETA DE PROGRESO
   ------------------------------------------------------------ */

.ws-profile-progress-card{

    margin:
        18px 9px 22px;

    padding:
        15px 14px 14px;

    background:
        #f7f4ed;

    border:
        1px solid
        #e0e4df;

    border-radius:
        12px;

    position:relative;
}


.ws-profile-progress-eyebrow{

    color:
        #6f7d77;

    font-size:
        9.5px;

    font-weight:
        800;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.ws-profile-progress-head{

    display:flex;

    align-items:baseline;

    justify-content:space-between;

    gap:10px;

    margin-top:
        5px;
}


.ws-profile-progress-title{

    color:
        #073f31;

    font-size:
        13px;

    font-weight:
        750;
}


.ws-profile-progress-value{

    color:
        #073f31;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        21px;

    line-height:
        1;

    font-weight:
        600;
}


/*
 * Termómetro horizontal
 */

.ws-profile-thermometer{

    position:relative;

    height:
        12px;

    margin:
        12px 0 9px;

    border-radius:
        20px;

    background:
        #e1e5e1;

    overflow:hidden;
}


.ws-profile-thermometer-fill{

    width:0;

    height:100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #c9a775 0%,
            #70aa8d 60%,
            #0a5a45 100%
        );

    transition:
        width .65s ease;
}


/*
 * Pequeños segmentos que dan efecto de instrumento.
 */

.ws-profile-thermometer::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent calc(10% - 1px),
            rgba(255,255,255,.55)
                calc(10% - 1px),
            rgba(255,255,255,.55)
                10%
        );
}


.ws-profile-progress-message{

    color:
        #67766f;

    font-size:
        10.5px;

    line-height:
        1.45;
}


.ws-profile-progress-message strong{

    display:block;

    color:
        #29483e;

    font-size:
        11px;

    margin-bottom:
        2px;
}


.ws-profile-progress-action{

    width:100%;

    min-height:
        34px;

    margin-top:
        11px;

    padding:
        7px 10px;

    border:
        0;

    border-radius:
        19px;

    background:
        #0a4636;

    color:#fff;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:
        10.5px;

    font-weight:
        700;

    cursor:pointer;

    transition:
        background .15s ease,
        transform .15s ease;
}


.ws-profile-progress-action:hover{

    background:
        #06382b;

    transform:
        translateY(-1px);
}


.ws-profile-progress-complete{

    display:flex;

    align-items:center;

    gap:6px;

    margin-top:
        8px;

    color:
        #08734f;

    font-size:
        10.5px;

    font-weight:
        700;
}


.ws-profile-progress-check{

    width:17px;
    height:17px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        #0a5a45;

    color:#fff;

    font-size:
        9px;
}


/* ------------------------------------------------------------
   CONTENT HEADINGS
   ------------------------------------------------------------ */

body.ws-worth-portal .heading h1,
body.ws-worth-portal .ws-client-welcome h1{

    font-size:
        33px !important;
}


body.ws-worth-portal .heading p,
body.ws-worth-portal .ws-client-welcome p{

    font-size:
        13px !important;

    line-height:
        1.6 !important;
}


/* ------------------------------------------------------------
   PANELES MÁS LEGIBLES
   ------------------------------------------------------------ */

body.ws-worth-portal .panel-head h2,
body.ws-worth-portal .ws-client-panel-title,
body.ws-worth-portal .ws-company-form-title,
body.ws-worth-portal .ws-metrics-title{

    font-size:
        18px !important;

    line-height:
        1.25 !important;
}


body.ws-worth-portal .panel-head p,
body.ws-worth-portal .ws-client-panel-subtitle,
body.ws-worth-portal .ws-company-form-subtitle{

    font-size:
        11.5px !important;

    line-height:
        1.5 !important;
}


/* ------------------------------------------------------------
   KPI MÁS CLAROS
   ------------------------------------------------------------ */

body.ws-worth-portal .ws-client-stat-value,
body.ws-worth-portal .ws-management-stat-value,
body.ws-worth-portal .card-number{

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        30px !important;

    font-weight:
        600 !important;
}


body.ws-worth-portal .ws-client-stat-label,
body.ws-worth-portal .ws-management-stat-label,
body.ws-worth-portal .card-label{

    font-size:
        11.5px !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media(max-width:900px){

    body.ws-worth-portal .menu-title{

        font-size:
            11px !important;
    }


    body.ws-worth-portal .menu-item,
    body.ws-worth-portal .nav{

        font-size:
            13px !important;
    }

}