/* ============================================================
   ARQUIVO: index.css
   PÁGINA:  index.html (Tela de Login)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --azul-principal: #3178C6;    /* Azul — botão de entrar e destaque de campos */
    --cor-fundo: #F4F7FB;         /* Cinza azulado — fundo da página de login */
    --texto-escuro: #333333;      /* Cor do texto principal */
    --texto-claro: #777777;       /* Textos secundários */
    --branco: #FFFFFF;            /* Branco — fundo dos campos */
    --cor-borda: #E0E0E0;         /* Borda dos campos e do rodapé */
    --fonte-padrao: 'Poppins', sans-serif;
    --sombra-leve: 0 2px 4px rgba(0, 0, 0, 0.05);
    --sombra-media: 0 4px 6px rgba(0, 0, 0, 0.1);
    --arredondamento-medio: 8px;
    --arredondamento-total: 9999px; /* Formato pílula — campos e botão de login */
    --animacao: all 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--fonte-padrao);
    background-color: var(--cor-fundo);
    color: var(--texto-escuro);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ----------------------------------------------------------
   BOTÃO PADRÃO (.btn)
   Estilo base de todos os botões.
   "inline-flex" alinha ícone e texto lado a lado.
   ---------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--arredondamento-medio);
    font-weight: 500;
    font-family: var(--fonte-padrao);
    cursor: pointer;
    transition: var(--animacao);
    border: none;
    font-size: 14px;
}

/* Variação azul do botão */
.btn-primario {
    background-color: var(--azul-principal);
    color: var(--branco);
}

.btn-primario:hover {
    background-color: #255F9E;
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

/* ----------------------------------------------------------
   CAMPO DE TEXTO (.campo)
   Estilo base dos inputs (caixas de digitação).
   ---------------------------------------------------------- */
.campo {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--arredondamento-medio);
    font-family: var(--fonte-padrao);
    font-size: 14px;
    transition: var(--animacao);
    background-color: var(--branco);
}

/* Destaque azul ao clicar no campo */
.campo:focus {
    outline: none;
    border-color: var(--azul-principal);
    box-shadow: 0 0 0 3px rgba(49, 120, 198, 0.2);
}

/* ----------------------------------------------------------
   RODAPÉ (.rodape)
   Barra no fundo da página.
   "margin-top: auto" sempre gruda no fundo.
   ---------------------------------------------------------- */
.rodape {
    color: var(--texto-claro);
    text-align: center;
    padding: 6px 0;
    font-size: 11px;
    font-weight: 600;
    margin-top: 20px;
}

/* ----------------------------------------------------------
   PÁGINA DE LOGIN (.pag-login)
   Centraliza o formulário no meio da tela.
   ---------------------------------------------------------- */
.pag-login {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------------------------------------------------------
   CARTÃO DE LOGIN (.cartao-login)
   Container com o formulário. Fundo transparente —
   apenas os campos ficam visíveis na tela.
   ---------------------------------------------------------- */
.cartao-login {
    max-width: 400px;
    width: 100%;
    text-align: center;
    padding: 10px;
    background: transparent;
    box-shadow: none;
}

/* Logo da empresa */
.logo-login {
    max-width: 200px;
    margin-bottom: 1rem;
}

/* Texto de boas-vindas/instrução */
.subtitulo-login {
    font-size: 14px;
    color: var(--texto-escuro);
    margin-bottom: 2rem;
    font-weight: 500;
}

/* ----------------------------------------------------------
   GRUPO DE CAMPO DE LOGIN (.grupo-login)
   Container de cada campo (e-mail, senha).
   "position: relative" permite que o ícone (cadeado/user)
   seja posicionado dentro do campo com position: absolute.
   ---------------------------------------------------------- */
.grupo-login {
    position: relative;
    margin-bottom: 1rem;
}

/* Ícone posicionado à esquerda dentro do campo */
.grupo-login i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%); /* Centraliza verticalmente */
    color: #aaa;
}

/* Campo de texto do login com espaço à esquerda pro ícone */
.campo-login {
    padding-left: 45px;
    border-radius: var(--arredondamento-total); /* Formato pílula */
    border: 1px solid transparent;
    box-shadow: var(--sombra-leve);
}

/* Botão "Acessar" */
.btn-login {
    width: 40%;
    border-radius: var(--arredondamento-total);
    padding: 8px;
    font-size: 16px;
    font-weight: 400;
    margin-top: 1rem;
}

/* Elementos com aparição suave */
.entrada-suave {
    opacity: 1;
}