/*
 * === CONFIGURAÇÕES GLOBAIS E RESET ===
 * Removemos margens e paddings padrão e definimos o 'box-sizing'
 * para que as dimensões dos elementos incluam padding e borda.
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Uma fonte padrão e limpa */
}

/*
 * === CORPO DA PÁGINA ===
 * O corpo da página ocupará toda a tela e terá o fundo escuro.
 * Usamos flexbox para centralizar o contêiner de login vertical e horizontalmente.
 */
body {
    background-color: #1c1c1c; /* Cor de fundo escura, conforme a imagem */
    color: #b0892a; /* Cor primária (dourado/mostarda) para os textos */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    min-height: 100vh; /* Altura mínima de 100% da tela */
    padding: 20px; /* Um espaçamento para não colar nas bordas em telas pequenas */
}

/*
 * === CONTÊINER PRINCIPAL DO LOGIN ===
 * Este é o "card" que agrupa todos os elementos da tela.
 */
.login-container {
    width: 100%;
    max-width: 400px; /* Largura máxima para não ficar muito grande em desktops */
    background-color: #1c1c1c; /* Mesmo fundo do body */
    display: flex;
    flex-direction: column; /* Organiza os itens em coluna (um embaixo do outro) */
    align-items: center; /* Centraliza os itens do card */
    gap: 20px; /* Espaçamento entre os elementos filhos */
    text-align: center;
}

/*
 * === CABEÇALHO COM LOGO E NOME ===
 */
.header {
    width: 100%;
    text-align: left; /* Alinha o texto do cabeçalho à esquerda */
    font-size: 1.1em;
    font-weight: bold;
    padding-bottom: 20px;
}

/*
 * === TÍTULO "SEJA BEM-VINDO!" ===
 */
h1 {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 10px;
}

/*
 * === CAIXA DO ÍCONE DE USUÁRIO ===
 */
.avatar-container {
    width: 150px;
    height: 150px;
    background-color: #b0892a; /* Fundo dourado */
    border-radius: 15px; /* Bordas arredondadas */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.avatar-icon {
    font-size: 80px; /* Tamanho do ícone */
    color: #1c1c1c; /* Cor escura para o ícone */
}


/*
 * === FORMULÁRIO E SEUS CAMPOS ===
 */
.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre os campos (Login, Senha, Botão) */
}

.input-group {
    width: 100%;
    text-align: left; /* Alinha os labels (Login:, Senha:) à esquerda */
}

    .input-group label {
        display: block; /* Faz o label ocupar uma linha inteira */
        margin-bottom: 5px; /* Espacinho entre o label e o campo de input */
        font-weight: bold;
    }

    .input-group input {
        width: 100%;
        padding: 15px;
        border: none; /* Remove a borda padrão */
        border-radius: 8px; /* Bordas arredondadas */
        background-color: #333333; /* Fundo cinza escuro para os campos */
        color: #ffffff; /* Texto branco ao digitar */
        font-size: 1em;
    }

/*
 * === BOTÃO DE ENTRAR ===
 */
.btn-entrar {
    width: 100%;
    padding: 15px;
    background-color: #b0892a; /* Cor dourada */
    color: #1c1c1c; /* Texto escuro */
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer; /* Muda o cursor para uma mãozinha */
    transition: background-color 0.3s ease; /* Efeito suave na mudança de cor */
}

    .btn-entrar:hover {
        background-color: #c99a30; /* Cor um pouco mais clara ao passar o mouse */
    }

/*
 * === LINK PARA CRIAR CONTA ===
 */
.criar-conta {
    margin-top: 10px;
}

    .criar-conta p {
        color: #cccccc; /* Cor cinza claro para "Não tem uma conta?" */
        margin-bottom: 5px;
    }

    .criar-conta a {
        color: #b0892a; /* Cor dourada para o link */
        text-decoration: none; /* Remove o sublinhado */
        font-weight: bold;
    }

        .criar-conta a:hover {
            text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
        }

/*
 * === RODAPÉ ===
 */
.footer {
    position: absolute; /* Posição absoluta para fixar na base da tela */
    bottom: 20px; /* Distância da base */
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 25px; /* Espaço entre os links do rodapé */
}

    .footer a {
        color: #888888; /* Cor cinza para os links do rodapé */
        text-decoration: none;
        font-size: 0.9em;
    }

        .footer a:hover {
            color: #b0892a; /* Muda para a cor dourada ao passar o mouse */
        }

/*
 * === RESPONSIVIDADE PARA TELAS PEQUENAS (CELULARES) ===
 * Media query que aplica estas regras quando a tela for menor que 480px de largura.
 */
@media (max-width: 480px) {
    h1 {
        font-size: 1.8em; /* Diminui um pouco o título principal */
    }

    .avatar-container {
        width: 120px; /* Diminui o container do avatar */
        height: 120px;
    }

    .avatar-icon {
        font-size: 60px; /* Diminui o ícone */
    }

    .footer {
        position: static; /* Tira o rodapé da posição fixa */
        margin-top: 40px; /* Adiciona um espaço acima dele */
        flex-direction: column; /* Coloca os links um embaixo do outro */
        gap: 15px; /* Diminui o espaço entre eles */
    }