/* Telas de entrada: entrar, esqueci a senha, redefinir.
   Saiu de dentro do Login.cshtml quando as três telas passaram a dividir o mesmo cartão. */

.va-login-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: linear-gradient(160deg, #0B1220 0%, #101B2B 55%, #183050 100%);
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

.va-login-card {
    background: #fff;
    border-radius: 1.1rem;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
    padding: 2.25rem 2rem;
    width: 100%;
    max-width: 400px;
}

.va-login-logo { height: 46px; width: auto; display: inline-block; }
.va-login-sub  { color: #6B7688; font-size: .9rem; margin-top: .35rem; }

/* Rodapé fora do cartão: presente para quem procura, discreto para quem não. */
.va-login-legal { margin-top: 1.25rem; font-size: .78rem; color: #8FA0B8; text-align: center; }
.va-login-legal a { color: #8FA0B8; text-decoration: none; }
.va-login-legal a:hover { color: #fff; text-decoration: underline; }

/* Entrar com o Google.
   Cinza sobre branco, como manda o guia da marca do Google — e por isso NÃO usa o verde
   do sistema: o botão precisa parecer do Google para o visitante confiar nele. */
.va-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: 100%;
    padding: .7rem 1rem;
    background: #fff;
    border: 1px solid #D5DBE3;
    border-radius: .6rem;
    font-weight: 600;
    font-size: .95rem;
    color: #1F2937;
    transition: background .15s, border-color .15s;
}
.va-btn-google:hover  { background: #F6F8FA; border-color: #B9C2CE; color: #1F2937; }
.va-btn-google:active { background: #EDF1F5; }
.va-btn-google svg    { width: 18px; height: 18px; flex: 0 0 18px; }

/* Separador "ou" — uma linha com o rótulo no meio, sem tabela nem imagem. */
.va-login-ou {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.15rem 0;
    color: #97A2B2;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.va-login-ou::before,
.va-login-ou::after { content: ""; flex: 1; height: 1px; background: #E3E8EE; }

.va-login-rodape {
    margin-top: 1.4rem;
    padding-top: 1.15rem;
    border-top: 1px solid #EDF0F4;
    text-align: center;
    font-size: .88rem;
    color: #6B7688;
}
.va-login-rodape a { color: var(--va-accent-text); font-weight: 600; text-decoration: none; }
.va-login-rodape a:hover { text-decoration: underline; }

.va-login-link { font-size: .82rem; color: #6B7688; text-decoration: none; }
.va-login-link:hover { color: var(--va-accent-text); text-decoration: underline; }

/* Alvo de toque confortável no celular e fonte de 16px para o iOS não dar zoom no foco. */
@media (max-width: 480px) {
    .va-login-card { padding: 1.75rem 1.25rem; border-radius: .9rem; }
    .va-login-card .form-control { font-size: 16px; padding: .6rem .75rem; }
    .va-login-card .btn { min-height: 46px; }
    .va-btn-google { min-height: 46px; }
}