/* Tela de autenticação: sempre clara (exceção deliberada do design system),
   título em Outfit, cartão centrado sobre fundo neutro. */

.entrar-fundo {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutra);
    padding: 16px;
}

.entrar-cartao {
    width: 100%;
    max-width: 384px;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.entrar-titulo {
    font-family: var(--fonte-display);
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
}

.entrar-subtitulo {
    font-size: 14px;
    line-height: 20px;
    color: var(--neutra-texto);
}

.entrar-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.entrar-opcoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Aviso de falha de autenticação (não é erro de campo): tint destrutivo */
.entrar-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--raio-md);
    border: 1px solid color-mix(in srgb, var(--destrutiva) 30%, transparent);
    background: color-mix(in srgb, var(--destrutiva) 10%, transparent);
    color: var(--destrutiva);
    font-size: 12px;
}

.entrar-marca {
    display: flex;
    align-items: center;
    gap: 8px;
}

.entrar-marca .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--raio-md);
    background: color-mix(in srgb, var(--primaria) 10%, transparent);
    color: var(--primaria);
    font-family: var(--fonte-display);
    font-weight: 600;
    font-size: 14px;
}