/* Estilo do menu do usuário */
.menu-user {
    position: relative;
}

/* Menu user */
.menu-user-container {
    display: flex; /* Alinha os itens horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    gap: 10px; /* Espaçamento entre o menu e o botão Home */
    flex-direction: column; /* Empilha os elementos verticalmente */
}


.menu-user-options {
    display: none; /* Inicialmente oculto */
    opacity: 0; /* Transparente */
    position: absolute;
    /* top: 40px; Ajuste conforme necessário */
    right: 0; /* Alinha o menu à direita */
    
    background-color: #ffffff; /* Fundo branco */
    border: 1px solid #ddd; /* Borda cinza clara */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
    list-style: none; /* Remove marcadores de lista */
    padding: 10px 0; /* Espaçamento interno */
    margin: 0; /* Remove margens externas */
    z-index: 10005; /* Certifique-se de que o menu está acima de outros elementos */
    width: 200px; /* Define a largura do menu */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Transição suave para o fade e movimento */
}

/* Exibir o menu com fade-in */
.menu-user-options.active {
    display: block; /* Torna o menu visível */
    opacity: 1; /* Totalmente opaco */
    }


.menu-user-options li a {
    text-decoration: none; /* Remove sublinhado */
    color: black; /* Cor padrão do texto */
    display: block; /* Garante que o link ocupe toda a largura do item */
    padding: 10px 15px; /* Espaçamento interno */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave */
    
}

/* Cor ao passar o mouse */
.menu-user-options li a:hover {
    background-color: aquamarine; /* Cor de fundo ao passar o mouse */
    color: #000; /* Cor do texto ao passar o mouse */
    border-radius: 4px; /* Bordas arredondadas para um visual mais moderno */
}

.menu-user-button {
    position: relative;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    z-index: 9991; /* Certifique-se de que o botão está acima do menu */
}