/* CONFIGURAÇÕES GERAIS */
*{
margin:0; /* remove margens padrão */
padding:0; /* remove espaçamentos internos padrão */
box-sizing:border-box; /* faz borda e padding entrarem no tamanho total */
}

/* corpo da página */
body{
font-family:Arial, Helvetica, sans-serif; /* define a fonte principal */
background-image: linear-gradient( rgba(0,0,0,0.55), rgba(0,0,0,0.55)),url("../IMAGENS/LOGOS/imgf1.png"); /* camada escura transparente sobre a imagem */
background-size:cover; /* faz a imagem ocupar toda a tela */
background-position:center; /* centraliza a imagem */
background-repeat:no-repeat; /* impede repetição da imagem */
min-height:100vh; /* ocupa no mínimo toda a altura da tela */


}

/* CONTEÚDO PRINCIPAL */

.conteudo{
min-height:100vh; /* ocupa toda a altura da tela */
display:flex; /* ativa o Flexbox */
flex-direction:column; /* organiza os elementos em coluna */
justify-content:center; /* centraliza os elementos verticalmente */
align-items:center; /* centraliza os elementos horizontalmente */
}

/* TÍTULO */

.titulo{
font-family:Georgia, serif; /* define a fonte do título */
font-size:95px; /* tamanho da fonte */
font-style:italic; /* deixa o texto em itálico */
font-weight:bold; /* deixa o texto em negrito */
color:#2962ff; /* cor azul */
text-align:center; /* centraliza o texto */
margin-top:-40px; /* move o título para cima */
letter-spacing:-3px; /* diminui o espaçamento entre as letras */
text-shadow:0 0 10px rgba(41,98,255,0.5),0 0 20px rgba(41,98,255,0.3);/* cria um brilho azul ao redor do texto */
}

/* CAIXA DE LOGIN */
.login{
width:380px; /* largura da caixa */
background:rgba(255,255,255,0.08);/* fundo branco transparente */
backdrop-filter:blur(15px);/* cria efeito de vidro fosco */
border:1px solid rgba(41,98,255,0.5);/* borda azul transparente */
box-shadow: 0 0 20px rgba(41,98,255,0.3);/* brilho azul ao redor da caixa */
margin-top:40px; /* espaço acima da caixa */
padding:35px; /* espaço interno */
border-radius:20px; /* cantos arredondados */
}

/* TÍTULO LOGIN */

.login h2{
font-size:50px; /* tamanho da fonte */
text-align:center; /* centraliza o texto */
color:white; /* cor branca */
margin-bottom:20px; /* espaço abaixo */


}

/* TEXTOS DOS CAMPOS */
.login h3{
color:white; /* deixa o texto branco */
margin-bottom:8px; /* espaço abaixo */
}

/* CAMPOS DE TEXTO */

.login input{
width:100%; /* ocupa toda a largura */
height:45px; /* altura do campo */
border:none; /* remove a borda padrão */
border-radius:30px; /* deixa arredondado */
background:rgba(255,255,255,0.12);
/* fundo transparente */
color:white; /* cor do texto digitado */
margin-bottom:20px; /* espaço abaixo */
padding-left:15px; /* espaço interno à esquerda */
font-size:17px; /* tamanho da fonte */
outline:none; /* remove a borda azul ao clicar */


}

/* PLACEHOLDER */

.login input::placeholder{
color:#ccc; /* cor cinza do texto de exemplo */
}
/* BOTÃO */

.login button{
width:100%; /* ocupa toda a largura */
height:45px; /* altura do botão */
border:none; /* remove borda */
border-radius:30px; /* deixa arredondado */
background:#2962ff; /* cor azul */
color:white; /* texto branco */
font-size:18px; /* tamanho da fonte */
font-weight:bold; /* deixa em negrito */
cursor:pointer; /* vira mãozinha ao passar o mouse */
transition:.3s; /* suaviza animações */


}
/* EFEITO DO BOTÃO */
.login button:hover{
background:#0039cb; /* azul mais escuro */
transform:scale(1.03);
/* aumenta levemente o tamanho */
}

/* DIV DO LINK DE CADASTRO */

.meio{
text-align:center; /* centraliza o link */
margin-top:20px; /* espaço acima */
}

/* LINK DE CADASTRO */
.meio a{
color:#6ea8ff; /* azul claro */
text-decoration:none; /* remove o sublinhado */
font-weight:bold; /* deixa em negrito */
}

/* EFEITO DO LINK */

.meio a:hover{
text-decoration:underline; /* adiciona sublinhado */
}

/* RODAPÉ */
footer{
position:fixed; /* fixa o rodapé no final da tela */
bottom:0; /* encosta na parte inferior */
left:0; /* encosta na esquerda */
width:100%; /* ocupa toda a largura */
height:50px; /* altura do rodapé */
background:linear-gradient(to right,#000000, #1d1d8f, #2b2bb8); /* cria um degradê do preto para o azul */
display:flex; /* organiza os elementos em linha */
justify-content:space-between; /* distribui os elementos entre esquerda e direita */
align-items:center; /* centraliza verticalmente */
padding:0 30px;/* cria espaçamento interno nas laterais */
color:white; /* cor do texto */
font-size:18px; /* tamanho da fonte */
font-family:Arial, sans-serif; /* fonte utilizada */
}

/* TEXTO CENTRAL DO RODAPÉ */
.footer-center{
position:absolute; /* permite posicionamento livre */
left:50%; /* coloca no meio da tela */
transform:translateX(-50%);/* ajusta para ficar exatamente centralizado */
font-weight:bold; /* deixa em negrito */
}
/* TEXTO DA DIREITA */
.footer-right{
font-weight:bold; /* deixa o ano em negrito */
}

/* MENSAGEM DE ERRO DO LOGIN */
.erro{
    color: rgba(235, 10, 10, 0.856); /* deixa o texto vermelho com leve transparência */
    font-size: 14px; /* define o tamanho da letra */
    font-weight: bold; /* deixa o texto em negrito */
    margin-top: -5px; /* move a mensagem 5px para cima */
    text-align: center; /* centraliza o texto */
}