/* ============================================================
   WÖRTH Selection · CLIENTE / EMPRESA
   Top navigation centrado
   ============================================================ */


/*
 * El header es nuestra referencia geométrica.
 */

body.ws-role-client header{
    position:relative !important;
}


/*
 * Solo EMPRESA:
 *
 * Inicio | Mis procesos | Candidatos | Mi empresa
 *
 * quedan exactamente en el centro del header,
 * independientemente del ancho del logo
 * o de los controles de la derecha.
 */

body.ws-role-client #topNav{
    position:absolute !important;

    left:50% !important;
    top:50% !important;

    transform:
        translate(-50%, -50%) !important;

    margin:0 !important;
    padding:0 !important;

    width:max-content !important;
    max-width:none !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:4px !important;

    z-index:10 !important;
}


/*
 * Homologamos cada opción con los demás roles.
 */

body.ws-role-client #topNav span,
body.ws-role-client #topNav a,
body.ws-role-client #topNav button{
    min-height:40px !important;

    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    padding:
        0 12px !important;

    margin:0 !important;

    border-radius:
        9px !important;

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

    font-size:
        12px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    white-space:
        nowrap !important;
}


/*
 * Hover WÖRTH.
 */

body.ws-role-client #topNav span:hover,
body.ws-role-client #topNav a:hover,
body.ws-role-client #topNav button:hover{
    background:
        #edf5f1 !important;

    color:
        #07513e !important;
}


/*
 * Si client-topnav.css tiene offsets anteriores,
 * los anulamos.
 */

body.ws-role-client #topNav{
    right:auto !important;
    bottom:auto !important;
}


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

@media(max-width:900px){

    body.ws-role-client #topNav{
        position:static !important;

        transform:none !important;

        margin:
            0 auto !important;

        width:auto !important;
    }

}