/* CONFIGURAÇÕES GERAIS */
*{
    margin:0; /* remove margem padrão */
    padding:0; /* remove espaçamento interno padrão */
    box-sizing:border-box; /* faz padding e borda não aumentarem o tamanho total */
}
/* CORPO DA PÁGINA */
body{
    font-family:Arial, Helvetica, sans-serif; /* define a fonte do site */
    background-image:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)  ),url("../IMAGENS/LOGOS/imgf1.png"); /*camada escura com mesma cor e imagem de fundo */
    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; /* garante altura mínima igual à tela */
}
/* LOGO */
.logo{
    position:absolute; /* posicionamento independente */
    left:15px; /* distância da borda esquerda */
}

/* IMAGEM DA LOGO */
.logo img{
    height:50px; /* altura da imagem */
}  

/* CONTEÚDO PRINCIPAL */

.conteudo{
    min-height: 100vh; /* ocupa pelo menos a altura da tela */
    height: auto; /* permite aumentar conforme o formulário */
    display: flex; /* organiza título e cadastro */
    flex-direction: column; /* coloca um abaixo do outro */
    align-items: center; /* centraliza horizontalmente */
    justify-content: flex-start; /* mantém o conteúdo no início */
    padding: 130px 20px 110px; /* espaço superior, lateral e inferior */
}

/* TÍTULO PRINCIPAL */

.titulo{
    font-family: Georgia, serif; /* mantém a fonte original */
    font-size: 95px; /* mantém o tamanho original */
    font-style: italic; /* título inclinado */
    font-weight: bold; /* título em negrito */
    color: #2962ff; /* azul */
    text-align: center; /* centraliza o texto */
    margin-top: -40px; /* mantém o ajuste original */
    letter-spacing: -3px; /* aproxima as letras */
    text-shadow: 0 0 10px rgba(41,98,255,0.5), 0 0 20px rgba(41,98,255,0.3); /* brilho azul */
}

/* CAIXA DO CADASTRO */

.login{
    width: 380px; /* largura original */
    max-width: 100%; /* evita ultrapassar a tela */
    background: rgba(255,255,255,0.08); /* vidro escuro */
    backdrop-filter: blur(15px); /* efeito vidro */
    border: 1px solid rgba(41,98,255,0.5); /* borda azul */
    box-shadow: 0 0 20px rgba(41,98,255,0.3); /* brilho azul */
    margin-top: 40px; /* distância do título */
    padding: 35px; /* espaço interno */
    border-radius: 20px; /* cantos arredondados */
}


/* TÍTULO LOGIN */
.login h2{
    font-size:50px; /* tamanho do texto */
    text-align:center; /* centraliza */
    color:white; /* cor branca */
    margin-bottom:20px; /* espaço abaixo */
}

/* TÍTULOS DOS CAMPOS */
.login h3{
    color:white; /* cor branca */
    margin-bottom:8px; /* espaço abaixo */
}

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

/* PLACEHOLDER DOS INPUTS */
.login input::placeholder{
    color:#ccc; /* cinza claro */
}

/* BOTÃO */
.login button{
    width:100%; /* ocupa toda largura */
    height:45px; /* altura */
    border:none; /* remove borda */
    border-radius:30px; /* cantos arredondados */
    background:#2962ff; /* azul */
    color:white; /* texto branco */
    font-size:18px; /* tamanho da fonte */
    font-weight:bold; /* deixa em deixa em negrito */
    cursor:pointer; /* vira mãozinha */
    transition:.3s; /* animação suave */
}

/* 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 conteúdo */
    margin-top:20px; /* espaço acima */
}

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

/* EFEITO DO LINK */
.meio a:hover{
    text-decoration:underline; /* adiciona sublinhado */
}
/* RODAPÉ */
footer{
    position: relative; /* fica depois do conteúdo, sem cobrir o formulário */
    bottom:0; /* posiciona no final da página */
    left:0; /* encosta na borda 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 textos */
    align-items:center; /* centraliza verticalmente */
    padding:0 30px; /* cria espaço nas laterais */
    color:white; /* texto branco */
    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%); /* centraliza perfeitamente */
    font-weight:bold; /* deixa em deixa em deixa em negrito */
}

/* TEXTO DA DIREITA DO RODAPÉ */
.footer-right{
    font-weight:bold; /* deixa em deixa em deixa em negrito */
}

/* REGRAS DA SENHA */

.regras-senha{
    margin: 12px 0 20px; /* espaço ao redor */
    padding: 15px; /* espaço interno */
    background: #0b1020; /* fundo azul escuro */
    border: 1px solid #263b66; /* borda azul */
    border-radius: 12px; /* cantos arredondados */
    text-align: left; /* alinha o conteúdo */
}

.regras-senha .titulo-regras{
    color: #ffffff; /* título branco */
    font-size: 14px; /* tamanho do título */
    margin-bottom: 10px; /* espaço abaixo */
}

.regras-senha p:not(.titulo-regras){
    color: #ff6b6b; /* regra não cumprida */
    font-size: 13px; /* tamanho do texto */
    margin: 8px 0; /* espaço entre regras */
    display: flex; /* ícone ao lado do texto */
    align-items: center; /* centraliza o ícone */
    gap: 8px; /* separação entre elementos */
}

.regras-senha p.valida{
    color: #38d97b; /* regra cumprida */
}

/* CONFIRMAÇÃO DE SENHA */
.mensagem-confirmacao{
    font-size: 13px; /* tamanho da mensagem */
    font-weight: 600; /* deixa o texto destacado */
    text-align: center; /* centraliza a mensagem */
    border-radius: 10px; /* arredonda os cantos */
    line-height: 1.5; /* melhora a leitura */
    margin: 0 0 15px; /* espaço abaixo */
}

/* SENHAS IGUAIS */
.mensagem-confirmacao.valida{
    color: #38d97b; /* texto verde */
    background: rgba(56, 217, 123, 0.10); /* fundo verde transparente */
    border: 1px solid rgba(56, 217, 123, 0.4); /* borda verde */
    padding: 10px; /* espaço interno */
}

/* SENHAS DIFERENTES */
.mensagem-confirmacao.invalida{
    color: #ff6b6b; /* texto vermelho */
    background: rgba(255, 50, 70, 0.12); /* fundo vermelho transparente */
    border: 1px solid rgba(255, 80, 100, 0.5); /* borda vermelha */
    padding: 10px; /* espaço interno */
}

.mensagem-erro{
    color: #ff6b6b; /* texto vermelho */
    font-size: 13px; /* tamanho da mensagem */
    margin: 12px 0; /* espaço vertical */
    text-align: left; /* alinhamento */
}

.mensagem-erro[hidden]{
    display: none; /* esconde quando não existe erro */
}

/* MENSAGEM DE ERRO */

.login .alerta-cadastro{
    background: #2a1018; /* fundo vermelho escuro */
    color: #ff8080; /* texto vermelho claro */
    border: 1px solid #d63852; /* borda vermelha */
    border-radius: 10px; /* cantos arredondados */
    padding: 12px; /* espaço interno */
    margin-bottom: 20px; /* distância dos campos */
    font-size: 13px; /* tamanho do texto */
    line-height: 1.5; /* espaçamento das linhas */
    text-align: left; /* alinha o texto */
}
.login .alerta-cadastro i{
    color: #ff8080; /* cor do ícone */
    margin-right: 6px; /* distância do texto */
}


/* REGRAS DA SENHA */

.login .regras-senha{
    background: #0b1020; /* fundo azul escuro */
    border: 1px solid #263b66; /* borda azul */
    border-radius: 12px; /* cantos arredondados */
    padding: 12px; /* espaço interno */
    margin: 12px 0 18px; /* espaçamento externo */
    text-align: left; /* alinha o conteúdo */
}

.login .regras-senha .titulo-regras{
    color: #ffffff; /* título branco */
    font-size: 13px; /* tamanho do título */
    margin-bottom: 8px; /* distância das regras */
}

.login .regras-senha p:not(.titulo-regras){
    color: #ff6b6b; /* vermelho para regra não cumprida */
    font-size: 12px; /* tamanho das regras */
    margin: 6px 0; /* distância entre regras */
    display: flex; /* ícone ao lado do texto */
    align-items: center; /* alinha verticalmente */
    gap: 8px; /* distância do ícone */
}

.login .regras-senha p.valida{
    color: #38d97b; /* verde quando a regra for cumprida */
}

.login .regras-senha i{
    color: inherit; /* acompanha a cor da regra */
}

/* ESCONDER AS REGRAS QUANDO NECESSÁRIO */

.login .regras-senha[hidden]{
    display: none; /* esconde as regras antes de digitar */
}


/* BARRA DE ESCOLHA DO PILOTO */

.escolha-piloto{
    margin: 0 0 20px; /* mantém o espaçamento igual aos outros campos */
    background: rgba(255,255,255,0.12); /* mesmo fundo dos inputs */
    border: none; /* remove a borda */
    border-radius: 30px; /* arredonda a barra */
    overflow: hidden; /* mantém o conteúdo dentro da barra */
}

/* TÍTULO DA BARRA */

.escolha-piloto summary{
    display: flex; /* organiza o ícone, texto e seta */
    align-items: center; /* centraliza verticalmente */
    gap: 10px; /* espaço entre os elementos */
    height: 45px; /* mesma altura dos inputs */
    padding: 0 15px; /* espaçamento lateral */
    color: #ccc; /* mesma cor dos placeholders */
    font-size: 17px; /* tamanho do texto */
    font-weight: normal; /* remove o negrito */
    cursor: pointer; /* indica que pode clicar */
    list-style: none; /* remove o marcador padrão */
}

/* REMOVE A SETA PADRÃO DO NAVEGADOR */

.escolha-piloto summary::-webkit-details-marker{
    display: none; /* esconde o marcador padrão */
}

/* ÍCONE DE CORES */

.escolha-piloto summary .fa-palette{
    color: #82aaff; /* azul claro */
}

/* SETA DA BARRA */

.seta-piloto{
    margin-left: auto; /* posiciona a seta à direita */
    font-size: 13px; /* tamanho da seta */
    transition: transform 0.3s; /* suaviza a rotação */
}

/* SETA QUANDO A BARRA ESTIVER ABERTA */

.escolha-piloto[open] .seta-piloto{
    transform: rotate(180deg); /* aponta para cima */
}

/* BARRA ABERTA */

.escolha-piloto[open]{
    border-radius: 20px; /* ajusta os cantos da barra aberta */
}

/* EFEITO AO PASSAR O MOUSE */

.escolha-piloto summary:hover{
    background: rgba(255,255,255,0.06); /* destaca suavemente */
}

/* CONTEÚDO DA SELEÇÃO */

.conteudo-pilotos{
    padding: 5px 12px 15px; /* espaço interno compacto */
    border-top: 1px solid #34466c; /* separa o título das cores */
}

/* DESCRIÇÃO */

.descricao-piloto{
    color: #c5cce0; /* cinza azulado */
    font-size: 12px; /* tamanho do texto */
    line-height: 1.5; /* melhora a leitura */
    text-align: center; /* centraliza a descrição */
    margin: 8px 0 14px; /* espaço acima e abaixo */
}

/* LISTA DE CORES */

.lista-pilotos{
    display: grid; /* organiza as opções em grade */
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* sete cores em uma linha */
    gap: 3px; /* espaço entre as opções */
}

/* CADA OPÇÃO DE COR */

.opcao-piloto{
    display: flex; /* organiza os elementos */
    flex-direction: column; /* coloca o nome abaixo do círculo */
    align-items: center; /* centraliza os elementos */
    gap: 5px; /* distância entre círculo e nome */
    padding: 5px 0; /* espaço interno compacto */
    background: transparent; /* remove o fundo dos cartões */
    border: none; /* remove as bordas */
    border-radius: 8px; /* arredonda levemente */
    cursor: pointer; /* indica que pode selecionar */
    transition: 0.3s; /* suaviza os efeitos */
}

/* ESCONDER O BOTÃO RADIO */

.login .opcao-piloto input[type="radio"]{
    position: absolute; /* retira do fluxo visual */
    opacity: 0; /* deixa invisível */
    width: 1px; /* largura mínima */
    height: 1px; /* altura mínima */
    margin: 0; /* remove a margem */
    padding: 0; /* remove o preenchimento */
}

/* CÍRCULOS DAS CORES */

.circulo-cor{
    display: block; /* permite definir dimensões */
    width: 27px; /* largura do círculo */
    height: 27px; /* altura do círculo */
    border-radius: 50%; /* deixa redondo */
    border: 1px solid rgba(255,255,255,0.4); /* contorno discreto */
}

/* CORES DISPONÍVEIS */

.circulo-cor.azul{
    background: #2962ff; /* azul */
}

.circulo-cor.vermelho{
    background: #ef4444; /* vermelho */
}

.circulo-cor.verde{
    background: #22c55e; /* verde */
}

.circulo-cor.amarelo{
    background: #facc15; /* amarelo */
}

.circulo-cor.roxo{
    background: #a855f7; /* roxo */
}

.circulo-cor.preto{
    background: #111111; /* preto */
}

.circulo-cor.branco{
    background: #ffffff; /* branco */
}

/* NOME DA COR */

.opcao-piloto span:last-child{
    color: white; /* texto branco */
    font-size: 9px; /* tamanho compacto */
    font-weight: normal; /* remove o negrito */
}

/* COR SELECIONADA */

.opcao-piloto:has(input:checked) .circulo-cor{
    outline: 2px solid #82aaff; /* destaca a cor selecionada */
    outline-offset: 3px; /* afasta o contorno */
    box-shadow: 0 0 8px rgba(41,98,255,0.5); /* brilho azul */
}

/* FOCO PELO TECLADO */

.opcao-piloto:has(input:focus-visible){
    outline: 2px solid white; /* mostra o foco */
    outline-offset: 2px; /* separa o contorno */
}

/* ADAPTAÇÃO PARA TELAS PEQUENAS */

@media (max-width: 420px){

    .lista-pilotos{
        gap: 2px; /* reduz o espaço entre as cores */
    }

    .circulo-cor{
        width: 24px; /* diminui os círculos */
        height: 24px; /* diminui os círculos */
    }

    .opcao-piloto span:last-child{
        font-size: 8px; /* reduz os nomes */
    }

}