/* Reset básico e estilos globais */
* {
    margin: 0; /* Remove margem padrão de todos os elementos */
    padding: 0; /* Remove espaçamento interno padrão */
    box-sizing: border-box; /* Faz com que width/height incluam padding e borda */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Define fonte padrão */
}

body {
    background-color: #f5f5f5; /* Cor de fundo base */
    display: flex; /* Usa Flexbox para centralizar o conteúdo */
    justify-content: center; /* Centraliza na horizontal */
    align-items: center; /* Centraliza na vertical */
    min-height: 100vh; /* Ocupa toda a altura da tela */
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Fundo com degradê suave */
}

/* Container do formulário */
form {
    background: white; /* Fundo branco para destacar */
    padding: 2.5rem; /* Espaçamento interno grande */
    border-radius: 10px; /* Cantos arredondados */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Sombra para efeito de elevação */
    width: 100%; /* Ocupa 100% da largura disponível */
    max-width: 400px; /* Limita largura máxima para não ficar muito largo */
    transition: transform 0.3s ease; /* Animação suave para transformações */
}

/* Título do formulário */
h2 {
    color: #2c3e50; /* Cor do título */
    display: block; /* Garante que ocupa toda a linha */
    width: 20rem; /* Ocupa a largura do container */
    margin-bottom: 1.5rem; /* Espaço abaixo do título */
    text-align: center; /* Centraliza o texto */
    font-size: 1.8rem; /* Tamanho do texto */
}

/* Campos de entrada (inputs) */
input {
    width: 100%; /* Ocupa toda a largura do container */
    padding: 12px 15px; /* Espaçamento interno: 12px vertical, 15px horizontal */
    margin-bottom: 1rem; /* Espaço entre inputs */
    border: 1px solid #ddd; /* Borda fina e clara */
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 1rem; /* Tamanho do texto */
    transition: border 0.3s ease; /* Animação para mudança de borda */
}

/* Estilo do input quando focado */
input:focus {
    border-color: #3498db; /* Cor da borda azul */
    outline: none; /* Remove contorno padrão do navegador */
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); /* Brilho suave ao redor */
}

/* Botão do formulário */
button {
    width: 100%; /* Botão ocupa toda a largura */
    padding: 12px; /* Espaçamento interno */
    background-color: #3498db; /* Cor azul padrão */
    color: white; /* Texto branco */
    border: none; /* Remove borda padrão */
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 1rem; /* Tamanho do texto */
    cursor: pointer; /* Cursor de mão ao passar o mouse */
    transition: background-color 0.3s ease; /* Animação na mudança de cor */
}

button:hover {
    background-color: #2980b9; /* Azul mais escuro ao passar o mouse */
}

/* Mensagens flash (ex: erro ou sucesso) */
p {
    margin-top: 1rem; /* Espaço acima */
    padding: 10px; /* Espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
    text-align: center; /* Texto centralizado */
}

/* Responsividade para telas pequenas */
@media (max-width: 480px) {
    form {
        padding: 1.5rem; /* Reduz o padding interno */
        margin: 0 1rem; /* Adiciona espaço lateral */
    }
    
    h2 {
        font-size: 1.5rem; /* Diminui título para caber melhor */
    }
}