style.css

/* Importa as fontes Roboto e Roboto Mono diretamente do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Mono&display=swap');

/* Definição das variáveis globais do projeto (paleta de cores e tipografia) */
:root {
--branco: white; /* Cor do texto geral */
--cor-de-fundo: #15002e; /* Roxo escuro do fundo da página */
--fundo-senha: #33004d; /* Roxo médio para o bloco do resultado da senha */
--fundo-texto: #2c0040; /* Roxo intermediário para o bloco de opções */
--borda: #d304fd; /* Rosa neon/magenta para destacar bordas e botões */
--roboto: 'Roboto', sans-serif; /* Fonte padrão para textos comuns */
--roboto-mono: 'Roboto Mono', monospace; /* Fonte monoespaçada (letras com mesma largura) para códigos e
senhas */
}

/* Reset global para definir a espessura da fonte padrão em todos os elementos */
* {
font-weight: 400; /* Estilo de fonte regular/normal */
}

/* Estilização da tag principal da página */
body {
color: var(--branco); /* Aplica a cor branca nos textos */
background-color: var(--cor-de-fundo); /* Aplica o roxo escuro no fundo total */
font-family: var(--roboto); /* Define a fonte padrão do site */
}

/* Estilo do título principal do gerador */
.titulo-principal {
font-family: var(--roboto-mono); /* Usa fonte monoespaçada para dar aspecto tecnológico */
font-size: 32px; /* Tamanho do texto grande */
}

/* Estilo do subtítulo do topo */
.titulo-secundario {
font-size: 24px;
}

/* Centraliza o bloco de títulos do topo e adiciona um espaçamento superior */
.conteudo-titulo {
text-align: center;
margin-top: 80px;
}

/* Bloco que envolve a exibição da senha gerada */
.conteudo-senha {
margin-top: 80px;
background: var(--fundo-senha);
padding: 24px; /* Espaçamento interno */
border-bottom: 6px solid var(--borda); /* Borda grossa magenta na parte inferior */
}

/* Campo de texto (input) que exibe a senha */
#campo-senha {
background-color: var(--fundo-senha);
border: none; /* Remove as bordas padrões do input */
color: var(--branco);
font-family: var(--roboto-mono); /* Garante que a senha fique bem alinhada */
font-size: 40px; /* Texto bem grande para leitura fácil */
width: 70%; /* Ocupa 70% da largura do bloco pai */
}

/* Remove a borda de realce padrão do navegador quando o input é focado/clicado */
#campo-senha:focus {
outline: none;
}

/* Container centralizador do projeto */
.conteudo {
max-width: 1200px; /* Largura máxima da aplicação na tela */
margin: 0 auto; /* Centraliza o bloco horizontalmente na tela */
}

/* Caixa geral que engloba todas as configurações da senha */
.parametro {
background-color: var(--fundo-texto);
border: 2px solid var(--borda); /* Borda magenta fina ao redor do bloco */
margin-top: 32px;
padding: 24px;
}

/* Título da seção de personalização */
.parametro-titulo {
font-family: var(--roboto-mono);
font-size: 28px;
}

/* Títulos menores dentro do painel (ex: "Número de caracteres") */
.parametro-senha__titulo {
font-size: 24px;
}

/* Container das colunas de opções (organizado por padrão para celular/telas pequenas) */
.parametro-coluna__senha {
display: flex;
flex-direction: column; /* Alinha os blocos de opções um abaixo do outro */
justify-content: center;
}

/* Cada bloco de opção individual */
.parametro-senha {
width: 50%; /* Ocupa metade do espaço disponível */
margin: 0 auto; /* Centraliza o bloco */
}

/* Alinhamento horizontal dos botões de "+" e "-" e do número */
.parametro-senha-botoes {
display: flex;
justify-content: center;
}

/* Botões de aumentar (+) e diminuir (-) o tamanho */
.parametro-senha__botao {
background-color: var(--fundo-texto);
color: var(--branco);
border: 2px solid var(--borda);
padding: 24px;
font-size: 24px;
cursor: pointer; /* Transforma a seta do mouse na "mãozinha" de clique */
}

/* Caixa com o número do tamanho atual da senha entre os botões */
.parametro-senha__texto {
padding: 24px;
border-top: 2px solid var(--borda); /* Borda magenta apenas no topo */
border-bottom: 2px solid var(--borda); /* Borda magenta apenas na base */
margin: 0;
font-size: 24px;
}

/* Estilo do texto dos rótulos dos checkboxes */
label {

font-size: 20px;
}

/* Estilo das caixas de seleção (checkboxes) */
.checkbox {
width: 20px;
height: 20px;
cursor: pointer; /* Aplica a "mãozinha" de clique */
}

/* Fundo cinza/roxo escuro que serve como trilha vazia para a barra de força */
.barra {
background-color: var(--fundo-senha);
height: 30px;
width: 100%;
}

/* Elemento da barra de força que vai se sobrepor à trilha de fundo */
.forca {
height: 30px;
position: relative;
bottom: 30px; /* Joga a barra preenchida exatamente em cima do elemento '.barra' */
}

/* Estado: Senha Fraca (25% de preenchimento em vermelho) */
.fraca {
width: 25%;
background-color: #E71B32;
}

/* Estado: Senha Média (50% de preenchimento em amarelo) */
.media {
background-color: #FAF408;

width: 50%;
}

/* Estado: Senha Forte (100% de preenchimento em verde) */
.forte {
background-color: #00FF85;
width: 100%;
}

/* Distribui as legendas textuais ("Fraca", "Média", "Forte") pelas extremidades da barra */
.parametro-senha-textos {
display: flex;
justify-content: space-between;
}

/* Regra de responsividade (Media Query) para telas maiores (computadores/tablets) */
@media screen and (min-width: 768px) {
/* Altera o alinhamento das opções para ficarem lado a lado (em linha) em telas grandes */
.parametro-coluna__senha {
flex-direction: row;
}
}