/* ==================================================== */
/* 1. VARIÁVEIS                                         */
/* ==================================================== */
:root {
    --vermelho-cancelar: #ff0000;
    --preto-menu: #000000;
    --azul-marinho: #000080;
    --amarelo-perfil: #FFFF00;
}

/* ==================================================== */
/* 2. ESTILO DESKTOP (Menu Pequeno)                     */
/* ==================================================== */
@media (min-width: 992px) {
    .dropdown-menu-end {
        background-color: var(--preto-menu) !important;
        border: 1px solid #444 !important;
        padding: 10px !important;
    }

    .dropdown-item-perfil, 
    .dropdown-item-alterar-senha {
        background-color: transparent !important;
        color: #0000FF !important; /* Palavras Azuis */
        font-weight: 900 !important;
        text-align: center;
        transition: all 0.3s ease;
    }

    .dropdown-item-perfil:hover, 
    .dropdown-item-alterar-senha:hover {
        background-color: #0000FF !important;
        color: var(--amarelo-perfil) !important;
    }

    .dropdown-item-sair {
        color: #FF0000 !important;
        background: transparent !important;
    }
}

/* ==================================================== */
/* 3. ESTILO MOBILE (Tela Cheia, Preto e Vermelho)      */
/* ==================================================== */
@media (max-width: 991px) {
    /* Fundo Totalmente Preto Fullscreen */
    .dropdown-menu-mobile-fullscreen.show {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: #000000 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        z-index: 10000 !important;
        padding: 60px 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Container de cada item para as linhas prateadas */
    .dropdown-menu-mobile-fullscreen li {
        width: 85%;
        text-align: center;
        border-bottom: 2px solid;
        /* Linha Prata Metálica entre os botões */
        border-image: linear-gradient(to right, transparent, #C0C0C0, #FFFFFF, #C0C0C0, transparent) 1;
        margin-bottom: 20px;
        padding-bottom: 15px;
    }

    /* Botões Superiores (Azuis Arredondados) */
    .dropdown-item-perfil, 
    .dropdown-item-alterar-senha {
        background-color: #0000FF !important; /* Azul solicitado */
        color: #FFFFFF !important;
        font-weight: bold !important;
        font-size: 1.2rem !important;
        text-decoration: none !important;
        border-radius: 50px !important; /* Arredondado igual ao Sair/Voltar */
        padding: 15px !important;
        display: block;
        width: 100%;
        border: 2px solid #000080 !important;
        text-transform: uppercase;
        transition: transform 0.2s;
    }

    /* Clique nos Botões Azuis: Texto Amarelo */
    .dropdown-item-perfil:active, 
    .dropdown-item-alterar-senha:active {
        color: #FFFF00 !important;
        transform: scale(0.98);
    }

    /* Rodapé fixo (Sem linha prateada no final) */
    .menu-mobile-footer {
        margin-top: auto !important;
        border-bottom: none !important; 
        width: 85% !important;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding-bottom: 40px;
    }

    /* Botões Inferiores (Vermelhos Arredondados) */
    .dropdown-item-sair, 
    .btn-voltar-menu-fullscreen {
        background-color: #ff0000 !important; /* Vermelho solicitado */
        color: #FFFFFF !important;
        border: 2px solid #b30000 !important;
        border-radius: 50px !important; /* Formato Pílula */
        padding: 15px !important;
        font-weight: bold !important;
        width: 100% !important;
        text-transform: uppercase;
        font-size: 1.2rem !important;
    }

    /* Clique nos Botões Vermelhos: Texto Amarelo */
    .dropdown-item-sair:active, 
    .btn-voltar-menu-fullscreen:active {
        color: #FFFF00 !important;
    }
}