/* ============================================================
   WÖRTH Selection · UX v2
   ============================================================ */


/* ============================================================
   1. SIDEBAR MÁS LIMPIO
   ============================================================ */

/*
 * El candidato ya NO mostrará el porcentaje
 * dentro del sidebar.
 */

body.ws-role-candidate .sidebar
.ws-profile-progress-card{
    display:none !important;
}


/*
 * Encabezados de grupo.
 *
 * Nada de condensed, serif ni apariencia excesivamente
 * corporativa. Inter limpio.
 */

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

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

    font-size:
        12.5px !important;

    font-weight:
        700 !important;

    line-height:
        1.4 !important;

    letter-spacing:
        .01em !important;

    text-transform:
        none !important;

    color:
        #123f33 !important;

    margin:
        23px 10px 9px !important;
}


/*
 * Más espacio entre bloques.
 */

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

    margin-bottom:
        23px !important;
}


body.ws-worth-portal .menu-group + .menu-group{

    border-top:
        1px solid
        #e4e8e5;

    padding-top:
        4px;
}


/*
 * Opciones del menú.
 */

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

    min-height:
        43px !important;

    padding:
        10px 12px !important;

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

    font-size:
        14px !important;

    font-weight:
        500 !important;

    letter-spacing:
        0 !important;

    color:
        #3e554d !important;
}


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

    color:
        #073f31 !important;

    font-weight:
        650 !important;

    background:
        #e2efe9 !important;
}


/* ============================================================
   2. KPI PERFIL COMPLETO
   ============================================================ */

body.ws-worth-portal .ws-profile-kpi{

    position:relative;

    overflow:hidden;
}


/*
 * Destacamos solo ligeramente la tarjeta.
 */

body.ws-worth-portal .ws-profile-kpi::after{

    content:"";

    position:absolute;

    width:72px;
    height:72px;

    right:-28px;
    top:-28px;

    border-radius:50%;

    background:
        rgba(201,167,117,.13);

    pointer-events:none;
}


.ws-kpi-profile-top{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:10px;

    margin-top:
        5px;
}


.ws-kpi-profile-percent{

    color:
        #07513e;

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

    font-size:
        27px;

    line-height:
        1;

    font-weight:
        750;
}


/*
 * Termómetro
 */

.ws-kpi-thermometer{

    position:relative;

    width:100%;

    height:
        11px;

    margin-top:
        13px;

    overflow:hidden;

    background:
        #e3e7e4;

    border-radius:
        20px;
}


.ws-kpi-thermometer-fill{

    width:0;
    height:100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #c9a775 0%,
            #79ad91 55%,
            #07513e 100%
        );

    transition:
        width .65s ease;
}


/*
 * Marcas del termómetro
 */

.ws-kpi-thermometer::after{

    content:"";

    position:absolute;

    inset:0;

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

    pointer-events:none;
}


.ws-kpi-profile-foot{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    margin-top:
        8px;
}


.ws-kpi-profile-status{

    display:flex;

    align-items:center;

    gap:5px;

    color:
        #61716a;

    font-size:
        10.5px;
}


.ws-kpi-profile-status.complete{

    color:
        #08734f;

    font-weight:
        650;
}


.ws-kpi-profile-dot{

    width:16px;
    height:16px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        #07513e;

    color:#fff;

    font-size:
        9px;
}


/*
 * CTA cuando falta completar algo.
 */

.ws-kpi-profile-action{

    border:0;

    padding:
        5px 9px;

    border-radius:
        15px;

    background:
        transparent;

    color:
        #07513e;

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

    font-size:
        10px;

    font-weight:
        700;

    cursor:pointer;
}


.ws-kpi-profile-action:hover{

    background:
        #e3efe9;
}


/* ============================================================
   3. ELIMINAMOS PANEL REDUNDANTE
   ============================================================ */

body.ws-role-candidate
.ws-redundant-profile-completion{

    display:none !important;
}


/* ============================================================
   4. PRÓXIMA ENTREVISTA TIPO CALENDARIO
   ============================================================ */

.ws-interview-calendar{

    display:grid;

    grid-template-columns:
        66px minmax(0,1fr);

    gap:
        15px;

    align-items:start;
}


.ws-calendar-date{

    width:66px;

    border:
        1px solid
        #d7e1dc;

    border-radius:
        11px;

    overflow:hidden;

    text-align:center;

    background:#fff;
}


.ws-calendar-month{

    padding:
        5px 4px;

    background:
        #07513e;

    color:#fff;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.ws-calendar-day{

    padding:
        7px 4px 5px;

    color:
        #073f31;

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

    font-size:
        27px;

    line-height:
        1;

    font-weight:
        600;
}


.ws-calendar-weekday{

    padding:
        0 3px 7px;

    color:
        #77837e;

    font-size:
        8.5px;

    text-transform:
        uppercase;
}


.ws-interview-calendar-content{

    min-width:0;
}


.ws-interview-job{

    color:
        #073f31;

    font-size:
        13px;

    line-height:
        1.35;

    font-weight:
        700;
}


.ws-interview-full-date{

    margin-top:
        5px;

    color:
        #53665e;

    font-size:
        11px;
}


.ws-interview-time{

    margin-top:
        4px;

    color:
        #073f31;

    font-size:
        17px;

    font-weight:
        750;
}


.ws-interview-timezone{

    margin-top:
        3px;

    color:
        #82908a;

    font-size:
        9.5px;
}


/*
 * Hora local actual.
 */

.ws-local-clock{

    margin-top:
        11px;

    padding-top:
        9px;

    border-top:
        1px solid
        #e8ebe9;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:
        8px;

    color:
        #718079;

    font-size:
        9.5px;
}


.ws-local-clock strong{

    color:
        #07513e;

    font-size:
        10.5px;

    font-weight:
        700;
}


/* ============================================================
   5. PANEL DE ENTREVISTA UN POCO MÁS DESTACADO
   ============================================================ */

body.ws-worth-portal
.ws-next-interview-panel{

    border-top:
        3px solid
        #c9a775 !important;
}


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

@media(max-width:900px){

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

        font-size:
            12px !important;
    }


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

        font-size:
            13.5px !important;
    }

}




/* ============================================================
   KPI PERFIL COMPLETO · CÍRCULO
   ============================================================ */

.ws-kpi-profile-layout{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:10px;
}

.ws-kpi-profile-circle-wrap{
    display:flex;
    align-items:center;
    gap:14px;
}

.ws-kpi-profile-circle{
    --size:72px;
    --stroke:7;
    width:var(--size);
    height:var(--size);
    position:relative;
    flex:0 0 auto;
}

.ws-kpi-profile-circle svg{
    width:100%;
    height:100%;
    transform:rotate(-90deg);
    display:block;
}

.ws-kpi-profile-circle-track{
    fill:none;
    stroke:#e3e7e4;
    stroke-width:var(--stroke);
}

.ws-kpi-profile-circle-fill{
    fill:none;
    stroke:#07513e;
    stroke-width:var(--stroke);
    stroke-linecap:round;
    transition:stroke-dashoffset .7s ease;
}

.ws-kpi-profile-circle-value{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:"Inter", Arial, sans-serif;
    font-size:18px;
    font-weight:800;
    color:#07513e;
}

.ws-kpi-profile-meta{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.ws-kpi-profile-meta-title{
    font-size:12px;
    color:#5c6d66;
    font-weight:600;
    line-height:1.35;
}

.ws-kpi-profile-meta-status{
    display:flex;
    align-items:center;
    gap:6px;
    color:#08734f;
    font-size:12px;
    font-weight:700;
}

.ws-kpi-profile-meta-status.pending{
    color:#9a6a1e;
}

.ws-kpi-profile-dot{
    width:18px;
    height:18px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#07513e;
    color:#fff;
    font-size:10px;
    font-weight:800;
}

.ws-kpi-profile-dot.pending{
    background:#c9a775;
    color:#fff;
}

.ws-kpi-profile-subtext{
    margin-top:8px;
    font-size:11px;
    color:#70807a;
    line-height:1.4;
}

@media(max-width:900px){
    .ws-kpi-profile-layout{
        flex-direction:column;
        align-items:flex-start;
    }
}