/* =========================================================
   CONFIGURAÇÕES GERAIS
   ========================================================= */

/* Remove margens e espaçamentos padrão do navegador */
* {
    margin: 0;
    padding: 0;

    /* Faz padding e border serem incluídos no tamanho do elemento */
    box-sizing: border-box;
}


/* Configura o corpo inteiro da página */
body {
    /* Define a fonte principal */
    font-family: "Times New Roman", serif;

    /* Remove qualquer margem padrão */
    margin: 0;

    /* Define a cor marrom do fundo */
    background-color: #501f0c;

    /* Garante que o body ocupe toda a altura da tela */
    min-height: 100vh;
}


/* =========================================================
   PÁGINA PRINCIPAL
   ========================================================= */

/* Container que ocupa toda a tela */
.pagina {
    /* Faz o container ocupar toda a largura disponível */
    width: 100%;

    /* Faz o container ocupar pelo menos a altura da tela */
    min-height: 100vh;

    /* Ativa o Flexbox */
    display: flex;

    /* Centraliza o cartão horizontalmente */
    justify-content: center;

    /* Centraliza o cartão verticalmente */
    align-items: center;

    /* Permite um pequeno espaço nas laterais em telas pequenas */
    padding: 30px;
}


/* =========================================================
   CARTÃO BRANCO
   ========================================================= */

/* Cria o grande retângulo branco da imagem */
.card {
    /* Define a cor branca do cartão */
    background-color: #ffffff;

    /* Define a largura do cartão */
    width: 720px;

    /* Define a altura do cartão */
    height: 575px;

    /* Arredonda bastante os cantos */
    border-radius: 42px;

    /* Organiza os elementos verticalmente */
    display: flex;

    /* Direção vertical */
    flex-direction: column;

    /* Centraliza os elementos horizontalmente */
    align-items: center;

    /* Espaçamento interno */
    padding-top: 18px;

    /* Evita que o conteúdo ultrapasse o cartão */
    overflow: hidden;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.card h1 {
    /* Tamanho do texto "BEM VINDO!" */
    font-size: 31px;

    /* Deixa o texto normal, sem negrito */
    font-weight: normal;

    /* Cor preta */
    color: #000000;

    /* Espaço abaixo do título */
    margin-bottom: 2px;
}


/* =========================================================
   ABAS ENTRAR / CADASTRAR
   ========================================================= */

.abas {
    /* Coloca os dois botões lado a lado */
    display: flex;

    /* Centraliza os botões */
    justify-content: center;

    /* Alinha os botões verticalmente */
    align-items: center;

    /* Define a largura total */
    width: 100%;

    /* Altura da área das abas */
    height: 58px;
}


/* Estilo comum dos dois botões */
.aba {
    /* Remove a borda padrão */
    border: none;

    /* Define a altura */
    height: 58px;

    /* Define o tamanho da fonte */
    font-size: 15px;

    /* Usa a mesma fonte do restante da página */
    font-family: inherit;

    /* Coloca o texto e o ícone lado a lado */
    display: flex;

    /* Centraliza verticalmente */
    align-items: center;

    /* Centraliza horizontalmente */
    justify-content: center;

    /* Espaçamento entre ícone e texto */
    gap: 8px;

    /* Cursor vira uma mão quando passar por cima */
    cursor: pointer;

    /* Fundo transparente inicialmente */
    background-color: transparent;
}


/* Aba "Entrar" */
.entrar-aba {
    /* Define a largura */
    width: 135px;

    /* Mantém o fundo branco */
    background-color:#d8d8d8;

    /* Arredonda o lado esquerdo */
    border-radius: 15px 0 0 15px;
}


/* Aba "Cadastrar" */
.cadastrar-aba {
    /* Define a largura */
    width: 190px;

    /* Fundo cinza */
    background-color: #ffffff;

    /* Arredonda os cantos do lado direito */
    border-radius: 0 15px 15px 0;
}


/* Ícones das abas */
.icone {
    /* Define o tamanho dos símbolos */
    font-size: 20px;

    /* Faz o símbolo ficar mais fino */
    font-weight: normal;
}


/* =========================================================
   ÍCONE / DESENHO DO USUÁRIO
   ========================================================= */

.icone-usuario {
    width: 70px;
    height: 55px;

    margin-top: 20px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.icone-usuario img {
    width: 100px;
    height: 100px;

    object-fit: contain;
    display: block;
}




/* =========================================================
   CAMPOS DE LOGIN
   ========================================================= */

form {
    /* Define a largura do formulário */
    width: 275px;

    /* Espaço acima do formulário */
    margin-top: 7px;
}


/* Container de cada campo */
.campo {
    /* Define a largura */
    width: 275px;

    /* Define a altura */
    height: 27px;

    /* Fundo cinza */
    background-color: #d8d8d8;

    /* Deixa o campo arredondado */
    border-radius: 20px;

    /* Permite posicionar o ícone */
    position: relative;

    /* Coloca o conteúdo lado a lado */
    display: flex;

    /* Centraliza verticalmente */
    align-items: center;

    /* Espaço abaixo do campo */
    margin-bottom: 15px;
}


/* Ícone dentro do campo */
.campo-icone {
    /* Posicionamento absoluto */
    position: absolute;

    /* Distância da esquerda */
    left: 14px;

    /* Tamanho do ícone */
    font-size: 12px;

    /* Cor */
    color: #333;
}


/* Inputs */
.campo input {
    /* Ocupa toda a largura */
    width: 100%;

    /* Ocupa toda a altura */
    height: 100%;

    /* Remove borda padrão */
    border: none;

    /* Remove fundo padrão */
    background: transparent;

    /* Espaço à esquerda para o ícone */
    padding-left: 29px;

    /* Espaço à direita */
    padding-right: 30px;

    /* Define a fonte */
    font-family: inherit;

    /* Tamanho pequeno semelhante ao da imagem */
    font-size: 10px;

    /* Remove o contorno azul ao clicar */
    outline: none;
}


/* Cor do texto de placeholder */
.campo input::placeholder {
    /* Cor cinza escura */
    color: #333;

    /* Opacidade total */
    opacity: 1;
}


/* Ícone de olho */
.olho {
    /* Coloca o olho no lado direito */
    position: absolute;

    /* Distância do lado direito */
    right: 14px;

    /* Tamanho */
    font-size: 8px;

    /* Cor */
    color: #555;
}


/* =========================================================
   OPÇÕES: LEMBRAR E ESQUECI A SENHA
   ========================================================= */

.opcoes {
    /* Coloca os elementos lado a lado */
    display: flex;

    /* Coloca um em cada extremidade */
    justify-content: space-between;

    /* Alinha verticalmente */
    align-items: center;

    /* Largura */
    width: 275px;

    /* Move um pouco para cima */
    margin-top: -8px;

    /* Tamanho pequeno */
    font-size: 8px;

    /* Cor */
    color: #333;
}


/* Área do checkbox */
.lembrar {
    /* Coloca checkbox e texto lado a lado */
    display: flex;

    /* Centraliza verticalmente */
    align-items: center;

    /* Pequeno espaço */
    gap: 4px;
}


/* Checkbox */
.lembrar input {
    /* Remove a aparência padrão */
    appearance: none;

    /* Define largura */
    width: 10px;

    /* Define altura */
    height: 10px;

    /* Fundo cinza */
    background-color: #d8d8d8;

    /* Remove borda */
    border: none;

    /* Permite clicar */
    cursor: pointer;
}


/* Quando o checkbox estiver selecionado */
.lembrar input:checked {
    /* Deixa o fundo um pouco mais escuro */
    background-color: #999;
}


/* Link "Esqueceu a senha?" */
.esqueceu {
    /* Remove o sublinhado */
    text-decoration: none;

    /* Mantém a cor */
    color: #333;
}


/* =========================================================
   BOTÃO ENTRAR
   ========================================================= */

.botao-cadastrar {
    /* Define largura */
    width: 132px;

    /* Define altura */
    height: 41px;

    /* Remove borda */
    border: none;

    /* Fundo cinza */
    background-color: #d8d8d8;

    /* Deixa arredondado */
    border-radius: 25px;

    /* Tamanho da fonte */
    font-size: 20px;

    /* Usa a fonte principal */
    font-family: inherit;

    /* Cor do texto */
    color: #222;

    /* Coloca o botão no centro */
    display: block;

    /* Margem automática nas laterais */
    margin: 46px auto 0;

    /* Mostra a mão ao passar o mouse */
    cursor: pointer;

    /* Transição suave */
    transition: 0.2s;
}


/* Efeito ao passar o mouse no botão */
.botao-cadastrar:hover {
    /* Escurece um pouco o botão */
    background-color: #c8c8c8;

    /* Aumenta levemente o botão */
    transform: scale(1.03);
}


/* =========================================================
   LINK CADASTRAR-SE
   ========================================================= */

.cadastrar-link {
    /* Remove sublinhado */
    text-decoration: none;

    /* Cor preta */
    color: #222;

    /* Tamanho do texto */
    font-size: 12px;

    /* Cria espaço acima */
    margin-top: 15px;
}