/*
 * WÖRTH Selection · cabecera corporativa
 *
 * Área privada al estilo de Michael Page: solo el logo y la cuenta.
 * El logo tiene el mismo tamaño y posición que en worthselection.com
 * (cabecera 90 px, logo 173 px de ancho visible, contenido 1150 px),
 * para que pasar de la web al portal no se note.
 */

.ws-site-header {
    position: relative;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid #EDF1EF;
    font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

.ws-site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 90px;
    padding-left: max(18px, calc((100% - 1150px) / 2));
    padding-right: max(18px, calc((100% - 1150px) / 2));
}

.ws-site-header__logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.ws-site-header__logo img {
    display: block;
    width: 173px;
    height: auto;
}

.ws-site-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.ws-site-header__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #0F3B2E;
}

.ws-site-header__icon:hover {
    background: #F1F5F3;
}

/* ---------- Mi cuenta (con sesión iniciada) ---------- */

.ws-site-header__account {
    position: relative;
}

.ws-site-header .ws-site-header__me {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.ws-site-header .ws-site-header__me.has-initials {
    background: #0F3B2E;
    color: #fff;
}

.ws-site-header .ws-site-header__me.has-initials:hover {
    background: #08271E;
}

.ws-site-header__me.has-initials svg {
    display: none;
}

.ws-site-header__initials {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
}

.ws-site-header__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    min-width: 236px;
    padding: 8px;
    background: #fff;
    border: 1px solid #DCE3DF;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(15, 59, 46, .14);
}

.ws-site-header__menu[hidden] {
    display: none;
}

.ws-site-header__who {
    display: grid;
    gap: 2px;
    padding: 8px 10px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid #EDF1EF;
}

.ws-site-header__who[hidden] {
    display: none;
}

.ws-site-header__who strong {
    font-size: 13.5px;
    font-weight: 600;
    color: #0F3B2E;
}

.ws-site-header__who span {
    overflow: hidden;
    font-size: 12px;
    color: #5D6E67;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-site-header .ws-site-header__menu a,
.ws-site-header .ws-site-header__menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 0;
    padding: 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    color: #0F3B2E;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ws-site-header .ws-site-header__menu a:hover,
.ws-site-header .ws-site-header__menu button:hover {
    background: #F1F5F3;
}

.ws-site-header .ws-site-header__menu [data-ws-logout] {
    color: #9B2C2C;
}

.ws-site-header .ws-site-header__menu button:disabled {
    opacity: .6;
    cursor: wait;
}

.ws-site-header button:focus-visible,
.ws-site-header a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 167, 117, .55);
    border-radius: 4px;
}

@media (max-width: 921px) {
    .ws-site-header__inner {
        height: 77px;
    }

    .ws-site-header__logo img {
        width: 125px;
    }
}

@media (max-width: 544px) {
    .ws-site-header__inner {
        height: 71px;
    }

    .ws-site-header__logo img {
        width: 101px;
    }
}

/*
 * portal.html: la cabecera antigua (header.header, con «Salir» y menú
 * superior) ya no se usa. Su navegación está en el panel lateral y la
 * cuenta en la cabecera nueva.
 */
body > header.header {
    display: none !important;
}

/*
 * portal.html tiene reglas antiguas muy fuertes para cualquier botón dentro
 * de #ws-wordpress-header-host (fondo, borde, relleno). Aquí ganan las de la
 * cabecera nueva.
 */
#ws-wordpress-header-host .ws-site-header .ws-site-header__me {
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #0F3B2E !important;
    box-shadow: none !important;
}

#ws-wordpress-header-host .ws-site-header .ws-site-header__me.has-initials {
    background: #0F3B2E !important;
    color: #fff !important;
}

#ws-wordpress-header-host .ws-site-header .ws-site-header__menu button {
    width: 100% !important;
    padding: 10px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #9B2C2C !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

#ws-wordpress-header-host .ws-site-header .ws-site-header__menu button:hover {
    background: #F1F5F3 !important;
}