/* Estilos para botones de login/logout en el menú */
li.menu-item.menu-login a {
    background-color: #008168 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

li.menu-item.menu-login a:hover {
    background-color: #006b56 !important;
    color: white !important;
}

li.menu-item.menu-logout a {
    background-color: #f5f5f5 !important;
    color: #008168 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

li.menu-item.menu-logout a:hover {
    background-color: #e0e0e0 !important;
    color: #008168 !important;
}

/* Sobreescribir específicamente los estilos de Divi para header fijo */
@media only screen and (min-width: 981px) {
    .et-fixed-header #top-menu li.menu-item.menu-login a {
        color: white !important;
        background-color: #008168 !important;
    }
    
    .et-fixed-header #top-menu li.menu-item.menu-login a:hover {
        color: white !important;
        background-color: #006b56 !important;
    }
    
    .et-fixed-header #top-menu li.menu-item.menu-logout a {
        color: #008168 !important;
        background-color: #f5f5f5 !important;
    }
    
    .et-fixed-header #top-menu li.menu-item.menu-logout a:hover {
        color: #008168 !important;
        background-color: #e0e0e0 !important;
    }
}

/* Asegurar que los elementos del menú tengan el espacio adecuado */
.menu-login,
.menu-logout {
    margin-left: 10px !important;
}