/* ==================================================
   INDEX.CSS — Página de Login
   Depende de base.css (cores, tipografia, espaçamento)
================================================== */


/* ==================================================
   ÁREA DA PÁGINA
================================================== */

.login{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ==================================================
   CARD
   Tamanho reduzido — o card não precisa ocupar quase
   a tela toda, é só um formulário de duas entradas.
================================================== */

.login-card{
    width: 380px;
    padding: var(--espaco-xl) var(--espaco-lg);

    background: var(--branco);
    border-radius: 14px;
    box-shadow: var(--sombra-suave);

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ==================================================
   LOGO
================================================== */

.logo{
    width: 120px;
    margin-bottom: var(--espaco-lg);
}


/* ==================================================
   FORMULÁRIO
================================================== */

.login-form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}


/* ==================================================
   INPUTS
================================================== */

.login-form input{
    width: 100%;
    height: 38px;
    margin-bottom: var(--espaco-sm);
    padding: 0 var(--espaco-md);

    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio-borda);
    background: white;

    outline: none;
    font-family: var(--fonte-corpo);
    font-size: var(--texto-md);
    color: var(--texto-principal);

    transition: border-color .2s;
}

.login-form input:focus{
    border-color: var(--verde);
}

.login-form input::placeholder{
    color: var(--texto-secundario);
}


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

.login-form button{
    margin-top: var(--espaco-sm);
    height: 38px;

    border: none;
    border-radius: var(--raio-borda);
    background: var(--verde);
    color: white;

    font-family: var(--fonte-corpo);
    font-size: var(--texto-md);
    cursor: pointer;

    transition: background .2s;
}

.login-form button:hover{
    background: var(--verde-hover);
}

/* ==================================================
   ERRO DE LOGIN
================================================== */

.login-erro{
    color: #B23B3B;
    font-size: var(--texto-sm);
    margin-top: var(--espaco-sm);
    text-align: center;
}