/* ============================================================
   WÖRTH Selection
   Portal Design System
   Candidato · Consultor · Empresa
   ============================================================ */

:root{
    /* Compatibilidad con los módulos existentes */
    --navy:#0a4636 !important;
    --navy-light:#165a48 !important;

    --purple:#0a5a45 !important;
    --purple-dark:#063d30 !important;
    --purple-light:#e4efe9 !important;

    --background:#f7f4ed !important;
    --surface:#ffffff !important;

    --text:#20332d !important;
    --muted:#6c7973 !important;
    --border:#dce2de !important;

    /* WÖRTH */
    --worth-green:#0a4636;
    --worth-green-dark:#06382b;
    --worth-green-mid:#0a5a45;

    --worth-sand:#c9a775;
    --worth-sand-dark:#ac8756;
    --worth-sand-soft:#eee2cf;

    --worth-cream:#f7f4ed;
    --worth-cream-light:#fbfaf6;

    --worth-mint:#dff1e7;
    --worth-mint-strong:#bcebd3;

    --worth-text:#20332d;
    --worth-muted:#6c7973;

    --worth-danger:#b42318;
    --worth-warning:#a15c00;
}


/* ============================================================
   BASE
   ============================================================ */

html,
body{
    background:var(--worth-cream) !important;
}

body.ws-worth-portal{
    color:var(--worth-text) !important;
    font-family:"Inter",Arial,sans-serif !important;
    -webkit-font-smoothing:antialiased;
}


/* ============================================================
   HEADER GLOBAL
   ============================================================ */

body.ws-worth-portal header,
body.ws-worth-portal .portal-header,
body.ws-worth-portal .main-header,
body.ws-worth-portal .top-header{

    background:#fff !important;

    border-bottom:
        1px solid rgba(10,70,54,.10) !important;

    box-shadow:
        0 1px 0 rgba(10,70,54,.03) !important;
}


/*
 * Logo real
 */

.ws-portal-brand-image{
    display:block;

    width:142px;
    height:auto;

    object-fit:contain;
}


/*
 * Contenedores que antes mostraban WorthSelection
 */

body.ws-worth-portal .brand,
body.ws-worth-portal .brand-logo,
body.ws-worth-portal .portal-brand,
body.ws-worth-portal .header-brand{

    color:var(--worth-green) !important;
}


/*
 * Links superiores
 */

body.ws-worth-portal header a,
body.ws-worth-portal header button,
body.ws-worth-portal .portal-header a,
body.ws-worth-portal .portal-header button{

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


/*
 * Top navigation
 */

body.ws-worth-portal .top-link,
body.ws-worth-portal .top-nav a,
body.ws-worth-portal [data-client-top-action]{

    color:#314b42 !important;

    font-size:12px;
    font-weight:600;

    text-decoration:none;

    transition:
        color .15s ease;
}


body.ws-worth-portal .top-link:hover,
body.ws-worth-portal .top-nav a:hover,
body.ws-worth-portal [data-client-top-action]:hover{

    color:var(--worth-green) !important;
}


/*
 * Activo superior
 */

body.ws-worth-portal .top-link.active,
body.ws-worth-portal .top-nav a.active,
body.ws-worth-portal [data-client-top-action].ws-client-top-active{

    color:var(--worth-green) !important;

    font-weight:750 !important;
}


body.ws-worth-portal [data-client-top-action].ws-client-top-active::after{

    background:
        var(--worth-green) !important;
}


/* ============================================================
   ROLE BADGE / SALIR
   ============================================================ */

body.ws-worth-portal .role,
body.ws-worth-portal .role-badge{

    background:
        var(--worth-mint) !important;

    color:
        var(--worth-green) !important;

    border:
        1px solid
        rgba(10,70,54,.08);

    font-size:10.5px !important;

    font-weight:750 !important;

    border-radius:18px !important;
}


body.ws-worth-portal .logout-btn{

    background:#fff !important;

    border:
        1px solid
        var(--worth-green) !important;

    color:
        var(--worth-green) !important;

    border-radius:22px !important;

    transition:.15s ease;
}


body.ws-worth-portal .logout-btn:hover{

    background:
        var(--worth-green) !important;

    color:#fff !important;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

body.ws-worth-portal .sidebar{

    background:#fff !important;

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

    border-right:
        1px solid
        #e2e7e3 !important;

    box-shadow:none !important;
}


/*
 * Barra de título:
 * Portal empresa / Portal candidato / Portal consultor
 */

body.ws-worth-portal .ws-role-banner{

    background:
        var(--worth-green) !important;

    color:#fff !important;

    margin:
        0 !important;

    padding:
        18px 16px !important;

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

    font-size:
        16px !important;

    font-weight:
        500 !important;

    letter-spacing:
        -.25px;
}


/*
 * Títulos de grupo
 */

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

    color:
        var(--worth-green-dark) !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .02em;

    text-transform:
        none;

    margin-top:
        12px;
}


/*
 * Items
 */

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

    color:
        #385148 !important;

    border-radius:
        8px !important;

    font-size:
        12px;

    transition:
        background .14s ease,
        color .14s ease;
}


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

    background:
        #f2f6f3 !important;

    color:
        var(--worth-green) !important;
}


/*
 * Item activo
 */

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

    background:
        var(--worth-mint) !important;

    color:
        var(--worth-green) !important;

    font-weight:
        700 !important;
}


/*
 * Separadores sidebar
 */

body.ws-worth-portal .sidebar hr,
body.ws-worth-portal .menu-separator{

    border-color:
        #e4e8e5 !important;
}


/* ============================================================
   ÁREA PRINCIPAL
   ============================================================ */

body.ws-worth-portal .main,
body.ws-worth-portal main,
body.ws-worth-portal .portal-main{

    background:
        var(--worth-cream) !important;
}


body.ws-worth-portal #content{

    width:100%;

    max-width:
        1280px;

    margin:
        0 auto;
}


/* ============================================================
   TITULARES
   ============================================================ */

body.ws-worth-portal #content h1,
body.ws-worth-portal .heading h1,
body.ws-worth-portal .ws-client-welcome h1,
body.ws-worth-portal .ws-company-profile-title{

    color:
        var(--worth-green) !important;

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

    font-weight:
        500 !important;

    letter-spacing:
        -.7px !important;

    line-height:
        1.08;
}


body.ws-worth-portal #content h1,
body.ws-worth-portal .heading h1{

    font-size:
        30px !important;
}


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

    color:
        var(--worth-green-dark) !important;
}


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

    color:
        var(--worth-muted) !important;
}


/* ============================================================
   TARJETAS / PANELES
   ============================================================ */

body.ws-worth-portal .panel,
body.ws-worth-portal .section,
body.ws-worth-portal .card,
body.ws-worth-portal .ws-client-panel,
body.ws-worth-portal .ws-client-stat,
body.ws-worth-portal .ws-company-form-panel,
body.ws-worth-portal .ws-company-card,
body.ws-worth-portal .ws-management-stat,
body.ws-worth-portal .ws-metrics-panel,
body.ws-worth-portal .ws-client-candidate,
body.ws-worth-portal .ws-client-job{

    background:#fff !important;

    border:
        1px solid
        #dfe5e1 !important;

    border-radius:
        12px !important;

    box-shadow:
        0 8px 28px
        rgba(28,58,47,.035) !important;
}


/*
 * Headers de cards
 */

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

    border-bottom:
        1px solid
        #e5e9e6 !important;
}


/* ============================================================
   KPI / MÉTRICAS
   ============================================================ */

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

    color:
        var(--worth-green) !important;
}


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

    color:
        var(--worth-muted) !important;
}


/* ============================================================
   BOTONES
   ============================================================ */

body.ws-worth-portal .btn,
body.ws-worth-portal .ws-client-btn.primary,
body.ws-worth-portal .ws-company-btn,
body.ws-worth-portal .ws-company-save,
body.ws-worth-portal .ws-selection-btn{

    border-radius:
        22px !important;

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

    font-weight:
        700 !important;
}


/*
 * Primarios
 */

body.ws-worth-portal .btn-primary,
body.ws-worth-portal .ws-client-btn.primary,
body.ws-worth-portal .ws-company-btn,
body.ws-worth-portal .ws-company-save{

    background:
        var(--worth-green) !important;

    border-color:
        var(--worth-green) !important;

    color:#fff !important;

    box-shadow:
        0 5px 14px
        rgba(10,70,54,.10);
}


body.ws-worth-portal .btn-primary:hover,
body.ws-worth-portal .ws-client-btn.primary:hover,
body.ws-worth-portal .ws-company-btn:hover,
body.ws-worth-portal .ws-company-save:hover{

    background:
        var(--worth-green-dark) !important;

    border-color:
        var(--worth-green-dark) !important;
}


/*
 * Secundarios
 */

body.ws-worth-portal .btn-outline,
body.ws-worth-portal .ws-client-btn:not(.primary),
body.ws-worth-portal .ws-company-secondary{

    background:#fff !important;

    border:
        1px solid
        #bccbc4 !important;

    color:
        var(--worth-green) !important;
}


/* ============================================================
   INPUTS / SELECT / TEXTAREA
   ============================================================ */

body.ws-worth-portal input,
body.ws-worth-portal select,
body.ws-worth-portal textarea{

    border:
        1px solid
        #ced8d3 !important;

    border-radius:
        8px !important;

    background:#fff;

    color:
        var(--worth-text);

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


body.ws-worth-portal input:focus,
body.ws-worth-portal select:focus,
body.ws-worth-portal textarea:focus{

    outline:none;

    border-color:
        var(--worth-green) !important;

    box-shadow:
        0 0 0 3px
        rgba(10,70,54,.08) !important;
}


/* ============================================================
   TABLAS
   ============================================================ */

body.ws-worth-portal table{

    border-collapse:
        collapse;
}


body.ws-worth-portal table th{

    background:
        #f5f7f4 !important;

    color:
        #5f7069 !important;

    font-size:
        10.5px;

    font-weight:
        700;
}


body.ws-worth-portal table td{

    color:
        #30483f !important;

    border-color:
        #e7ebe8 !important;
}


/* ============================================================
   PIPELINE
   ============================================================ */

body.ws-worth-portal .pipeline-column{

    background:
        #f0f4f1 !important;

    border:
        1px solid
        #e0e6e2 !important;
}


body.ws-worth-portal .pipeline-card{

    background:#fff !important;

    border:
        1px solid
        #e0e6e2;

    box-shadow:
        0 3px 10px
        rgba(25,55,43,.035);
}


body.ws-worth-portal .match{

    color:
        var(--worth-green) !important;
}


/* ============================================================
   TAGS / BADGES
   ============================================================ */

body.ws-worth-portal .ws-client-tag,
body.ws-worth-portal .ws-company-badge{

    background:
        #eef4f0 !important;

    color:
        var(--worth-green) !important;
}


body.ws-worth-portal .ws-client-stage{

    background:
        var(--worth-mint) !important;

    color:
        var(--worth-green) !important;
}


/*
 * Estados cerrados continúan rojos.
 */

body.ws-worth-portal .ws-client-status.CLOSED{

    background:#fef3f2 !important;
    color:#b42318 !important;
}


body.ws-worth-portal .ws-client-status.PUBLISHED{

    background:#ecfdf3 !important;
    color:#067647 !important;
}


/* ============================================================
   NOTIFICACIONES
   ============================================================ */

body.ws-worth-portal .ws-notification-card.unread,
body.ws-worth-portal .ws-client-notification.unread{

    border-left-color:
        var(--worth-green) !important;

    background:
        #fbfdfb !important;
}


body.ws-worth-portal .ws-notification-icon{

    background:
        var(--worth-mint) !important;

    color:
        var(--worth-green) !important;
}


body.ws-worth-portal .ws-notification-tab.active{

    background:
        var(--worth-green) !important;

    border-color:
        var(--worth-green) !important;
}


/* ============================================================
   TOGGLES
   ============================================================ */

body.ws-worth-portal .ws-toggle input:checked + .ws-toggle-slider{

    background:
        var(--worth-green) !important;
}


/* ============================================================
   EMPRESA
   ============================================================ */

body.ws-worth-portal .ws-company-avatar{

    background:
        var(--worth-green) !important;
}


body.ws-worth-portal .ws-company-active{

    background:
        var(--worth-mint) !important;

    color:
        var(--worth-green) !important;
}


/* ============================================================
   MODALES
   ============================================================ */

body.ws-worth-portal .ws-client-overlay{

    background:
        rgba(10,45,35,.58) !important;
}


body.ws-worth-portal .ws-client-modal{

    border-radius:
        14px !important;

    box-shadow:
        0 30px 90px
        rgba(5,35,25,.22) !important;
}


body.ws-worth-portal .ws-client-modal-title{

    color:
        var(--worth-green) !important;

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

    font-weight:
        500 !important;
}


/* ============================================================
   SCROLLBARS
   ============================================================ */

body.ws-worth-portal *{

    scrollbar-width:
        thin;

    scrollbar-color:
        #bacbc3
        transparent;
}


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

@media(max-width:900px){

    .ws-portal-brand-image{
        width:120px;
    }


    body.ws-worth-portal #content h1,
    body.ws-worth-portal .heading h1{

        font-size:
            27px !important;
    }
}