/*------------ Config Botton Display ------------*/
.Botao-Menu{
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0px;
    gap: 6px;
    margin-top: 30px;
    margin-left: 10px;
}

.Point2, .Point1{
    background-color: black;
    width: 35px;
    height: 4px;
    margin-left: 10px;
    transition: 0.5s;
}
.Menu-Botton{
    position: fixed;
    width: 60px;
    margin-left: 8px;
    height: 40px;
    margin-top: 18px;
    border: none;
    background-color: transparent;
}

@keyframes BotaoMenu {
    10%{width: 45px;}
    20%{width: 40px;}
    30%{width: 35px;}
    40%{width: 30px;}
    50%{width: 35px;}
    60%{width: 40px;}
    70%{width: 45px;}
    100%{width: 50px;}
}
@keyframes BotaoMenu2 {
    10%{width: 35px;}
    20%{width: 40px;}
    30%{width: 45px;}
    40%{width: 50px;}
    50%{width: 45px;}
    60%{width: 40px;}
    70%{width: 35px;}
    100%{width: 30px;}
}
/*------------------------------------------------*/
/*----------------------- Barra Lateral ----------*/
/*----------------------- Barra Lateral - DESIGN MELHORADO ----------*/
.Barra-Lateral{
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Posição e Dimensões */
    left: -120px;
    top: 8px; /* Mantido como 8px, não centralizado */
    width: 100px;
    height: 80%;
    transition: left 0.4s ease, box-shadow 0.2s; /* Transição mais suave e longa */   
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.Barra-Lateral.ativa{
    left: 8px; /* Movido para 8px para simetria com top: 8px */
}
/*-----------------------------------------------------------------*/
/*------------------ Funcionalidades ------------*/
.Funcionalidades{
    display: flex;
    margin-top: 10px;
    z-index: 10;
    align-self: center;
}
.Lista-Functions{
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    align-items: center;
    padding-left: 0px;
    gap: 20px;
}
.Lista-Functions a{
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    color: inherit !important;
    font-weight: bold;
    text-align: center;
}
.Image-Perfil{
    width: 80px;
    height: 80px;
    border-radius: 100%;
    padding: 5px;
    background-color: #1473da;
}
.Image-Perfil:hover{
    transition: 0.3s;
    background-color: rgb(128, 128, 128);
}
.Imagem-Perfil-busca{
    width: 40px;
    height: 40px;
    border-radius: 100%;
}
.Imagem-item{
    width: 50px;
    height: 50px;
    align-self: center;
    padding: 8px;
    border-radius: 100px;
    background-color: #1473da;
}
.Imagem-item:hover{
    transition: 0.3s;
    background-color: gray;
}
/*---------------------------- Perfil Planos ------------------------*/
/* Define o efeito de brilho que pulsa */
/* Elite */
@keyframes ELITE-glow {
    0% {
        /* Brilho inicial mais suave (Amarelo) */
        box-shadow: 0 0 5px #FFC300, 0 0 10px #FFC300;
    }
    50% {
        /* Brilho máximo (Dourado/Laranja) */
        box-shadow: 0 0 10px #FFA500, 0 0 20px #FFA500, 0 0 30px #FF9900;
    }
    100% {
        /* Retorna ao brilho inicial */
        box-shadow: 0 0 5px #FFC300, 0 0 10px #FFC300;
    }
}
/* Prime */
/* Cores azul e ciano */
@keyframes PRIME-glow {
    0% {
        /* Brilho inicial mais suave (Azul) */
        box-shadow: 0 0 5px #0000FF, 0 0 10px #0000FF;
    }
    50% {
        /* Brilho máximo (Ciano) */
        box-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF;
    }
    100% {
        /* Retorna ao brilho inicial */
        box-shadow: 0 0 5px #0000FF, 0 0 10px #0000FF;
    }
}
/* Pulse */
/* Cores prata*/
@keyframes PULSE-glow {
    0% {
        /* Brilho inicial mais suave (Prata) */
        box-shadow: 0 0 5px #C0C0C0, 0 0 10px #C0C0C0;
    }
    50% {
        /* Brilho máximo (Branco) */
        box-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF;
    }
    100% {
        /* Retorna ao brilho inicial */
        box-shadow: 0 0 5px #C0C0C0, 0 0 10px #C0C0C0;
    }
}

.border_ELITE{
    /* Aplica a animação: nome, duração (2s), repetição (infinita), e alternância */
    animation: ELITE-glow 2s infinite alternate ease-in-out; 
    
    /* Padding e box-sizing são boas práticas para o efeito de sombra em imagens */
    padding: 2px;
    box-sizing: border-box;
    /* Faz com que a sombra fique suave */
    border-radius: 100%;
    background-color: transparent;
}
.border_PRIME{
    /* Aplica a animação: nome, duração (2s), repetição (infinita), e alternância */
    animation: PRIME-glow 2s infinite alternate ease-in-out; 
    
    /* Padding e box-sizing são boas práticas para o efeito de sombra em imagens */
    padding: 2px;
    box-sizing: border-box;
    /* Faz com que a sombra fique suave */
    border-radius: 100%;
    background-color: transparent;
}
.border_PULSE{
    /* Aplica a animação: nome, duração (2s), repetição (infinita), e alternância */
    animation: PULSE-glow 2s infinite alternate ease-in-out; 
    
    /* Padding e box-sizing são boas práticas para o efeito de sombra em imagens */
    padding: 2px;
    box-sizing: border-box;
    /* Faz com que a sombra fique suave */
    border-radius: 100%;
    background-color: transparent;
}
.img_premium{
    width: 40px;
}
/*-----------------------------------------------*/
.senha-container{
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
}

.See-password-icon{
    position: absolute;
    align-self: flex-end;
    justify-content: center;
    margin: 5px;
    width: 25px;
    height: 15px;
    padding: 5px;
    border-radius: 8px;
}
.See-password-icon:hover{
    background-color: rgb(218, 218, 218);
}
#Entrada-Senha{
    margin: 0px;
}
/*---------------- Global Css -------------------*/
.cor-destaque-input-barra-lateral{
    background-color: #919191 !important;
}

.Back-btn{
    position: absolute;
    left: 10px;
    background-color: rgb(0, 110, 255);
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    margin-left: 0px;
    cursor: pointer;
    border-radius: 12px;
    font-weight: bold;
}
.Back-btn:hover{
    background-color: rgb(0, 80, 180);
}

/*
    ESTILOS PARA O ALERTA PUSH PERSONALIZADO
*/

.custom-alert {
    position: fixed;
    top: -100px; /* Posição inicial: escondido acima */
    right: 20px;
    
    /* Estilos Visuais */
    background-color: #2c3e50; /* Fundo escuro */
    color: #ecf0f1; /* Texto claro */
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999; /* Garante que fique acima de tudo */
    opacity: 0;
    
    /* Animação de entrada e saída (usando cubic-bezier para um efeito "bounce") */
    transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease-out;
}

/* Estado 'show' para a animação de entrada */
.custom-alert.show {
    top: 20px; /* Posição final na tela (desliza para baixo) */
    opacity: 1;
}

.custom-alert:hover {
    /* Pequeno efeito ao passar o mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.alert-titulo {
    display: block;
    font-weight: bold;
    margin-bottom: 3px;
    font-size: 1.1em;
}

.alert-mensagem {
    margin: 0;
    font-size: 0.9em;
}

/* CONTAINER FLUTUANTE (position: fixed) */
#flash-container {
    /* Faz a div flutuar acima de todo o conteúdo */
    position: fixed; 
    /* Posiciona no topo e no centro da tela */
    top: 20px; 
    left: 50%;
    /* Ajusta a posição para centralizar o bloco */
    transform: translateX(-50%); 
    z-index: 1000; /* Garante que fique acima de outros elementos */
    width: 90%;
    max-width: 400px; /* Limita o tamanho para que não fique muito larga */
}

/* Lista de mensagens */
.flash-messages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ITEM INDIVIDUAL DA MENSAGEM */
.flash-item {
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* Efeito de transição para o fade-out */
    transition: opacity 0.5s ease-in-out; 
}

/* Estilo para mensagens de erro */
.flash-error {
    background-color: #dc3545; /* Vermelho */
}

/* Estilo para mensagens de aviso */
.flash-warning {
    background-color: #ffc107; /* Amarelo */
    color: #333; /* Texto escuro para contraste */
}

/* Estilo para mensagens de sucesso/padrão */
.flash-success, .flash-default {
    background-color: #28a745; /* Verde */
    color: #fff;
}

/* Classe que será adicionada pelo JS para iniciar o fade-out */
.flash-hidden {
    opacity: 0;
}

.social-auth-container { /* Alterado de .social-buttons */
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.btn-google-auth { /* Alterado de .btn-social */
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: 0.3s;
    border: 1px solid #ddd;
    color: #333;
    background-color: white;
}

.btn-google-auth img { /* Alterado */
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.btn-google-auth:hover { /* Alterado */
    background-color: #f7f7f7;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}